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

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

Android小彩虹2021-07-08 0:56:09190A+A-

封面

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


大纲


创世宣言

背景

何为Flutter? Flutter能做何?

  1. Flutter是一个由Google开发的开源移动应用软件开发工具包,用于为Android、iOS、 Windows、Mac、Linux、Google Fuchsia跨平台开发应用。作为一个UI框架,可以快速的基于上述操作系统构建高质量的原生用户界面。
  2. Flutter的主要组成部分包括:
    • Dart平台
    • Flutter引擎
    • 基础库
    • 定制化设计风格的组件
  3. Flutter相比其他跨平台技术的优点:
    • 自绘UI + 原生渲染,调用系统API渲染,UI运行体验与原生应用相差无几,性能好且开发效率高
    • Google提供了符合各个操作系统UI风格的控件,且可以自由组合构建自己想要的界面
    • 多平台移植成本很低,无需为某个特定的操作系统添加额外的适配代码
    • 开发生态日趋完善,可以在pub.dev找到近乎所有的类原生开发包

Exploring Flutter in action的由来

  • Flutter 1.0版本于北京时间2018年12月5日发布以来,对于国内的很多开发者,直接阅读Google官方英文文档相对来说比较困难,而等待国内公开出版的Flutter相关书籍又显得太慢
  • 官网上的示例代码稍显零碎,不太直观
  • 想要运行起来零距离"触摸"下各种widget,体验下各种属性,往往得几经折腾
  • 对于追一门偏向于实践且比较新的技术,往往抄起键盘来一边写一边看是相对比较快速的上手方法

Exploring Flutter in action想做什么

  • 基于上述现状,本项目旨在提供一个App形式的demo,将各路常用的控件"揣"在一起供大家把玩,部分场景甚至可以直接移植使用
  • 相应的关键部位,在代码当中有相应的注释
  • 力图一个App搞定所有Flutter常见控件的使用
  • 不定期更新控件使用方式和pub依赖版本

运行前准备

主要涵盖的控件和部分常见场景

  • 路由界面
  • 状态传递
    • 子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
  • 动画
  • 自定义控件
  • 国际化

App部分界面实景预览

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

整套效果的App下载链接

for Android

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

Github项目地址

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们