如何从我的 Flutter 代码中打开 Web 浏览器 (URL)？答案

【问题标题】：How do I open a web browser (URL) from my Flutter code?如何从我的 Flutter 代码中打开 Web 浏览器 (URL)？
【发布时间】：2017-08-26 05:16:28
【问题描述】：

我正在构建一个 Flutter 应用程序，我想在 Web 浏览器或浏览器窗口中打开一个 URL（以响应按钮点击）。我该怎么做？

【问题讨论】：

gist.github.com/chinmaygarde/d778498418e30825d687147b79d070eb 这可能会有所帮助。

标签： flutter dart url browser webbrowser-control

【解决方案1】：

TL;DR

现在实现为Plugin

const url = "https://flutter.io";
if (await canLaunch(url))
  await launch(url);
else 
  // can't launch url, there is some error
  throw "Could not launch $url";

完整示例：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(new Scaffold(
    body: new Center(
      child: new RaisedButton(
        onPressed: _launchURL,
        child: new Text('Show Flutter homepage'),
      ),
    ),
  ));
}

_launchURL() async {
  const url = 'https://flutter.io';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

在 pubspec.yaml 中

dependencies:
  url_launcher: ^5.7.10

特殊字符：

如果url 值包含现在在 URL 中允许的空格或其他值，请使用

Uri.encodeFull(urlString) 或 Uri.encodeComponent(urlString) 并改为传递结果值。

【讨论】：

请注意，您可能需要创建一个新的 Flutter 项目并复制 Flutter 特定的内容（lib、pubspec.yaml 等），或者反过来更新旧项目中的平台特定文件夹让这个工作。
注意：不要忘记在 pubspec.yaml 中添加 url_launcher: ^3.0.2
“添加到现有应用程序”是什么意思？也许您在android/ 或ios/ 中的文件已经过时了。如果它适用于新应用程序，则比较文件并在您的项目中更新它们。您也可以删除这些目录并运行flutter create .，然后重新应用手动更改。
@hbhakhra 现在url_launcher: ^5.0.2 继续检查。
url_launcher插件不可用的flutter_web如何打开链接？

【解决方案2】：

如果您的目标是 sdk 30 或更高版本，canLaunch 将由于包可见性更改而默认返回 false：https://developer.android.com/training/basics/intents/package-visibility

在androidManifest.xml 中，您需要添加以下内容

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" />
    </intent>
</queries>

那么下面应该是单词

const url = "https://flutter.io";
if (await canLaunch(url)){
  await launch(url);
}
else {
  // can't launch url
}

【讨论】：

您能准确描述在 XML 文件中放置部分的位置吗？
它应该直接在下，因此与和之类的东西处于同一级别

【解决方案3】：

使用 URL Launcher 插件url_launcher

要启动一个网页，让我们成为一个异步函数并执行以下操作：

launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }

如果我们希望 iOS 和 Android 都在应用程序中打开网页（作为 WebView），那么添加 forceWebView: true 我们会这样做：

 launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceWebView: true);
    } else {
      throw 'Could not launch $url';
    }
 }

这样称呼它

onTap: () {
    const url = 'https://google.com';
    launchURL(url);
}

【讨论】：

URL启动后是否可以关闭应用？我用 exit(0) 试过了，但它也关闭了浏览器。因为，我打开了一个网站，苹果希望用户退出应用程序并查看该网站。

【解决方案4】：

对于 Flutter：

正如 Günter Zöchbauer 所描述的above

对于 Flutter Web：

import 'dart:html' as html;

然后使用：

html.window.open(url, name);

如果import 无法解析，请确保运行flutter clean。

【讨论】：

url_launcher 包现在支持网络

【解决方案5】：

对于那些想要使用 url_launcher 实现 LAUNCH BROWSER AND EXIT APP 的人。记得使用 (forceSafariVC: false) 在手机默认浏览器中打开网址。否则，启动的浏览器会随着你的APP一起退出。

await launch(URL, forceSafariVC: false);

【讨论】：

这是我需要的，因为我必须从应用程序中提供的二维码扫描仪启动 Firebase 动态链接。我需要在外部启动该 URL，以便将其识别为应用程序中的动态链接并进行适当处理。

【解决方案6】：

最好的办法是使用url_launcher包。

将 url_launcher 添加为 pubspec.yaml 文件中的依赖项。

dependencies:
  url_launcher: ^5.7.10

如何使用它的示例：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(
    MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter is beautiful'),),
      body: Center(
        child: RaisedButton(
          onPressed: _launchURL,
          child: Text('Show Flutter homepage'),
        ),
      ),
    )),
  );
}

_launchURL() async {
  const url = 'https://flutter.dev';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

输出：

launch 方法接受一个包含 URL 的字符串参数。默认情况下，Android 在处理 URL 时会打开浏览器。你可以传递forceWebView: true 参数告诉插件打开一个WebView 反而。如果您对包含 JavaScript 的页面的 URL 执行此操作，确保传入enableJavaScript: true，否则启动方法将无法正常工作。在 iOS 上，默认行为是打开所有应用内的网址。其他所有内容都被重定向到应用程序处理程序。

【讨论】：

URL启动后是否可以关闭应用？我用 exit(0) 试过了，但它也关闭了浏览器。
@ManoHaran 您可以使用 forceSafariVC 在手机默认浏览器中打开 URL：await launch(URL, forceSafariVC: false);

【解决方案7】：

如果您想使用 url_launcher，请以这种形式使用它

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  url_launcher: ^5.0.2
  flutter:
    sdk: flutter

这个答案也适用于绝对的初学者：他们在 Flutter sdk 背后思考。不，那是失败。这些包是额外的，而不是在颤振的 Sdk 中。这些是辅助包（单个小型框架助手）。

【讨论】：

【解决方案8】：

经过一番搜索，可以通过此处列出的说明解决此问题：https://groups.google.com/forum/#!topic/flutter-dev/J3ujgdOuG98

以上UrlLauncher 不再可用。

【讨论】：

所以你只是想：那里的链接坏了；所以让我们提出另一个只包含一个链接的答案？
虽然这在理论上可以回答这个问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案9】：

使用url_launcher 包。它会为你做到这一点

【讨论】：