Flutter打开浏览器作为独立窗口（在应用程序弹出窗口中）

Question

如何使用OAuth（Google登录）打开弹出窗口并在登录完成后关闭窗口？

背景： 我想要在用户完成某个操作（支付）之前，以弹出窗口的形式打开一个新窗口，并在完成后关闭该窗口。

似乎像下面这样启动会占用整个屏幕：

launch("http://www.google.com", forceSafariVC: true, forceWebView: true)

我想要的是以下内容，而不是内联网页视图

编辑：看到了这个问题。现在正在寻找 Android 的解决方案。

- Srinivas

---

你找到解决方案了吗？@Srinivas - khong07

Answer 1

可以使用pub.dev上的webview_flutter软件包来完成。

在android方面，您需要升级您的build.gradle文件。

使用混合组合模式

这个模式目前已经默认启用了。但是如果之前的minSdkVersion低于19, 您应该确保在android/app/build.gradle中设置正确的minSdkVersion:

android {
defaultConfig {
    minSdkVersion 19
}}

请查看此链接以获得更好的理解。

以下是在小部件内使用构建方法的示例。

 @override
 Widget build(BuildContext context) {
     return WebView(
       initialUrl: 'Url that you would like to open',
     );
   }

- Shimron Alakkal

Answer 2

为什么不使用模态框？像这样：

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) => Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, child: WebView(
   initialUrl: 'https://flutter.dev',
 ););

- Paweł

Answer 3

我已经使用了url_launcher包，并配合以下辅助类一起使用。

import 'package:url_launcher/url_launcher.dart';

class UrlLauncherHelper {

  /// Tries to launch a [url] using a device app.
  /// Supports http, https, sms:, tel:, mailto: and more.
  static launchUrl(String url) async {
    if (await canLaunch(url)) {
      await launch(url);
    }
  }

}

它还支持各种其他链接。

- Bram

Answer 4

您可以使用webview_flutter。它将在应用程序内嵌入Web视图。它不会占据整个屏幕，而是只占用应用程序的一部分。您可以进行配置。它也支持iOS和Android。

使用方法非常简单，如下所示：

 import 'dart:io';

 import 'package:webview_flutter/webview_flutter.dart';

 class WebViewExample extends StatefulWidget {
   @override
   WebViewExampleState createState() => WebViewExampleState();
 }

 class WebViewExampleState extends State<WebViewExample> {
   @override
   void initState() {
     super.initState();
     // Enable virtual display.
     if (Platform.isAndroid) WebView.platform = AndroidWebView();
   }

   @override
   Widget build(BuildContext context) {
     return WebView(
       initialUrl: 'https://flutter.dev',
     );
   }
 }

- Tamzid Ahmed

---

想要类似OAuth弹出窗口而不是内联Web视图。 - Srinivas

Answer 5

完成此操作的最简单方法之一是使用 [google_sign_in][1]。插件将完成所有工作。无需担心 Web 视图。只需安装插件，然后创建一个 GoogleSignIn 对象即可。

final googleSignIn = GoogleSignIn();

然后调用 signIn 方法

googleSignIn.signIn();

您可以在文档中找到所有所需的设置 [1]: https://pub.dev/packages/google_sign_in

- Pierre Monier

---

这个问题并不是在询问如何实现Google登录，而是在询问如何以弹出窗口的形式打开WebView。 - Moaz El-sawaf

Answer 6

如果您想打开一个用于支付的网页，请尝试以下方法。使用Flutter WebView，有一种选项可以知道页面URL何时更改。因此，在付款后，使用户重定向到特定的URL，并从应用程序中侦听此URL并执行必要的操作。

WebView(
initialUrl: firstUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
  _controller.complete(webViewController);
},
navigationDelegate: (NavigationRequest request) {
  if(request.url.startsWith(redirectedUrl)) {

    //Write other codes here

    //Prevent that url in webview and remove webview or navigate to other page
    return NavigationDecision.prevent;
  }
  //Any other url to show in webview
  return NavigationDecision.navigate;
},
)

如果仅是为了其他功能，请通过将barrierDismissible设置为false创建普通的警报对话框，一旦用户完成任务，您可以使用Navigator.pop()关闭弹出窗口

- Kaushik Chandru

---

他并不是在询问如何打开特定的URL，问题是关于如何将WebView显示为弹出窗口。 - Moaz El-sawaf