从头至尾撸一遍Flutter的一切...

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

---

创世宣言

• 尽情踩坑吧 ⤵️

主要Cover到的点

• 路由界面
• 状态传递
  • 子Widget树获取父级StatefulWidget的State对象
• 基础控件
  • 随机字符串
  • 文本控件，字体样式(Text/TextStyle/Text.rich/TextSpan)
  • 按钮系列(RaisedButton/FlatButton/OutlineButton/IconButton/FlatButton.icon/shape)
  • 图片系列(ImageProvider/Image/Image.asset/Image.network)
  • 单选开关和复选框Switch/Checkbox
  • 输入框和表单(TextField/Form/TextFormField/FormState)
  • 登陆表单(TextField/Form/TextFormField/FormState)
  • 各类样式的进度条(LinearProgressIndicator/CircularProgressIndicator)
• 布局控件
  • 线性布局(Row/Column)
  • 弹性布局(Flex/Expanded/Spacer)
  • 流式布局(Wrap/Flow)
  • 层叠布局(Stack/Positioned)
  • 对齐与相对定位(Align/Alignment/FractionalOffset/Center)
• 容器控件
  • 填充(Padding/EdgeInsets)
  • 尺寸限制(ConstrainedBox/BoxConstraints/SizedBox/UnconstrainedBox)
  • 装饰(DecoratedBox)
  • 变换(Transform/Matrix4(做用于绘制阶段)/RotatedBox(做用于布局阶段))
  • 容器(Container(多种装饰和填充等组件的组合)/Padding/Margin)
  • 裁减(Clip/CustomClipper(裁减动做的做用时期与Transform相同，都做用于绘制阶段))
  • 通用类导航主界面(Scaffold/AppBar/TabBar/TabBarView/Drawer/FloatingActionButton)
• 列表控件
  • 单child滚动控件(SingleChildScrollView/Scrollbar)
  • 有限列表项状况下使用ListView(ListView)
  • 众多列表项状况下使用ListView(ListView.builder)
  • 带分割线的列表项状况下使用ListView(ListView.separated)
  • 下拉刷新 和 上拉加载更多(初始化加载数据、结束时的标记、根据index判断底部是绘制结束的Widget仍是正在加载时的Widget、Widget的正常显示)
  • 有限GridView(GridView + SliverGridDelegateWithFixedCrossAxisCount)
  • 有限GridView.count(效果彻底等价于GridView + SliverGridDelegateWithFixedCrossAxisCount)
  • 有限GridView(GridView + SliverGridDelegateWithMaxCrossAxisExtent)
  • 有限GridView.extent(效果彻底等价于GridView + SliverGridDelegateWithMaxCrossAxisExtent)
  • 无限GridView加载(GridView.builder)
  • 滚动监听(ScrollController/ScrollPosition)
• 触摸反馈
  • 事件处理
    • 原始指针(触摸事件)(撸一个触摸板)(Listener)
  • 事件冒泡
    • 不一样事件冒泡行为之比较(HitTestBehavior.deferToChild/HitTestBehavior.opaque/HitTestBehavior.translucent/IgnorePointer)
  • 手势识别
    • 点击/双击/长按/拖动/滑动(GestureDetector)
    • 缩放(GestureDetector)
    • GestureRecognizer(当所修饰的对象不为widget且具备recognizer节点时可用)
• 事件总线
  • 简易EventBus(Dart实现)
  • EventBus界面演示
• 通知
  • 通知事件名称(NotificationListener.onNotification)
  • 自定义通知(覆写Notification + NotificationListener)
  • 通知冒泡(onNotification回调中的return value)
• 存储路径访问和文件操做
  • 存储路径访问(访问缓存/访问包路径/访问SD卡)(PathProvider)
• 网络编程
  • HttpClient
  • Dio(本质是基于HttpClient封装的上层API)
    • 更多Dio版本信息及API(官方地址)
• 功能控件及数据状态管理(InheritedWidget)
  • 导航返回键和实体返回键拦截(再按一次确认退出)(WillPopScope)
  • 控件跨级传递数据(InheritedWidget/dependOnInheritedWidgetOfExactType/getElementForInheritedWidgetOfExactType/updateShouldNotify/didChangeDependencies)
  • 跨控件状态管理(手动实现Provider)
    • 第三方Provider实现
  • 异步更新UI(FutureBuilder/StreamBuilder)
• 应用主题切换(Theme/ThemeData(内部经过InheritedWidget实现))
  • 单个界面主题切换
  • 全局界面主题切换
• 与原生互调和相互集成(MethodChannel.invokeMethod)
  • Flutter调用Android Native方法
  • Flutter界面跳转至Android Native界面
• WebView Flutter(webview_flutter)
• 开发者通用设置(MaterialApp)
  • 是否显示界面布局网格(debugShowMaterialGrid)
  • 是否打开性能监控，覆盖在屏幕最上面(showPerformanceOverlay)
  • 是否打开栅格缓存图像的检查板(checkerboardRasterCacheImages)
  • 是否打开显示到屏幕外位图的图层的检查面板(checkerboardOffscreenLayers)
  • 是否打开覆盖图，显示框架报告的可访问性信息，显示边框(showSemanticsDebugger)
  • 是否显示右上角的Debug标签(debugShowCheckedModeBanner)
• 切换操做系统平台(Android/iOS)
  • 切换为Android应用: debugDefaultTargetPlatformOverride = TargetPlatform.android
  • 切换为iOS应用: debugDefaultTargetPlatformOverride = TargetPlatform.iOS
• 动画
• 自定义控件
• 国际化

---

正片(Action)

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

---

整套效果的App下载连接

for Android

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

---

Github项目地址