flutter 与H5交互

在Flutter中与H5交互，通常使用webview_flutter插件。以下是一个简单的例子，展示如何在Flutter中创建一个WebView并与其中的H5页面进行交互。

首先，在pubspec.yaml中添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^0.3.10+1

然后，在你的Flutter代码中创建WebView并加载H5页面：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewPage(),
    );
  }
}
 
class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}
 
class _WebViewPageState extends State<WebViewPage> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),
    );
  }
}

要与H5交互，比如执行JavaScript代码，可以使用WebViewController：

// 假设_controller已经完成
_controller.future.then((controller) {
  controller.evaluateJavascript('yourJavaScriptFunction();');
});

确保你的H5页面中有相应的yourJavaScriptFunction函数，否则JavaScript代码将不会执行。

这只是一个基本的示例。webview_flutter插件还提供了更多高级功能，如：JavaScript和Dart之间的通信、监听页面加载事件、处理页面导航等。