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

前言：改个透明色也好意思发文章？难道是篇水文？😡 莫急，咱是个反标题党！
笔者当然知道给插件改个透明背景不值一提，毕竟Flutter目前的生态，轮子都经常得自己造，更别说改什么源码了。。。
但是通过这篇文章，你将会了解 如何魔改Flutter官方插件并自行维护，同时还能学到如何构建自己公司内部的插件库。

为何写这篇文章

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

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

需求背景

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

实现步骤

从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👍🏻

开始改代码

在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官方的插件管理方式来管理，会更加的合理？ 笔者认为这是必须要的，赶紧创建一个仓库，按照上面的方式，组建内部插件库之旅吧！

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