我该如何给Flutter webview添加透明背景？

为何写这篇文章

承接以上前言，我之所以写这篇文章，是因为我改的是Flutter官方的插件webview_flutter。Flutter官方的插件，全部是在一个gitHub仓库上维护的，各个库之间又相互关联。【见下图】

所以改功能其实是其次，如何在这庞大的Flutter插件库里面单独修改你所需的插件，并且自行维护起来，这才是重点！！！我觉得是很有必要分享给大家的。

需求背景

这次改动的原因是Flutter webview的背景永远是白色，而我们的主题又是黑色的。这样H5嵌入的时候，需要H5的同事去设置黑色背景，同时网页还没加载出来时还会出现白色背景，体验极差。 如果能把webview的背景设置为透明，H5不需要设置背景色，从可维护性和体验都会有所提高，因此需求应运而生。

实现步骤

1. 
   
2. 从github把plugin仓库clone下来，然后用Android studio单独打开webview文件夹，可以看到包含了三个Plugin。
   

2. 更改主插件依赖项

进入主插件webview目录，看到yaml依赖的还是pub上面的插件，所以我们改动其他目录下的源码，yaml根本就没有依赖到，是不会生效的。

flutter:

  plugin:

    platforms:

      android:

        default_package: webview_flutter_android

      ios:

        default_package: webview_flutter_wkwebview


dependencies:

  flutter:

    sdk: flutter

  webview_flutter_platform_interface: ^1.0.0

  webview_flutter_android: ^2.0.13

  webview_flutter_wkwebview: ^2.0.13

所以我要先把yaml的依赖改为相对路径，这样我们对代码的改动才会生效。改完flutter pub get，跟着源码走下去，都能进入本地的源文件，good👍🏻

3. 
   
4. 开始改代码
   

在webview的build方法中，可以看到通过WebView.platform.build传入构造的参数，然后判断平台返回对应视图。

/// webview_flutter/webview_flutter/lib/src/webview.dart

@override

  Widget build(BuildContext context) {

    return WebView.platform.build(

      context: context,

      onWebViewPlatformCreated: _onWebViewPlatformCreated,

      webViewPlatformCallbacksHandler: _platformCallbacksHandler,

      javascriptChannelRegistry: _javascriptChannelRegistry,

      gestureRecognizers: widget.gestureRecognizers,

      creationParams: _creationParamsfromWidget(widget),

    );

  }


  /// 根据设备类型返回对应的视图

  static WebViewPlatform get platform {

    if (_platform == null) {

      switch (defaultTargetPlatform) {

        case TargetPlatform.android:

          _platform = AndroidWebView();

          break;

        case TargetPlatform.iOS:

          _platform = CupertinoWebView();

          break;

        default:

          throw UnsupportedError(

              "Trying to use the default webview implementation for $defaultTargetPlatform but there isn't a default one");

      }

    }

    return _platform!;

  }


/// 设置参数，这里我加多了一个transparentBackground参数，是bool类型的

CreationParams _creationParamsfromWidget(WebView widget) {

  return CreationParams(

    initialUrl: widget.initialUrl,

    webSettings: _webSettingsFromWidget(widget),

    javascriptChannelNames: _extractChannelNames(widget.javascriptChannels),

    userAgent: widget.userAgent,

    autoMediaPlaybackPolicy: widget.initialMediaPlaybackPolicy,

    transparentBackground: widget.transparentBackground,

  );

}

以Android为例，来到webview_flutter_android的webview_android.dart中。可以看到通过AndroidView引入原生视图，通过标识 'plugins.flutter.io/webview' 进行匹配。

/// webview_flutter/webview_flutter_android/lib/webview_android.dart

