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

Question

我正在构建一个Flutter应用程序,我想在Web浏览器或浏览器窗口中打开一个URL(响应按钮点击).我怎样才能做到这一点？

Answer 1

现在将其实现为插件

https://pub.dartlang.org/packages/url_launcher

例:

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';
  }
}

特殊字符:

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

Uri.encodeFull(urlString)或者Uri.encodeComponent(urlString)传递结果值.

Answer 2

最好的方法是使用url_launcher包。

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

dependencies:
  url_launcher: 

如何使用它的示例：

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 canLaunchUrl(Uri.parse(url))) {
    await launchUrl(Uri.parse(url));
  } else {
    throw 'Could not launch $url';
  }
}

输出 ：

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

Answer 3

如果您的目标是 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
}

Answer 4

对于颤振：

如所描述的上述由君特Zöchbauer

对于 Flutter Web：

import 'dart:html' as html;

然后使用：

html.window.open(url, name);

flutter clean如果import没有解决，请确保您运行。

Answer 5

现在已作为插件实现

    const url = "https://flutter.io";
    final Uri _url = Uri.parse(url);

    await launchUrl(_url,mode: LaunchMode.externalApplication);

 pubspec.yaml 
Add dependencies

依赖项： url_launcher：^6.0.12

输出

Answer 6

使用 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);
}

Answer 7

[注意:UrlLauncher不再存在.请参阅解决方案的已接受答案.]

您可以使用UrlLauncher执行以下操作:

new FlatButton(
  textColor: style.mainTheme.accentColor,
  child: new Text(signInLabel, style: style.largeText),
  onPressed: () {
    UrlLauncher.launch('http://www.webpage.com');
  }
);

Answer 8

如果您想使用 url_launcher，请以此形式使用

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  url_launcher: ^5.0.2
  flutter:
    sdk: flutter

这个答案也适合绝对的初学者：他们正在思考 flutter sdk 的背后。不，那是一次失败。这些软件包是额外的，不在 flutter Sdk 中。这些是辅助包（单个小框架助手）。

Answer 9

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

await launch(URL, forceSafariVC: false);