Flutter学习总纲教程

Flutter学习总纲教程 

---

Flutter Widget 目录

准备
学习Flutter之前，必须要了解（不需要多么精通，但至少要了解）Dart的基础特性。

1. Dart基础特性  ·  Dart 是 Google 开发的新一代编程语言，Flutter就是只用dart语言编写的。
2. 在Windows上搭建Flutter开发环境
3. Flutter之初体验  ·  创建一个Flutter Android项目

 

Flutter 结构和导航

1. Flutter Scaffold   ·  Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API
2. Flutter AppBar    ·  一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成
3. Flutter 通过TabController 定义TabBar   ·  监听TabBar与TabBarView的交互
4. Flutter BottomNavigationBar   ·  底部导航条、以及实现页面切换、模仿XXApp的底部导航栏布局
5. Flutter MaterialApp   ·  一个方便的widget，它封装了应用程序实现Material Design所需要的一些widget。
6. Flutter Drawer   ·  侧滑菜单、抽屉从Scaffold边缘水平滑动以显示应用程序中导航链接的Material Design面板。
7. Flutter SliverAppBar   ·  与CustomScrollView集成的材质设计应用栏。随内容一起滑动的头部 - 滞留头部

 

Flutter 按钮

1. ​Flutter RaisedButton  ·  Material Design中的button， 一个凸起的材质矩形按钮
2. Flutter OutlineButton   ·  边框按钮
3. Flutter FloatingActionButton  ·  一个圆形图标按钮，它悬停在内容之上，以展示应用程序中的主要动作
4. Flutter FlatButton  ·  一个扁平的Material按钮
5. ​Flutter IconButton  ·  一个Material图标按钮，点击时会有水波动画
6. Flutter PopupMenuButton  ·  当菜单隐藏式，点击或调用onSelected时显示一个弹出式菜单列表
7. Flutter ButtonBar  ·  水平排列的按钮组
8. Flutter DropdownButton  ·  下拉菜单

 

输入框和选择框

1. ​Flutter TextField  ·  文本输入框
2. ​Flutter Checkbox  ·  复选框，允许用户从一组中选择多个选项。
3. ​Flutter Radio  ·  单选框，允许用户从一组中选择一个选项。
4. Flutter Switch  ·  On/off 用于切换一个单一状态
5. Flutter Slider  ·  滑块，允许用户通过滑动滑块来从一系列值中选择。进度条
6. Flutter Date & Time Pickers  ·  日期&时间选择器

 

对话框、Alert、Panel

1. Flutter SimpleDialog  ·  简单对话框可以显示附加的提示或操作
2. Flutter AlertDialog  ·  一个会中断用户操作的对话款，需要用户确认
3. ​Flutter BottomSheet  ·  BottomSheet是一个从屏幕底部滑起的列表（以显示更多的内容）
4. ​Flutter ExpansionPanel  ·  扩展面板，包含一个标题和一个正文，可以展开或者折叠，面板展开，主体可见。
5. Flutter SnackBar  ·  具有可选操作的轻量级消息提示，在屏幕的底部显示。
6. Flutter AboutDialog  ·  是一个包含应用程序的图标，名称，版本号和版权按钮的对话框
7. Flutter CupertinoFullscreenDialogTransition 全屏对话框   ·  全屏对话框

 

信息展示

