如何在新选项卡或同一选项卡中打开 Flutter Web 中的外部 URL

Question

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

Answer 1

扩展@xuyanjun 的答案，当想要从flutter web 打开外部链接到新标签时效果很好。但是，如果您想在 Flutter Web 应用当前运行的同一选项卡中打开指向该网站的外部链接。

那么你可以这样做。

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

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

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

因此，如果您想打开新标签，则不需要传递 seconds 参数，但如果您想在同一个标​​签中打开，则传递 _self 作为第二个参数。

Answer 2

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

import 'dart:js' as js;

// ...

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

Answer 3

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

import 'dart:html' as html;

// ...

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

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

Answer 4

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

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

Answer 5

在这里回答https://stackoverflow.com/a/56656885/361832

Flutter Web 不支持插件（目前），所以你必须使用 dart:html 的替代品

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

或

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

Answer 6

您可以使用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';
  }
}

示例取自包站点