如何从Flutter代码打开Web浏览器(URL)?

tzdcorbm  于 2022-11-30  发布在  Flutter
关注(0)|答案(9)|浏览(389)

我正在构建Flutter应用程序,我想在Web浏览器或浏览器窗口中打开一个URL(响应按钮点击)。我该如何操作?

lrpiutwd

lrpiutwd1#

TL;DR

这现在实现为Plugin

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

在公共规范yaml中

dependencies:
  url_launcher: ^5.7.10

特殊字符:

如果url值包含空格或URL中现在允许的其他值,请使用
Uri.encodeFull(urlString)Uri.encodeComponent(urlString),并传递结果值。

k5ifujac

k5ifujac2#

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

那么下面的话应该--为向上Flutter3:

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,它将使用应用内web视图LaunchMode.externalApplication,以便由外部应用处理
或者LaunchMode.externalNonBrowserApplication由非浏览器应用程序处理。

w7t8yxp5

w7t8yxp53#

对于Flutter:

如Günter Zöchbauer所述above

对于Flutter腹板:

import 'dart:html' as html;

然后使用:

html.window.open(url, name);

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

q3qa4bjr

q3qa4bjr4#

对于那些希望通过使用url_launcher来实现“启动浏览器并退出应用程序”的用户,请记住使用(forceSafariVC:false)在手机的默认浏览器中打开该网址,否则,启动的浏览器将与您的应用程序一起退出。

await launch(URL, forceSafariVC: false);
w1jd8yoj

w1jd8yoj5#

最好的方法是使用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,否则launch方法将无法正常工作。在iOS上,默认行为是打开应用程序中的所有Web URL。其他所有内容都被重定向到应用程序处理程序。

vfh0ocws

vfh0ocws6#

如果你想使用url_launcher,请使用它在此形式

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  url_launcher: ^5.0.2
  flutter:
    sdk: flutter

这个答案也适用于绝对的初学者:他们在flutter sdk后面思考。不,那是一个失败。这些包是额外的,不在flutter Sdk中。这些是次要的包(单个小框架助手)。

ymzxtsji

ymzxtsji7#

这现在实现为Plugin
第一个
相关性:URL启动程序(_L):012年6月号
Output

kiayqfof

kiayqfof8#

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

在公共规范yaml中

#https://pub.dev/packages/url_launcher
url_launcher: ^6.1.5
ghg1uchk

ghg1uchk9#

使用url_launcher软件包执行以下操作:

dependencies:
  url_launcher: ^latest_version

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

注意:请确保尝试打开的是URI,而不是字符串。

相关问题