1. Flutter Text  ·  Text Widget用于显示简单样式文本(   富文本编辑器 Text.rich()   )
2. Flutter RefreshIndicator  ·  下拉刷新包装器。
3. Flutter Image  ·  一个显示图片的widget
4. ​Flutter Chip  ·  标签， 它可以将一个复杂内容实体展现在一个小块中，如联系人
5. Flutter ClipXxx 裁剪系列  ·  ClipOval椭圆剪辑、ClipPath 路径剪辑、ClipRect 矩形剪辑、ClipRRect 圆角矩形
6. Flutter Draggable   ·  拖动小部件
7. Flutter DragTarget  ·  接收拖拽Draggable部件
8. Flutter Dismissible   ·  拖动小部件，常用于listview Item滑动删除
9. Flutter DataTable  ·  数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件
10. ​Flutter GridView  ·  网格列表由以垂直和水平布局排列的重复单元格图案组成。GridView小部件实现此组件
11. Flutter ListView  ·  ListView是最常用的滚动小部件。它在滚动方向上一个接一个地显示它的子项
12. Flutter MediaQuery  ·  获取屏幕宽度、高度、密度、通知栏高度等屏幕信息
13. Flutter Offstage、Visibility  ·  隐藏/可见 组件
14. Flutter Form表单  ·  表单提交 演示
15. Flutter Animation 动画   ·  缩放、颜色渐变、平移、淡入淡出、旋转、改变形状、混合组合
16. Flutter CustomScrollView 自定义滚动效果
17. Flutter DatePickers & TimePickers   ·  Flutter 时间/日期选择器
18. Flutter DateTime日期转换  ·  时间戳
19. Flutter Accumulator累加器
20. Flutter Tooltip  ·  一个文本提示工具，帮助解释一个按钮或其他用户界面，当widget长时间按下时显示一个提示标签
21. Flutter CircularProgressIndicator 进度指示器/Loading
22. Flutter ConstrainedBox 约束子组件

 

Flutter 常用布局

1. Flutter Container   ·  容器、Container属性与特性
2. Flutter Paddiing  ·  内边距组件介绍
3. Flutter Row   ·  行（水平布局）  组件介绍
4. Flutter Column  ·  列（垂直布局）  组件介绍
5. Flutter Expanded    ·  自适应填充、比例填充
6. Flutter Stack   ·  Stack层叠组件、tack与Align组合、Stack与Positioned组合定位布局
7. Flutter Card    ·  一个 Material Design 卡片。拥有一个圆角和阴影
8. Flutter AspectRatio    ·  设定组件宽高比
9. Flutter Wrap    ·  可以实现流布局（自动换行）的组件
10. Flutter Table    ·  Table 是一个表格布局组件
11. Flutter DataTable  ·  数据表
12. Flutter Stepper  ·  一个Material Design 步骤指示器，显示一系列步骤的过程
13. Flutter Divider  ·  一个逻辑1像素厚的水平分割线，两边都有填充
14. Flutter InkWell   ·  水波纹效果 ，可以给任何组件添加点击

 

Cupertino (iOS风格) Widgets

1. ​Flutter CupertinoSwitch   ·  IOS风格的开关. 用于单一状态的开/关
2. ​Flutter CupertinoSlider   ·  从一个范围中选一个值
3. ​Flutter CupertinoDialogAction   ·  通常用于CupertinoAlertDialog的一个button
4. ​Flutter CupertinoDialog   ·  IOS风格的对话框
5. Flutter CupertinoAlertDialog   ·  IOS风格的alert dialog

 

Flutter 页面路由

1. Navigator页面跳转   ·  Flutter中的普通路由、普通路由传值、命名路由、命名路由传值
2. 路由替换（返回到根）   ·  替换路由、清除路由
3. 页面返回传值   ·  页面返回传值 (类似与Android里面的OnActivityForResult)，接收页面返回数据

 

扩展

1. Toast Demo  Flutter Overlay、OverlayState、OverlayEntry 叠加 
2. Flutter RefreshIndicator 下拉刷新
3. VSCode Flutter 打包APK
4. Flutter Tween实现抖动效果
5. Flutter 与原生交互
6. Flutter 通知栏通知

 

 

各个布局介绍 

　Flutter中拥有30多种预定义的布局widget，常用的有Container、Padding、Center、Flex、Row、Colum、ListView、GridView。按照《Flutter技术入门与实战》上面来说的话，大概分为四类

基础布局组件
Container(容器布局)	Center(居中布局)	Padding(填充布局)	Align(对齐布局)
FittedBox(缩放布局)	Stack (堆叠布局)	Colum(垂直布局)	Row (水平布局)
overflowBox(溢出父视图容器)	Expanded(配合Colum，Row使用)
宽高尺寸处理
SizedBox(设置具体尺寸)	ConstrainedBox(限定最大最小宽高布局)		LimitedBox(限定最大宽高布局)
AspectRatio(调整宽高比)	FractionallySizedBox(百分比布局)
列表和表格处理
ListView（列表）	GridView（网格）	Table（表格）
其它布局处理
Transform(矩阵转换)	Baseline(基准线布局)	Offstage(控制是否显示组件)	Wrap（按宽高自动换行布局）