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

aki*_*kif 8 webview flutter

我有一个使用 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,
          ),
        )
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

小智 21

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

\n

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

\n

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

\n
dependencies:\n  flutter:\n    sdk: flutter\n  \n  webview_flutter: ^1.0.5\n  url_launcher: ^5.7.10\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n

见下文...

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

不要\xc2\xb4t忘记你需要添加URL LAUNCHER依赖。

\n
import 'package:url_launcher/url_launcher.dart';\n
Run Code Online (Sandbox Code Playgroud)\n

解释:

\n

此代码使 Web 视图中发出的每个请求都通过以下测试:

\n
    \n
  • 如果请求地址以您的 webview 的起始地址开头,它通常会在 webview 内执行。
  • \n
  • 如果请求地址与您的网络视图的初始地址不同,它会向手机的默认浏览器启动该请求。
  • \n
\n

我希望它仍然可以帮助您,或者从现在开始可以帮助需要它的人。

\n

拥抱。

\n