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

我正在建立一个扑动应用程序，我想打开一个网页浏览器或浏览器窗口的网址(响应按钮点击)。我怎么能这么做？

212682 次浏览
小开
最佳答案

DR

这现在实现为 插件

const url = "https://flutter.io";
if (await canLaunchUrl(url))
await launchUrl(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)，然后传递结果值。

小开

如果您想使用 url _ launcher，请在此表单中使用它

environment:
sdk: ">=2.1.0 <3.0.0"


dependencies:
url_launcher: ^5.0.2
flutter:
sdk: flutter

这个答案也适用于绝对的初学者: 他们正在思考颤动 sdk 的背后。 不，那是个失败。这些包裹都是额外的，没有在飘动的 Sdk。这些是辅助包(单个小框架辅助程序)。

小开

对于扑动:

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

扑动网:

import 'dart:html' as html;

然后使用:

html.window.open(url, name);

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

小开

最好的方法是使用 Url _ launcher软件包。

在 pubspec.yaml文件中添加 Url _ launcher作为依赖项。

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

enter image description here

发射方法接受包含 URL 的字符串参数。 默认情况下，Android 在处理 URL 时会打开一个浏览器 传递 forceWebView: true参数来告诉插件打开一个 WebView 如果对包含 JavaScript 的页面的 URL 执行此操作, 确保传入 enableJavaScript: true，否则启动方法 将不能正常工作。在 iOS 上，默认行为是打开所有 在应用程序中的网页地址。其他一切都被重定向到应用程序 联络人。

小开

如果您的目标 sdk30或以上的 canLaunch将返回由于包可见性变化默认为 false: https://developer.android.com/training/basics/intents/package-visibility

在 androidManifest.xml中，你需要在 <manifest>下面直接添加以下内容:

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

那么下面的单词应该是——表示向上的 flutter 3:

const uri = Uri.parse("https://flutter.io");
if (await canLaunchUrl(uri)){
await launchUrl(uri);
} else {
// can't launch url
}

或者对于较老版本的 flutter 使用以下代码:

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

launchUrl有一个 mode参数，可以用来控制 URL 在哪里启动。

因此，传入 launchUrl(uri, mode: LaunchMode.platformDefault)就需要决定如何将 URL 启动到平台 但也可以指定

LaunchMode.inAppWebView将使用一个应用程序内的网络视图 由外部应用程序处理的 LaunchMode.externalApplication

或者由非浏览器应用程序处理的 LaunchMode.externalNonBrowserApplication。

小开

对于那些希望通过使用 url _ launcher 实现 LAUNCHBrowSER 和 EXIT 应用程序的用户。记住使用(forcSafariVC: false)打开手机默认浏览器中的 URL。否则，已启动的浏览器将与应用程序一起退出。

await launch(URL, forceSafariVC: false);
小开

这现在实现为 插件

    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

输出

小开

正如您在示例中所解释的那样，插件插件工作得非常好。

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
final Uri _url = Uri.parse('https://flutter.dev');
void main() => runApp(
const MaterialApp(
home: Material(
child: Center(
child: ElevatedButton(
onPressed: launchUrlStart(url: "https://flutter.dev"),
child: Text('Show Flutter homepage'),
),
),
),
),
);


Future<void> launchUrlStart({required String url}) async {
if (!await launchUrl(Uri.parse(url))) {
throw 'Could not launch $url';
}
}

但是当试图打开 PDF https://www.orimi.com/pdf-test.pdf时，它仍然是空白的，问题是浏览器以自己的方式处理它。因此，解决方案是告诉它使用外部应用程序打开，并且它按预期工作。

Future<void> launchUrlStart({required String url}) async {
if (!await launchUrl(Uri.parse(url),mode: LaunchMode.externalApplication)) {
throw 'Could not launch $url';
}
}

在 pubspec.yaml

#https://pub.dev/packages/url_launcher
url_launcher: ^6.1.5
小开

使用 url _ launcher 包执行以下操作:

dependencies:
url_launcher: ^latest_version




if (await canLaunchUrl(Uri.parse(url))) {
await launchUrl(Uri.parse(url));
}

注意 : 确保打开的是 URI，而不是 String。


提交答案