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,
          ),
        )
    );
  }
}

- akif

---

这个问题在这里有 示例。 - Mohammad Mirshahbazi

Answer 1

我遇到了完全相同的问题，花费了我很多精力才解决了它。即使是在你提出问题之后的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

现在在您的Web视图中，它需要包含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的初始地址不同，则将该请求启动到手机的默认浏览器中。

我希望这可能仍然对您有所帮助，或者它将帮助需要它的人从现在开始。

拥抱。

- Thiago Henrique

Answer 2

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

- vIvId_gOat

---

website.com是我的应用程序主页。那不是外部链接。我想要的是，当尝试打开除website.com之外的链接时，它会在浏览器中打开。 - akif

是的，您可以将“website.com”替换为您想在浏览器中打开的任何其他链接。 - vIvId_gOat

但是，我不知道应该在浏览器中打开哪个网站链接。 - akif

请明确您想在浏览器中打开的内容。 - vIvId_gOat

除了 Webview 中显示的站点之外的所有链接 - akif

Answer 3

如果您想在外部浏览器中打开链接，请尝试使用 url_launcher。

要打开浏览器，请粘贴您的URL并在单击时调用此函数。

您还可以检查您的URL是否包含您的网站，然后执行操作。

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

- Shirsh Shukla

---

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

请再次检查，我已经将你的网站链接加入到我的代码中了。 - Shirsh Shukla

他的意思是他网站中的外部链接，这段代码处理Flutter中的链接而不是Webview的主页站点。 - Akin Zeman

Answer 4

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

- Stefano Amorelli