如何在新选项卡或同一选项卡中的 flutter web 中打开外部 url

Question

我有一个用 flutter web 创建的简单网络应用程序。我想知道如何在我的 flutter 网络应用程序中的 new tab 或 the same tab 中打开新的 external url。说我要打开 url https://whosebug.com/questions/ask

Answer 1

您可以使用 url_launcher plugin

然后在你的代码中

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

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

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

示例取自包站点

Answer 2

我想你想要这个 — dart:js 启用 Dart 和 JS 之间的互操作性 —:

import 'dart:js' as js;

// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://whosebug.com/questions/ask']);
  },
)

Answer 3

在这里回答

Flutter Web 不支持插件（目前），因此您必须使用来自 dart:html

的替代品

https://api.dartlang.org/stable/2.4.0/dart-html/Window/open.html window.open(url, 'tab');

或

https://api.dartlang.org/stable/2.4.0/dart-html/Window/location.html window.location.assign(url);

Answer 4

https://github.com/flutter/plugins/tree/master/packages/url_launcher/url_launcher_web

url_launcher 一直是 android 和 ios 的解决方案，最近它增加了对网络的支持。

Answer 5

一种简单的方法是只创建一个按钮并使用 dart:html 的 window.open() 方法：

import 'dart:html' as html;

// ...

html.window.open('https://whosebug.com/questions/ask', 'new tab');

name 参数（我保留为 'new tab'）指的是新选项卡的 window 名称，您可以从 MDN's documentation 了解更多信息。

Answer 6

扩展@xuyanjun 的答案，当想要从 flutter web 打开外部 link 到新选项卡时效果很好。但是如果你想在当前 flutter web 应用程序运行.

的同一个选项卡中打开一个外部 link 到网站

那你也可以这样做。

import 'dart:js' as js;
// ...

FlatButton(
  child: Text('Button'),
  onPressed: () {
    js.context.callMethod('open', ['https://blup.in/','_self']); //<= find explanation below
  },
)

解释：- dart:js 来自 flutter 的包提供了调用 web 特定函数的功能，例如来自 flutter 的 open 函数，列表中的所有字符串都是传递给函数引用的参数this.

所以如果你想打开新标签那么不需要传递秒参数但是如果你想在同一个标签中打开然后传递 _self 作为第二个参数。

Answer 7

包 url_launcher 现在有网络支持。

只需导入 url_launcher_web，然后 url_launcher 到您的 pubspec.yaml

import 'package:url_launcher/url_launcher.dart';
const String _url = 'https://flutter.dev';

void _launchURL()   {
   launch(_url);
}

Answer 8

从 url_launcher: ^6.1.0 开始，该插件引入了对 webOnlyWindowName 属性和一些其他新 API 的支持，例如 launchUrl，对于网络支持，现在您不再需要依赖 dart:html 你可以简单地声明下面的函数

  Future<void> launchLink(String url, {bool isNewTab = true}) async {
    await launchUrl(
      Uri.parse(url),
      webOnlyWindowName: isNewTab ? '_blank' : '_self',
    );
  }

并像这样使用它

onTap:(){
   launchLink('https://whosebug.com/questions/ask', isNewTab: true)
}

Answer 9

您可以使用以下代码在同一选项卡中启动 URL。

window.top.location.href = '<your url>'

必须导入

import 'dart:html';

如何在新选项卡或同一选项卡中的 flutter web 中打开外部 url

How do I open an external url in flutter web in new tab or in same tab

dart

flutter

flutter-web