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

Question

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

Answer 1

我认为你想要这个——dart:js实现 Dart 和 JS 之间的互操作性——：

import 'dart:js' as js;

// ...

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

Answer 2

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

import 'dart:html' as html;

// ...

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

name我留下的参数'new tab'是指新选项卡的窗口名称，您可以从MDN 的文档中了解更多信息。

Answer 3

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

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

Answer 4

您可以使用 url_launcher 插件

然后在你的代码中

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 5

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

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 6

扩展@xuyanjun 的答案，当想要打开从颤振网络到新标签的外部链接时效果很好。但是，如果您想在 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的函数的功能，比如open来自flutter的函数，并且列表中的所有字符串都是传递给函数的参数，请参考this。

因此，如果您想打开新选项卡，则不需要传递秒参数，但如果您想在同一个选项卡中打开，则_self作为第二个参数传递。