Flutter Webview - 在浏览器或窗口中打开外部链接

Question

我有一个使用 Flutter Webview 制作的 Android 应用。当用户单击外部链接时，我希望该链接在浏览器中打开。我该怎么做？

事实上，像 Instagram 那样在窗口中打开外部链接会很好。有没有办法做到这一点？

编辑：

website.com 是我应用的主页。那不是外部链接。我想要的是当尝试打开除 website.com 以外的链接时，它会在浏览器或窗口中打开。

首页：

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

class Forum extends StatefulWidget {
  @override
  _ForumState createState() => _ForumState();

}

class _ForumState extends State<Forum> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Forum',
        home: Scaffold(
          body: WebView(initialUrl: "https://website.com",
            javascriptMode: JavascriptMode.unrestricted,
          ),
        )
    );
  }
}

Answer 1

我遇到了完全相同的问题，我花了很多钱来解决它。 Akif，即使在您提出问题 5 个月后，我也会发布解决方案，因为我相信它仍然会帮助很多人。

下面的解决方案是使用 STANDART FLUTTER WEBVIEW 并同时使用 URL LAUNCHER。

将url_launcher 和webview_flutter 添加到您的文件pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  
  webview_flutter: ^1.0.5
  url_launcher: ^5.7.10

现在在您的网络视图中，它需要包含 navigationDelegate

见下文...

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Title Your App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            body: Container(
          child: WebView(
            initialUrl: 'https://website.com',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            navigationDelegate: (NavigationRequest request) {
              if (request.url.startsWith("https://website.com")) {
                return NavigationDecision.navigate;
              } else {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              }
            },
          ),
        )));
  }

  _launchURL(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

别忘了你需要添加 URL LAUNCHER 依赖。

import 'package:url_launcher/url_launcher.dart';

解释：

此代码会导致在 webview 中发出的每个请求都通过以下测试：

• 如果请求地址以您的 webview 的起始地址开头，它通常会在 webview 中执行。
• 如果请求地址与您的 webview 的初始地址不同，它会将该请求发送到手机的默认浏览器。

我希望它可能仍然会帮助你，或者从现在开始它会帮助需要它的人。

拥抱。

Answer 2

如果你想在外部浏览器中打开链接，那么试试这个url_launcher

对于打开的浏览器，粘贴您的网址并在点击时调用它，

您也可以检查您的网址是否包含您的网站。之后您可以执行操作，

    onPressed: () {
            var myUrl="https://website.com";
            if(myUrl.contains("website.com")){
              //place your website code
              print("its my website ");
            }else{
              _launchURL(myUrl);
            }
          }



  _launchURL(String myUrl) async {
    if (await canLaunch(myUrl))
    {
      await launch(myUrl);
    } else {
      throw 'Could not launch $myUrl';
    }
  }

Answer 3

您可以使用 flutter_custom_tabs 插件在原生浏览器应用程序（Android 版 Google 和 iOS 版 Safari）中打开该链接。

要安装它，您需要在您的pubspec.yaml 中的dependencies: 下方添加以下行：

flutter_custom_tabs: "^0.6.0"

并使用如下函数：

void _launchURL(BuildContext context, String url) async {
    try {
      await launch(
        url,
          extraCustomTabs: <String>[
            'org.mozilla.firefox',
            'com.microsoft.emmx',
          ],        
        ),
      );
    } catch (e) {
      debugPrint(e.toString());
    }
}

Answer 4

您可以使用url_launcher 插件来完成这项工作

为此，您需要在 pubspec.yaml 中添加插件

所以在 dependencies 下的 pubspec,yaml 文件中添加 url_launcher: ^5.7.10

这是一个启动网站的示例

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:website.com';
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}