如何让 ChromeSafariBrowser 在 Flutter Web 上启动

Question

概述：我在 pubspec.yaml 中包含 flutter_inappwebview: 4.0.0+4 并导入 'package:flutter_inappwebview/flutter_inappwebview.dart'；在 main.dart 中。当我按下浏览器时，什么也没有发生，检查也没有发现错误。但是终端抛出错误，平台不受支持。假设浏览器从网络加载颤动页面。我是否缺少参数。我需要启动一个 html 来运行 javascript 来读取二维码。

得到以下错误：

Error: Unsupported operation: Platform._operatingSystem at Object.throw_ [as throw] (localhost:55661/dart_sdk.js:4334:11) at Function._operatingSystem (localhost:55661/dart_sdk.js:55065:17) at Function.get operatingSystem [as operatingSystem] (localhost:55661/dart_sdk.js:55111:27) 

源代码

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  //await Permission.camera.request();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  MyChromeSafariBrowser browser =
      new MyChromeSafariBrowser(new MyInAppBrowser());

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: RaisedButton(
                onPressed: () async {
                  debugPrint('browser pressed');
                  await widget.browser.open(
                      url: "https://flutter.dev/",
                      options: ChromeSafariBrowserClassOptions(
                          android: AndroidChromeCustomTabsOptions(
                              addDefaultShareMenuItem: false,
                              packageName: "com.android.chrome"),
                          ios: IOSSafariOptions(barCollapsingEnabled: true)));
                },
                child: Text("Browser"))));
  }
}

class MyInAppBrowser extends InAppBrowser {
  @override
  Future onLoadStart(String url) async {
    print("\n\nStarted $url\n\n");
  }

  @override
  Future onLoadStop(String url) async {
    print("\n\nStopped $url\n\n");
  }

  @override
  void onLoadError(String url, int code, String message) {
    print("\n\nCan't load $url.. Error: $message\n\n");
  }

  @override
  void onExit() {
    print("\n\nBrowser closed!\n\n");
  }
}

class MyChromeSafariBrowser extends ChromeSafariBrowser {
  MyChromeSafariBrowser(browserFallback) : super(bFallback: browserFallback);

  @override
  void onOpened() {
    print("ChromeSafari browser opened");
  }

  @override
  void onLoaded() {
    print("ChromeSafari browser loaded");
  }

  @override
  void onClosed() {
    print("ChromeSafari browser closed");
  }
}

Answer 1

flutter_inappwebview 不支持 Flutter web（查看支持的平台here）。

要在 Flutter web 中运行 javascript，您必须使用 JS interop 之类的东西或创建一个支持 web 的插件（我认为这在引擎盖下使用了 JS 互操作，但这是推荐的方式，因此您不要混用带有 Flutter 应用的原生代码）。