Flutter开发中的一些Tips（二）

问题描述:我会在每个接口请求之前弹出一个Dialog 做loading提示，当接口请求成功或失败时关闭。但是，如果我们点击返回键人工关闭请求，当请求成功或失败时，因为我们调用它Navigator.pop(context) 我们错误地关闭了当前的页面。

那么解决问题的突破口就是什么时候知道Dialog关闭可以使用 WillPopScope 同时记录返回键的输入Dialog的关闭。

bool _isShowDialog = false;

void closeDialog() { if (mounted && _isShowDialog){ _isShowDialog = false; Navigator.pop(context); } }

void showDialog() { /// 避免重复弹出 if (mounted && !_isShowDialog){ isShowDialog = true; showDialog( context: context, barrierDismissible: false, builder:() { return WillPopScope( onWillPop: () async { // 拦截返回键，证明dialog被手动关闭 _isShowDialog = false; return Future.value(true); }, child: ProgressDialog(hintText: “正在加载…”), ); } ); } }

详细代码见：[点击查看]()

addPostFrameCallback回调方法在Widget渲染完成时触发，所以我们通常在获取页面Widget使用大小和位置。

第二点，我说我会在接口请求前弹出loading。如果我把请求方法放在一边，initState异常方法如下：

inheritFromWidgetOfExactType(_InheritedTheme) or inheritFromElement() was called before initState() completed. When an inherited widget changes, for example if the value of Theme.of() changes, its dependent widgets are rebuilt. If the dependent widget’s reference to the inherited widget is in a constructor or an initState() method, then the rebuilt dependent widget will not reflect the changes in the inherited widget. Typically references to inherited widgets should occur in widget build() methods. Alternatively, initialization based on inherited widgets can be placed in the didChangeDependencies method, which is called after initState and whenever the dependencies change thereafter.

原因：弹出一个DIalog的showDialog方法会调用Theme.of(context, shadowThemeOnly: true)，这种方法将通过inheritFromWidgetOfExactType跨组件获取Theme对象。

[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-0l92425P-1651125955287)(https://user-gold-cdn.xitu.io/2019/ 《Android学习笔记总结 最新移动架构视频 大厂安卓面试真题 项目实战源码讲义免费开源 徽信搜索微信官方账号【编程高级路】 7/11/16bdea7aac8f472a?imageView2/0/w/1280/h/960/ignore-error/1)]

inheritFromWidgetOfExactType方法调用inheritFromElement：

[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-KHFsE9Kr-1651125955288)(https://user-gold-cdn.xitu.io/2019/7/11/16bdea7aac93bfa9?imageView2/0/w/1280/h/960/ignore-error/1)]

但是在_StateLifecycle为created 和 defunct 不能跨组件获取数据，即initState()时和dispose()之后。所以错误的信息提示我们 didChangeDependencies 调用。

然而放在didChangeDependencies后来，新的异常：

setState() or markNeedsBuild() called during build. This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.

提示页面在build时不能调用setState() 或 markNeedsBuild()方法。所以我们需要build只有完成后，才能创建这个新组件(这里是Dialog）。

所以解决方就是使用addPostFrameCallback回调方法，等待页面build完成后在请求数据：

@override void initState() { WidgetsBinding.instance.addPostFrameCallback((_){ /// 接口请求 }); }

导致这类问题的场景很多，但是大体解决思路就是上述的办法。

本问题详细的代码见：[点击查看](()

不多哔哔，直接看图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMFadCUV-1651125955289)(https://user-gold-cdn.xitu.io/2019/7/11/16bdea7aaca2db4b?imageslim)]

MediaQuery.of(context).viewInsets.bottom > 0

viewInsets.bottom就是键盘的顶部距离底部的高度，也就是弹起的键盘高度。如果你想实时过去键盘的弹出状态，配合使用didChangeMetrics。完整如下：

import ‘package:flutter/material.dart’;

typedef KeyboardShowCallback = void Function(bool isKeyboardShowing);

class KeyboardDetector extends StatefulWidget {

KeyboardShowCallback keyboardShowCallback;

Widget content;

KeyboardDetector({this.keyboardShowCallback, @required this.content});

@override _KeyboardDetectorState createState() => _KeyboardDetectorState(); }

class _KeyboardDetectorState extends State with WidgetsBindingObserver { @override void initState() { WidgetsBinding.instance.addObserver(this); super.initState(); }

@override void didChangeMetrics() { super.didChangeMetrics(); WidgetsBinding.instance.addPostFrameCallback((_) { print(MediaQuery.of(context).viewInsets.bottom); setState(() { widget.keyboardShowCallback ?.call(MediaQuery.of(context).viewInsets.bottom > 0); }); }); }

@override void dispose() { WidgetsBinding.instance.removeObserver(this); super.dispose(); }

@override Widget build(BuildContext context) { return widget.content; } }

代码来自项目GSYFlutterDemo：https://github.com/CarGuo/GSYFlutterDemo

nce.removeObserver(this); super.dispose(); }

@override Widget build(BuildContext context) { return widget.content; } }

代码来自项目GSYFlutterDemo：https://github.com/CarGuo/GSYFlutterDemo