AppBlog.CN全栈架构

Flutter使用state实现单选效果。

对于有可变状态控件的管理，官方文档是写了有3种模式：控件自己管理状态、交给父控件管理状态以及混合管理。more项目说明：两种方式实现一个容器盒子，点击的时候切换颜色和显示内容。我将把这两个盒子做到一个页面，虽然最终效果是一样的，但是实现方式不同。

定时刷新子控件，同时使用于StatelessWidget及StatefulWidget的子控件。可以创建一个周期性的Timer，并且Timer的tick是从1开始的。实现一个倒计时获取重新获取验证码的功能。

Flutter的Widget有Statful（有状态的）和Stateless（无状态的）。比如继承自StatefulWidget的有Checkbox、Radio、Slider、Form等，这些Widget用户都是可以做一些交互的，同样的继承自StatelessWidget的Widget有Text、Icon等。有状态和无状态的主要区别在于：有状态的Widget在其内部都有一个state用来标记是否发生了变化，然后调用setState()方法来更新自己。more。

底部弹框，无论点击阴影区域还是点击内容区域，默认都会导致当前对话框自动关闭。如果想在弹框中停留并进行一些操作，我们需要设置在点击。内容区域时不关闭弹框，而是手动点击触发关闭弹框。（2）内层组件照常包裹。

);});} ,);} }比起使用builder要麻烦一些，但是也更容易理解，不容易出错。

参考：https://stackoverflow.com/questions/51204179/how-to-change-the-background-color-of-bottomsheet-in-flutter。参考：https://stackoverflow.com/questions/52663445/flutter-show-bottomsheet-transparency。BottomSheet底部弹框的背景色与主题的画布底色一致，因此只需修改App主题的canvasColor即可。

参考：https://docs.flutter.io/flutter/package-platform_platform/Platform-class.html。参考：https://docs.flutter.io/flutter/dart-ui/Window-class.html。位于Dart Packages/flutter/src/material/constans.dart。

使用Flutter实现SearchBar搜索框效果。

WillPopScope 注册一个回调 onWillPop 用来自定义用户对路由的操作。（2）将事先创建好的子节点 _getBody() 嵌套在 WillPopScope 中。（1）自定义双击退出回调函数。

Overlay可以认为是一个UI上面的蒙版/浮空层，使用起来类似Stack，如何使用：通过Overlay.of获得OverlayState对象，调用OverlayState.insert添加OverlayEntry，当不需要的时候，通过OverlayEntry.remove移除OverlayEntry。OverlayState事实上是有一个Overlay的Widget，是一个StatefullWidget，它的createState方法获取的就是OverlayState对象。基本上就能满足我们的需求啦。

参考：https://stackoverflow.com/questions/50049683/flutter-gesturedetector-ontap-gets-triggered-automatically-how-to。

参考：https://stackoverflow.com/questions/44490622/disable-a-text-edit-field-in-flutter。以下设置在不可编辑的同时，也无法响应点击事件。

Flutter中的默认导航分成两种，一种是命名的路由，一种是构建路由。

原理：动态更新TabController状态。

参考：https://stackoverflow.com/questions/52023610/getting-horizontal-viewport-was-given-unbounded-height-with-tabbarview-in-flutter。Flutter中TabBarView高度默认充满全屏，the TabBarView doesn’t have a bounded height. 本文记录设置TabBarView高度的方法。

参考：https://github.com/LiuC520/flutter_bottom_tab_bar。

【代码】Flutter中显示Html内容。

（1）使用TipDialogContainer全局注册TipDialogController。（2）使用TipDialogConnector获取TipDialogController。参考：https://github.com/inRush/TipDialog。

more。

String url;//监听页面状态改变 flutterWebviewPlugin . onStateChanged . listen((WebViewStateChanged wvs) {});//监听页面滚动事件 flutterWebviewPlugin . onScrollYChanged . listen((double offsetY) {});});

borderRadius参数用于控制圆角的位置大小。需要定义Clipper参数才能使用，不然没有效果。可以剪裁任意形状，比如五角星、三角形。这里定义剪裁掉周边10像素的大小。可以用来剪裁圆形头像。

Flutter在State状态类里获取Page页面类中定义的变量，通过widget的get方法实现。

一个背景装饰对象，相当于Android中的shape.xml，定制各种各样的背景（边框、圆角、阴影、形状、渐变、背景图像）。这个比较简单就是加下划线，可以设置Insets值（控制下划高底，左右边距）（5）渐变（环形、扫描式、线性）（4）形状（圆形与矩形）

);} ,);} }i});} ,);} }index});} ,);} }index});} ,);} }item});} ,);} }item});} ,);} }

参考：https://stackoverflow.com/questions/50123354/how-to-get-current-tab-index-in-flutter。使用自定义的TabController。

参考：https://flutter.io/cookbook/gestures/handling-taps/Flutter提供的按钮控件有RaisedButton和FlatButton等。（2）在其中使用GestureDetector并复写onTap回调。带波纹效果的按钮使用InkWell。（1）创建自定义button类。

解决：中间嵌套一个Builder，用于"转换"出一个位于Scaffold后的context。原因：context层级使用错误，一般是直接使用页面级的context导致错误。

在ScrollView或ListView中嵌套GridView创建二维布局的元素，但是GridView自带滚动属性，使得页面无法随着ScrollView或Listview滚动，所以我们需要禁用GridView的滚动属性。

【代码】Flutter防止键盘弹出导致超出屏幕。

Flutter中FlatButton。

json.decode返回值为Map<String, dynamic>直到运行的时候才能知道具体的类型。（3）自动生成fromJson和toJson（model.g.dart）所以不能：类型检查，自动提示，编译时无法发现错误。（1）pubspec.yaml中添加依赖。（2）创建Model并添加注解。

参考：https://docs.flutter.io/flutter/cupertino/CupertinoButton-class.html。参考：https://github.com/flutter/flutter/issues/21926。实现，另正圆除了CircleAvatar实现，也可以使用BoxDecoration设置。ClipOval支持裁剪为椭圆及正圆。使用BoxDecoration设置。

【代码】Flutter Widget之Flow。

【代码】Flutter Widget之DataTable。

【代码】Flutter Widget之Material。

【代码】Flutter Widget之InkWell。

【代码】Flutter Widget之ListView。

【代码】Flutter Widget之GridView。

【代码】Flutter Widget之ExpansionPanelList。