return GestureDetector(

      onLongPress: () {},

      excludeFromSemantics: true,

      child: AndroidView(

        viewType: 'plugins.flutter.io/webview',

        onPlatformViewCreated: (int id) {

          if (onWebViewPlatformCreated == null) {

            return;

          }

          onWebViewPlatformCreated(MethodChannelWebViewPlatform(

            id,

            webViewPlatformCallbacksHandler,

            javascriptChannelRegistry,

          ));

        },

        gestureRecognizers: gestureRecognizers,

        layoutDirection: Directionality.maybeOf(context) ?? TextDirection.rtl,

        creationParams:

            MethodChannelWebViewPlatform.creationParamsToMap(creationParams),

        creationParamsCodec: const StandardMessageCodec(),

      ),

    );

之后进入android目录，找到对应的FlutterWebView文件，通过获取methodcCannel传入的params来判断是否需要启用透明背景，如果为true，则设置backgroundColor为透明。

Ps：这里可以看出，原生插件的编写很简单。只要通过methodChannel进行通信，Flutter层传入params，原生层获取参数后进行解析。注意数据传输都是转为字符串类型的，甚至很多时候都是用json字符串流转。
同时这里也返回了原生视图，通过PlatformView绑定标识，返回对应PlatformViewFactory的视图，标识同样也是字符串类型。
所以是非常傻瓜式的，Flutter只不过提供了一个通信桥梁来实现跨平台，原生代码还是得自己写，从这个角度来看，Flutter真的跨平台了吗？积极开源的社区对于Flutter而已，必要性何其重呢？值得我们深思！

ios端也一样，核心代码就是修改wkWebview的背景色为透明

/// webview_flutter/webview_flutter_wkwebview/ios/Classes/FlutterWebView.m

    NSNumber* transparentEnabled = args[@"transparentBackground"];

    NSLog(@"transparentBackground >>> %i", [transparentEnabled boolValue]);

    // 设置背景色为透明

    if([transparentEnabled boolValue]){

        NSLog(@"开始设置背景色");

        _webView.opaque = NO;

        _webView.backgroundColor = UIColor.clearColor;

    }

重点：如何引入到项目中使用并且独立维护

功能实现完，要考虑如何引入到我们的项目中使用。以往个人开发的插件一般都是通过git仓库引入，所以我创建新的GitHub仓库，把改好的webview目录整个上传上去。加入项目中flutter pub get后惊喜的发现，失败了！

原因是：根目录下没有yaml文件，对于Flutter来说是一个不合格的Plugin。 所以我们需要指定插件的根目录，通过path来指定到webview文件夹下。

 # webview组件

  webview_flutter:

    git:

      url: git://github.com/~~~/webview_flutter_enable_transparent.git

      ref: main

      path: webview_flutter # 指定路径

继续get，再次惊喜！！！
原因是：相对路径 ../XXXX 找不到对应的插件，这合理吗？
很合理，因为Flutter必须保证你的包是最小的，你既然指定了依赖的库，那我就只会下载对应的库，并不是整个git下载下来。所以我们用相对路径的时候，根本找不到根目录下其他的插件。
解决方法，webview的yaml文件中所依赖的插件也需要用git引入

dependencies:

  flutter:

    sdk: flutter

  webview_flutter_platform_interface:

    git:

      url: https://github.com/~~~/webview_flutter_enable_transparent.git

      ref: main

      path: webview_flutter_platform_interface

  webview_flutter_android:

    git:

      url: https://github.com/~~~/webview_flutter_enable_transparent.git

      ref: main

      path: webview_flutter_android

  webview_flutter_wkwebview:

    git:

      url: https://github.com/~~~/webview_flutter_enable_transparent.git

      ref: main

      path: webview_flutter_wkwebview

再次get，运行起来了，非常完美！👌🏻

WebView(

  initialUrl: "xxxxx",

  javascriptMode: JavascriptMode.unrestricted,

  transparentBackground: true,

)

写在最后

这次对于插件的更改，其实功能并不难。但是对于Flutter官方插件的更改，以及如果放到自己的git上进行维护，我认为这次确实让我学到了不少。
同理，自己公司的Plugin，是否用类似Flutter官方的插件管理方式来管理，会更加的合理？ 笔者认为这是必须要的，赶紧创建一个仓库，按照上面的方式，组建内部插件库之旅吧！

我们一起学习、进步！！！