在 Flutter 上加載 H5 頁面，一般都會使用 webview_flutter 組件，其地址為：https://pub.flutter-io.cn/packages/webview_flutter。按照官網(wǎng)配置使用很簡單，但如果僅僅只是做基本的配置，在實際過程中你會發(fā)現(xiàn)有很多功能都不滿足。

1. 在 Android 中不能響應(yīng) HTML 的文件選擇標簽

如果你做過原生 Android 開發(fā)，在 Android 平臺的 WebView 中，默認 WebView 同樣是不支持 input file 類型標簽的，需要自己根據(jù) WebView 提供的回調(diào)函數(shù)來實現(xiàn)對應(yīng)的功能。相比 iOS 就簡單了，iOS 的 WebView 默認就實現(xiàn)了這些功能，做 Android 開發(fā)的同學(xué)都會投來羨慕的眼神，為了讓 WebView 支持這些功能，Android 開發(fā)同學(xué)需要自己實現(xiàn)拍照、從相冊、從文件里選取圖片，然后回傳給 WebView ，這樣 H5 里的文件選擇標簽才能生效。
很遺憾，在 Flutter Android 平臺里，這些同樣是不支持的。要在 Android 平臺實現(xiàn)這些功能，一般需要引入 webview_flutter_android 組件，其地址為：https://pub.flutter-io.cn/packages/webview_flutter_android。

在 WebView 對應(yīng)的 Stage 類中：

  // WebView 對應(yīng)的 controller，這里省去其他若干代碼
  final WebViewController controller = WebViewController();

  @override
  void initState() {
    super.initState();    
    //判斷是 Android 平臺的 WebView
    if (WebViewPlatform.instance is AndroidWebViewPlatform) {
      final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;      
      //處理文件選擇，只有 AndroidWebViewController 才暴露出 setOnShowFileSelector 方法，這里才能監(jiān)聽文件選擇
      androidController.setOnShowFileSelector(_androidFilePicker);
    }
    //WebView 加載H5地址
    controller.loadRequest(Uri.parse(widget.url));
  } 

AndroidWebViewController.setOnShowFileSelector 的方法定義如下：

  /// Sets the callback that is invoked when the client should show a file
  /// selector.
  Future<void> setOnShowFileSelector(
    Future<List<String>> Function(FileSelectorParams params)?
        onShowFileSelector,
  )

點擊 H5 的文件選擇按鈕時，會觸發(fā)上述回調(diào)，需要自己在該回調(diào)函數(shù)里處理文件選擇、拍照、相冊選文件等邏輯處理，處理成功返回一個 Uri 數(shù)組，如果失敗則返回一個空數(shù)組即可。

Future<List<String>> _androidFilePicker(FileSelectorParams params) async {
    _imagePicker ??= ImagePicker();
    //手機上有權(quán)限限制，一般我們只支持圖片文件選擇
    if (params.acceptTypes.any((type) => type == 'image/*')) {
      //這里可以顯示 拍照、相冊 選擇彈窗，圖片選擇完成后，返回圖片的 uri 地址
      ......
    }  
    return [];
  }

2. 在 Android 中設(shè)置字體大小

設(shè)置字體大小同樣需要采用 webview_flutter_android 組件，一般如下設(shè)置：

   if (WebViewPlatform.instance is AndroidWebViewPlatform) {
      final AndroidWebViewController androidController = controller.platform as AndroidWebViewController;
      //textZoom 默認值是 100
      androidController.setTextZoom(250);
    }