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

Question

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

Answer 1

TL；博士

现在实现为Plugin

 final Uri url = Uri.parse('https://flutter.dev');
 if (!await launchUrl(url)) {
      throw Exception('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 {
   final Uri url = Uri.parse('https://flutter.dev');
   if (!await launchUrl(url)) {
        throw Exception('Could not launch $_url');
    }
}

在 pubspec.yaml 中

dependencies:
  url_launcher: ^6.1.11

查看最新的 url_launcher 包。

特殊字符：

如果

url

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

Uri.encodeFull(urlString)

或

Uri.encodeComponent(urlString)

并传递结果值。

Answer 2

如果您的目标是 sdk 30 或更高版本

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 upwards：

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

由非浏览器应用程序处理。

Answer 3

对于颤振：

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

对于 Flutter Web：

import 'dart:html' as html;

然后使用：

html.window.open(url, name);

如果

flutter clean

没有解决，请确保运行

import

。

Answer 4

对于那些想要使用 url_launcher 实现启动浏览器和退出应用程序的人。请记住使用 (forceSafariVC: false) 在手机的默认浏览器中打开 url。否则，启动的浏览器会随着您的 APP 一起退出。

await launch(URL, forceSafariVC: false);

Answer 5

最好的方法是使用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 上，默认行为是打开所有 应用内的网址。其他所有内容都重定向到应用程序 处理程序。

Answer 6

现在实现为

    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 7

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

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  url_launcher: ^5.0.2
  flutter:
    sdk: flutter

这个答案也是给绝对初学者的：他们在思考flutter sdk的背后。 不，那是失败的。这些包是额外的，不在 flutter Sdk 中。这些是二级包（单个小框架助手）。

Answer 8

PLUGIN 插件效果很好，正如您在示例中所解释的那样。

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

Answer 9

使用 url_launcher 包执行以下操作：

dependencies:
  url_launcher: ^latest_version


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

注意：确保您尝试打开的是 URI，而不是字符串。