Flutter 初体验：WebRTC DataChannel P2P Chat

去年年底了解了 Flutter 后，我就一直希望能够体验一把。半个月前，我想到可以把 WebRTC 的 DataChannel 带到 Flutter 的世界里，在 pub 上搜索 webrtc 无果后，我知道，机会来了。

说干就干，安卓的 WebRTC demo 以及 DataChannel 使用我都已经比较熟悉了（https://blog.piasy.com/2017/08/30/WebRTC-P2P-part1/），但 iOS 的 WebRTC demo 我还一直没有碰过，为此我需要把 iOS 的 demo 摘出来，并熟悉它的工作流程，所以也就有了「WebRTC-Native 源码导读（六）：iOS P2P 连接过程和 DataChannel 使用」（https://blog.piasy.com/2018/04/05/WebRTC-iOS-DataChannel/）。

最后就是 Flutter plugin 的开发、demo 功能的开发了。plugin 开发主要还是平台相关代码的编写，熟悉了两端 WebRTC demo 的工作流程之后，做起来还是比较轻松的，demo 开发就完全进入 Flutter 的领地了，在这里我碰到了不少刺头，最大的就是「.9 图」（nine patch）的显示问题。

nine patch 显示

比如我们要给聊天消息增加气泡背景，那可以用 包一层 ，并给 设置图片 ，当然，为了能有左右分列的效果，我们在外面再包一层 ，最终代码如下：

如何设置，一开始完全是一头雾水，琢磨了一整晚上我才弄明白，原来它是 nine patch 横纵可拉伸区域的范围，比如下面这张图里，气泡所指的中间区域：

虽然这个区域在文件格式里肯定有记录，但 Flutter 并未实现其读取逻辑，因为目前还没有相关规范。从 Android Studio 的编辑器里，我们可以看到这个区域的左上角是 ，宽为 12，高为 8，所以 centerSlice 的取值就是 。

看起来很简单对不对？一开始如果有人这么告诉我，那也确实很简单……

此外，看到截图里左边和上边的黑色标记了吗？其实它们就是表明可拉伸区域的，安卓原生显示 nine patch 时，会自动忽略这一个像素的边框，但 Flutter 不会，所以如果我们使用的 nine patch 包含这些黑色标记，那就会被显示出来，所以还得在 Android Studio 编辑器里把这两个黑条给去掉：拖到它们宽度为 0 即可。

最后，我一开始是用设计师给的 2x 图，安卓原生放在 xhdpi 里显示正常，但在 Flutter 里就必须把上面的尺寸都乘 2，而这会让所有的元素都显得特别大，所以只能使用 1x 的图片了，不过这会让图像显示略有瑕疵。

虽然 Flutter 支持添加多种尺寸的图片，但一旦我加了 2x 的图后，Flutter 渲染时就会抛出异常：centerSlice was used with a BoxFit that does not guarantee that the image is fully visible. 正如报错信息所言，要么是我用得不对，要么是 Flutter 的 bug，interesting…

啰嗦这么多，主要是为了凑够 300 字数，够了够了 :)

欢迎大家去 GitHub star 支持！