1. flutter exception
闲鱼技术团队于 2018 年上半年率先引入了 Flutter 技术实现客户端开发，到目前为止成功改造并上线了复杂的商品详情和发布业务。随着 flutter 比重越来越多，我们开始大力治理 flutter 的 exception, 起初很长一段时间内闲鱼内 flutter 的 exception 率一直在千分之几左右。经过我们的整理和解决，解决了 90% 以上的 flutter exception。
我们对 exception 进行了归类，大头主要分为两大类, 这两大类堆栈数量很多, 占到整体 90% 左右：
1. 第一大类的堆栈都指向了 setstate
#0 State.setState (package:flutter/src/widgets/framework.dart:1141)
#1 _DetailCommentWidgetState.replyInput.<anonymous closure>.<anonymous closure> (package:fwn_idlefish/biz/item_detail/fx_detail_comment.dart:479)
#2 FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)
#3 NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)
#4 _rootRunUnary (dart:async/zone.dart:1132)
#5 _CustomZone.runUnary (dart:async/zone.dart:1029)
#6 _FutureListener.handleValue (dart:async/future_impl.dart:129)
2. 第二大类堆栈都与 buildContext 直接或者间接相关
#0 Navigator.of (package:flutter/src/widgets/navigator.dart:1270)
#1 Navigator.pop (package:flutter/src/widgets/navigator.dart:1166)
#2 UploadProgressDialog.hide (package:fwn_idlefish/biz/publish/upload_progress_dialog.dart:35)
#3 PublishSubmitReducer.doPost.<anonymous closure> (package:fwn_idlefish/biz/publish/reducers/publish_submit_reducer.dart:418)
<asynchronous suspension>
#4 FXMtopReq.sendReq.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/mtop_req.dart:32)
#5 NetService.requestWithModel.<anonymous closure> (package:fwn_idlefish/common_lib/network/src/net_service.dart:58)
#6 _rootRunUnary (dart:async/zone.dart:1132)
#7 _CustomZone.runUnary (dart:async/zone.dart:1029)
第一类明显与 element 和 sate 的生命周期有关。第二类与 buildContext 有关。
buildContext 是什么？
下面是一段 state 中获取 buildContext 的实现
Element get _currentElement => _registry[this];
BuildContext get currentContext => _currentElement;
很明显 buildContext 其实就是 element 实例。buildContext 是一个接口，element 是 buildContext 的具体实现。
所以上面的 exception 都指向了 flutter element 和 state 的生命周期
2.flutter 生命周期
1.state 生命周期
2. element 与 state 生命周期
element 是由 widget createElement 所创建。state 的生命周期状态由 element 调用触发。
最核心的是在 new elment 的时候 element 的 state 的双向绑定正式建立。在 umount 的时候 element 和 state 的双向绑定断开。
3. activity 生命周期与 state 关系
flutter 提供 WidgetsBindingObserver 给开发者来监听 AppLifecycleState。AppLifecycleState 有 4 中状态
1.resumed
界面可见，比如应用从后台到前台
2.inactive
页面退到后台或者弹出 dialog 等情况下
这种状态下接收不到很任何用户输入，但是还会有 drawframe 的回调
3.paused
应用挂起，比如退到后台。进入这种状态代表不在有任何 drawframe 的回调
4.suspending
ios 中没用，puased 之后进入的状态，进入这种状态代表不在有任何 drawframe 的回调
看下 android 生命周期和 appLifecycleState、state 关系
创建
2. 按 home 键退到后台
3. 从后台回到前台
4.back 键退出当前页面（route pop）
5.back 键退出应用
3. 常见的 exception 例子
1. 在工程开发中, 我们最容易忽略了 state 的 dispose 状态。
看一段例子：
这个例子可能会在某些情况下 excetion。在 state dispose 后，element 会和 state 断开相互引用，如果在这个时候开发者去拿 element 的位置信息或者调用 setstate 刷新布局时就会报异常。
最常见的是在一些 timer、animate、网络请求等异步逻辑后调用 setstate 导致的 excetion。安全的做法是在调用 setstate 前判断一下 state 是否是 mounted 状态。如下：
2.buildcontext 使用错误
看一段错误使用 buildcontext 例子
上面的错误在于在跨堆栈使用了 buildcontext。由于 outcontext 的生命周期与 buttomcontext 不一致，在弹出 bottomsheet 的时候 outcontext 可以已经处于 umount 或者 deactivite。上面例子正确的做法是使用 bottomcontext 获取 focusScopeNode。
我们在跨堆栈传递参数（如 bottomsheet、dialog、alert、processdialog 等）场景时特别要注意 buildcontext 的使用。
最后
不过瘾？如果你还想了解更多关于 flutter 开发更多有趣的实战经验，就来关注微信公众号 “ 闲鱼技术 ”。
参考
https://github.com/flutter/flutter
https://flutter.io/docs
本文作者：闲鱼技术 - 虚白阅读原文
本文为云栖社区原创内容，未经允许不得转载。