Flutter学(cai)习(keng)之路(Exploring Flutter in action)

---

创世宣言

• 尽情踩坑吧 ⤵️

主要Cover到的点

• [x] 路由界面
• [x] 状态传递
• [x] 子Widget树获取父级StatefulWidget的State对象
• [x] 基础控件
• [x] 随机字符串
• [x] 文本控件，字体样式(Text/TextStyle/Text.rich/TextSpan)
• [x] 按钮系列(RaisedButton/FlatButton/OutlineButton/IconButton/FlatButton.icon/shape)
• [x] 图片系列(ImageProvider/Image/Image.asset/Image.network)
• [x] 单选开关和复选框Switch/Checkbox
• [x] 输入框和表单(TextField/Form/TextFormField/FormState)
• [x] 登录表单(TextField/Form/TextFormField/FormState)
• [x] 各种样式的进度条(LinearProgressIndicator/CircularProgressIndicator)
• [x] 布局控件
• [x] 线性布局(Row/Column)
• [x] 弹性布局(Flex/Expanded/Spacer)
• [x] 流式布局(Wrap/Flow)
• [x] 层叠布局(Stack/Positioned)
• [x] 对齐与相对定位(Align/Alignment/FractionalOffset/Center)
• [x] 容器控件
• [x] 填充(Padding/EdgeInsets)
• [x] 尺寸限制(ConstrainedBox/BoxConstraints/SizedBox/UnconstrainedBox)
• [x] 装饰(DecoratedBox)
• [x] 变换(Transform/Matrix4(作用于绘制阶段)/RotatedBox(作用于布局阶段))
• [x] 容器(Container(多种装饰和填充等组件的组合)/Padding/Margin)
• [x] 裁减(Clip/CustomClipper(裁减动作的作用时期与Transform相同，都作用于绘制阶段))
• [x] 通用类导航主界面(Scaffold/AppBar/TabBar/TabBarView/Drawer/FloatingActionButton)
• [x] 列表控件
• [x] 单child滚动控件(SingleChildScrollView/Scrollbar)
• [x] 有限列表项情况下使用ListView(ListView)
• [x] 众多列表项情况下使用ListView(ListView.builder)
• [x] 带分割线的列表项情况下使用ListView(ListView.separated)
• [x] 下拉刷新 和 上拉加载更多(初始化加载数据、结束时的标记、根据index判断底部是绘制结束的Widget还是正在加载时的Widget、Widget的正常显示)
• [x] 有限GridView(GridView + SliverGridDelegateWithFixedCrossAxisCount)
• [x] 有限GridView.count(效果完全等价于GridView + SliverGridDelegateWithFixedCrossAxisCount)
• [x] 有限GridView(GridView + SliverGridDelegateWithMaxCrossAxisExtent)
• [x] 有限GridView.extent(效果完全等价于GridView + SliverGridDelegateWithMaxCrossAxisExtent)
• [x] 无限GridView加载(GridView.builder)
• [x] 滚动监听(ScrollController/ScrollPosition)
• [x] 触摸反馈
• [x] 事件处理
  • [x] 原始指针(触摸事件)(撸一个触摸板)(Listener)
• [x] 事件冒泡
  • [x] 不同事件冒泡行为之比较(HitTestBehavior.deferToChild/HitTestBehavior.opaque/HitTestBehavior.translucent/IgnorePointer)

• [x] 手势识别
  • [x] 点击/双击/长按/拖动/滑动(GestureDetector)
  • [x] 缩放(GestureDetector)
  • [x] GestureRecognizer(当所修饰的对象不为widget且具有recognizer节点时可用)
• [x] 事件总线
• [x] 简易EventBus(Dart实现)
• [x] EventBus界面演示
• [x] 通知
• [x] 通知事件名称(NotificationListener.onNotification)
• [x] 自定义通知(覆写Notification + NotificationListener)
• [x] 通知冒泡(onNotification回调中的return value)
• [x] 存储路径访问和文件操作
• [x] 存储路径访问(访问缓存/访问包路径/访问SD卡)(PathProvider)
• [x] 网络编程
• [x] HttpClient
• [x] Dio(本质是基于HttpClient封装的上层API)
  • 更多Dio版本信息及API(官方地址)

• [x] 功能控件及数据状态管理(InheritedWidget)
• [x] 导航返回键和实体返回键拦截(再按一次确认退出)(WillPopScope)
• [x] 控件跨级传递数据(InheritedWidget/dependOnInheritedWidgetOfExactType/getElementForInheritedWidgetOfExactType/updateShouldNotify/didChangeDependencies)
• [x] 跨控件状态管理(手动实现Provider)
  • 第三方Provider实现
• [x] 异步更新UI(FutureBuilder/StreamBuilder)
• [x] 应用主题切换(Theme/ThemeData(内部通过InheritedWidget实现))
• [x] 单个界面主题切换
• [x] 全局界面主题切换
• [x] 与原生互调和相互集成(MethodChannel.invokeMethod)
• [x] Flutter调用Android Native方法
• [x] Flutter界面跳转至Android Native界面
• [x] WebView Flutter(webview_flutter)
• [x] 开发者通用设置(MaterialApp)
• [x] 是否显示界面布局网格(debugShowMaterialGrid)
• [x] 是否打开性能监控，覆盖在屏幕最上面(showPerformanceOverlay)
• [x] 是否打开栅格缓存图像的检查板(checkerboardRasterCacheImages)
• [x] 是否打开显示到屏幕外位图的图层的检查面板(checkerboardOffscreenLayers)
• [x] 是否打开覆盖图，显示框架报告的可访问性信息，显示边框(showSemanticsDebugger)
• [x] 是否显示右上角的Debug标签(debugShowCheckedModeBanner)
• [x] 切换操作系统平台(Android/iOS)
• [x] 切换为Android应用: debugDefaultTargetPlatformOverride = TargetPlatform.android
• [x] 切换为iOS应用: debugDefaultTargetPlatformOverride = TargetPlatform.iOS
• [ ] 动画
• [ ] 自定义控件
• [ ] 国际化

---

正片(Action)

• 内含大量gif图，loading可能会比较耗时，依自身网速而定

|

|

|

|

| | :---: | :---: | :---: | :---: | |

|

|

|

| |

|

|

|

| |

|

|

|

| |

|

|

|

| |

|

|

|

| |

|

|

|

| |

|

|

|

|

---

整套效果的App下载链接

for Android

| OS平台应用包 | QRCode | | :---: | :---: | | Android APK包下载(内测密码:123456) |

---

Github项目地址​github.com