flutter小技巧1-5 ｜ 第127期
有一些技术上的小技巧是比较集中的，不同于零散的开源项目，把这些小技巧集中起来对于总结和学习是比较好的，比如Flutter相关内容。在Github上发现了好几个 flutter tips 类型的开源项目，每个项目都总结了一些有意思的小技巧。但是若要人去逐个查看，并跟着了解和学习细节也是不容易的。
即使正在使用Flutter开发的朋友，可能也没有这样的动力。一是因为其中有些技巧操作起来有点麻烦，二是了解过的内容在一段时间不使用就容易忘记，三是对很多人来说仅仅想了解大概效果，并不是熟悉技术细节。
因此，我将自己学习和使用这些小技巧的过程和经历整理出来。首先对内容进行挑选，尽量收集能用、常用、好用的tips，然后是尽量注重展现运行效果，技术编码只说明关键节点，具体细节可以查看代码库。其中有错误或疏漏的地方，可以在评论区留言，或者私信讨论。
接下来的系列内容主要参考 bizz84/flutter-tips-and-tricks。感兴趣的朋友可以通过链接直接查看作者开源的github仓库。
01 多平台分栏视图
在开发宽屏的应用程序时，常用到分栏的布局。比如大家用到的很多桌面版程序就是这样，左边栏会放一些菜单相关的标签，右侧大部分区域用于标签对应的具体页面。 要实现这种分栏的思路是很容易的，但我们使用Flutter开发app时，要考虑的远不止于此。
在手机上一般是窄屏，在web和桌面上一般是宽屏，但宽屏app也可能被调整为窄屏，我们需要实现一种能在这所有情况和平台下都能正常运行的分栏视图。宽屏的处理如上所述，那么窄屏情况下又该如何处理呢？其实这也是有标准处理方式的，比如手机窄屏一般是通过抽屉菜单切换。 如下图所示就是抽屉菜单的入口
展开抽屉菜单之后，就可以看到如下图所示的菜单标签。当点击标签时就可以完成相应页面的切换，同时收起抽屉菜单页。
解决了窄屏下的抽屉菜单显示，接下来就是实现上述的宽屏情况下分栏视图的效果。下图展示了macOS桌面版应用程序在宽屏下的分栏。
对于很多桌面应用，我们都可以很容易地通过鼠标拖动的方式改变UI显示窗口的大小。比如下图就展示了将app从宽屏变成了窄屏。
可以发现，桌面版的窄屏与手机版的窄屏就都换成了抽屉菜单切换标签页。
与桌面版相同的处理也可以应用在web页面中，下图所示的就是chrome网页在宽屏和窄屏下分栏和抽屉的兼容切换效果。
到这里我们就实现了在移动端、桌面端和web端使用分栏视图的效果了。具体是怎么实现的呢？
根据以上逻辑，我们在实现时只要能够判断app窗口的宽度就可以决定宽窄屏的效果。下图展示了判断屏幕宽窄的核心代码。
如果你正在开发桌面版的应用程序，可以考虑使用这种方式来切换在宽窄屏情况下的布局效果。更多编码细节可以查看代码库 https://github.com/jielyu/flutter_demos/tree/master/t001_split_view
02 VSCode 上的 Fix All 功能
VSCode是一款优秀的Flutter开发利器，只需要安装“Flutter”和“Dart”这两个插件即可。对于原本不是专门开发安卓的朋友来说，VSCode是比Android Studio更好的选择。特别是之前其他的开发工作都使用VSCode的话，专门为了Flutter换编辑器也是比较难受。针对目前主流的编码开发工作，VSCode都是一款相当不错的IDE。这里我们单独说一说VSCode开发Flutter时的代码修复功能。
编写代码时，可能会出现手误或者没有遵守编码规范的情况。如果编辑工具不能自动修复，只能自己手动进行。这意味着程序员需要记忆很多规范，而且逐个手动修复往往也是不小的工作量。比如下图所示的Flutter中常常会有 const 误用或缺失的警告，尝试过手动逐个修正的朋友应该能够明白这种痛苦。
在安装 "Flutter" 插件之后，可以把鼠标放在警告或者错误提示的位置，会自动弹出对话框。从下图可以看出，对话框的信息说明错误原因，并给出自动修复的按钮。
如果只有一两个提示还可以手动点击按钮修复，但一个项目中可能会有几百上千类似的修复点，要是放在一起修复，得把人整崩溃了。VSCode提供了一种方式，可以在保存文件时自动修复所有可以修复的代码。可以通过下图所示的方式找到配置该功能的选项。
熟悉VSCode的朋友都知道，它是通过json文件来设置参数的。打开配置json文件之后，如下图所示添加保存时的代码动作，设置fixAll为true即可。
设置完成后，保存配置文件，就可以在自己的代码文件中测试效果了。比如可以故意去掉一些 const，然后使用 Command+S 或者 Ctrl+S保存代码文件试试看。我这里观察到的效果是在保存的一瞬间修复了文件中所有的错误和警告信息。
以后终于不用自己手动逐个修复了。每个Flutter的开发者都应该这样设置一下，提升开发效率的事情终归是不会错的。
03 官方提供的例子
学习flutter这种应用型框架的最好方法，不是直接读一通源码，也不是深究运行原理，而是找个例子跑一下，看看效果。很多开发者都不知道，原来flutter官方提供了一些例子，只需要使用如下 flutter create 指令就可以在本地创建工程。
flutter create --sample=material.FloatingActionButton.1 s01_floating_action
像这样的例子一共有五十来个，需要知道对应名称才能正确创建。可以通过github上的一个代码片段查看，链接地址如下：https://gist.github.com/nitishk72/aa5d31ddc9aabff94c3aae492ee947c0
这些例子程序涵盖了flutter一些组件的常用方法，部分的运行效果如下图所示
如果懒得自己去创建示例工程，也可以直接到我的github仓库下查看。
https://github.com/jielyu/flutter_demos/tree/master/t002_create_sample
04 利用Github Action做自动化测试
对于一个正式的产品而言，单元测试是不可缺少的。Flutter框架本身已经集成了单元测试的功能，代码存放在工程下的 test/ 目录下，使用 flutter test 就可以运行测试用例。
如果开发者只有一个人，直接在本地测试也是可以的。只是一个产品通常都是有多个开发者合作完成，而且几乎总是会遇到有人添加的代码有问题无法运行的情况。这时，在代码库上加一个自动化测试的流程就显得非常必要。
Github为我们提供了免费的container资源实现这种需求，就是Github Action。下图展示了一个flutter工程的自动化测试的配置说明。
具体配置自动化测试的工程，可以查看代码库：
https://github.com/jielyu/flutter_demos/blob/master/.github/workflows/action_test.yml
配置完成之后，每次向代码库推送修改时，都会触发自动化测试的流程。如果测试失败会发送邮件到对应负责人的邮箱中。
05 圆角容器的设置
默认情况下，Flutter中的容器形状是方角的矩形。但在很多苹果应用中的控件是圆角矩形的， 熟悉flutter的开发者很容易就能修改。只是在一段时间不使用之后，很容易忘了具体的使用方式， 往往还是需要借助搜索引擎查找解决方案。
这里简单记录一下实现的代码，以供需要使用时查找。
系列内容，未完待续