Flutter开发中遇到的问题-1

Flutter跨平台案例总结

案例一：

描述：在initState()中显示对话框或请求数据响应过快重新构建布局时报错:

 

1、分析：界面正在绘制中，又重新绘制。

2、处理：界面首次绘制完成处理业务。

3、总结

利用Flutter生命周期解决此问题。

案例二：

描述：IOS进入扫描二维码页面，相机授权弹窗使页面跳转切换卡住。

1、分析：申请权限时，页面还没有跳转完成。

2、处理：

1）项目使用qr_code_scanner: 0.0.13 库作为二维码扫描解决方案。

2）查看IOS源码

　　通过上图，我们知道了这个申请权限动作是在Flutter调用原生设置界面尺寸时触发的。这样的话，在Flutter层必然会有下面这样的代码：

 　　_channel.invokeMethod('setDimensions', {'width': xx, 'height': xx})；

3）查看Flutter层库文件，找到相关代码如下图。

4）找到ScanWidgetController创建处。

 　　通过上图，我们知道了在构建二维码扫描View时，会调取IOS原生的'setDimensions()'方法，最终导致触发申请权限。

5）避免跳转界面过程中申请权限，采用延时申请权限处理，修改后代码如下：

3、总结

　　走读源代码分析问题。

案例三：页面跳转后，上个页面打开的键盘未关闭。

描述：意见反馈-输入意见（显示键盘）-选择图片-跳转相机-键盘未收起:

1、分析：跳转页面时系统没有自动收起键盘。

2、处理：在生命周期paused中关闭键盘。

3、总结

　　利用Flutter生命周期解决此问题。

　　顺便优化App用户体验，点击页面空白处自动关闭键盘：

案例四：Android手机App切换后台-最近任务中不显示title

描述：将运行中的App切换后台后。

1、分析：

　　是不是什么配置没有设置？

原生配置：

* 检查 AndroidManifest.xml文件，发现已配置，初步排除原生配置问题。

* 手机跑 flutter_demo。发现后台任务中会显示title，进一步排除原生配置问题。

Flutter配置：

* Flutter配置会在MaterialApp中完成，对比flutter_demo和本项目代码如下图所示：

通过flutter_demo和本项目代码对比大致发现问题原因，没有配置title字段，下面开始验证：

通过增加后title字段后，后台任务中出现title。

可是还没有完，我们项目需要做国际化：

　　配置国际化后报错了，又遇到了一个问题：

　　通过异常可以看出：S.of(context) ==null，怎么会为null呢，context又不为null。

　　查看S.of(context)源码：

 

　　通过S.of(context)源码发现确实S.of(context)有可能为null，由于MaterialApp属于祖先，需要MaterialApp的孩子构建之后S.of(context)才不为null。

　　通过上面分析得出：MaterialApp的配置不能使用S.of(context)做国际化。

那麽怎么办呢？又必须配置title且做国际化。

　　查看MaterialApp源码

 

 　通过源码查看，我们找到了title国际化的解决方案，修改后的代码如下：

 　　运行后，解决配置title国际化问题。

3、总结

　　这个问题其实Flutter开发者在注释中就告诉我们了，见下图。这也告诉我们在使用Api时尽量多关注下源码，了解Api的真实含义后，可以提前避免程序出现潜在的问题，花费大量的时间进行Debug。