如何使ChromeSafariBrowser在Flutter Web上启动

问题描述

概述：我在pubspec.yaml中包括flutter_inappwebview：4.0.0 + 4并导入“ package：flutter_inappwebview / flutter_inappwebview.dart”；在main.dart中。当我按浏览器时，什么也没有发生，检查也没有发现错误。但是终端不支持平台抛出错误。浏览器应该从Web加载颤动页面。我是否缺少参数。我需要启动HTML来运行JavaScript才能读取QR码。

出现以下错误：

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

解决方法

flutter_inappwebview不支持Flutter Web（请查看受支持的平台here）。

要在Flutter网站上运行JavaScript，您必须使用类似JS interop的东西或创建一个支持网站的插件（我认为这是在幕后使用JS interop，但这是推荐的方式，这样您就不必不能将本机代码与Flutter应用混合使用。