Flutter教程

准备

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

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

Flutter 常用组件

• Flutter Text(Flutter文本显示和样式) · Flutter文本显示和样式，自定义字体
• Flutter TextField 文本框 · 文本框样式、文本框布局、获取数据
• Flutter Form表单 · 表单提交 演示
• Flutter Image组件 · 图片加载、土拍你颜色混合、图片平铺、图片拉伸、圆形图片
• Flutter ListView组件 · 列表数据加载，ListTile介绍
• Flutter GridView组件 · 介绍GridView.count和GridView.builder 实现布局
• Flutter Button 组件 · 包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。
• Flutter DateTime详解 · Flutter日期转换、Flutter时间戳
• Flutter 动画 · 缩放、颜色渐变、平移、淡入淡出、旋转、改变形状、混合组合
• Flutter BottomSheet 底部滑出的组件 · Flutter BottomSheet 底部滑出的组件，底部弹窗
• Flutter Chip 标签 ·
• Flutter Checkbox 复选框 · Checkbox 和 CheckboxListTile 复选框
• Flutter Radio 单选按钮 · Radio 和RadioListTile 单选按钮
• Flutter Switch 开关 · Switch与CupertinoSwitch
• Flutter Slider 进度条 · Slider与CupertinoSlider
• Flutter Stepper 步骤 · 步骤组件是用来约束用户操作顺序的
• Flutter AlertDialog对话框 · 警报对话框
• Flutter AboutDialog对话框 · 包含应用程序的图标，名称，版本号和版权的对话框
• Flutter SimpleDialog 对话框 · 简单对话框
• Flutter CupertinoAlertDialog IOS风格对话框 · iOS风格的警报对话框
• Flutter CupertinoFullscreenDialogTransition 全屏对话框 · 全屏对话框
• Flutter Dialog 对话框 · 对话框简介
• Flutter Drawer 侧滑菜单、抽屉 ·
• Flutter PopupMenuButton 菜单 ·
• Flutter ExpansionPanel 收缩面板 ·
• flutter SliverAppBar 随内容一起滑动的头部 - 滞留头部 ·
• Flutter CustomScrollView 自定义滚动效果 ·
• flutter MediaQuery · 获取屏幕宽度高度密度通知栏高度等屏幕信息
• Flutter Divider 分割线 · 分隔符是一条细线，通常用于对列表和布局中的内容进行分组。
• Flutter Scaffold ·
• Flutter MaterialApp ·
• Flutter DatePickers & TimePickers · Flutter 时间/日期选择器
• Flutter Offstage、Visibility隐藏/可见 ·
• Flutter InkWell水波纹效果 ·
• Flutter SnackBar 提示信息 · 显示提示信息的一个控件，类似Toast，会自动隐藏。
• Flutter Dismissible · 拖动小部件
• Flutter Accumulator · 累加器
• Flutter DragTarget · 接收拖拽Draggable部件
• Flutter Draggable · 拖动小部件
• Flutter ClipXxx · 裁剪系列

Flutter 常用布局

• Flutter Container 组件 · 容器、Container属性与特性
• Flutter Paddiing组件 · 内边距组件介绍
• Flutter Row 组件 · 行（水平布局） 组件介绍
• Flutter Column 组件 · 列（垂直布局） 组件介绍
• Flutter Expanded 组件 · 自适应填充、比例填充
• Flutter Stack 组件 · Stack层叠组件、tack与Align组合、Stack与Positioned组合定位布局
• Flutter Card 组件 · 可设定圆角和阴影的立体式卡片组件
• Flutter AspectRatio 组件 · 设定组件宽高比
• Flutter Wrap 组件 · 可以实现流布局（自动换行）的组件
• Flutter Table 表格 · Table 是一个表格布局组件
• Flutter DataTable数据表 ·

Flutter 页面路由

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

Flutter 导航

• Flutter AppBar 组件 · 介绍appBar、TabBar使用方法
• Flutter 通过TabController 定义TabBar · 监听TabBar与TabBarView的交互
• Flutter BottomNavigationBar 组件 · 底部导航条、以及实现页面切换、模仿XXApp的底部导航栏布局

扩展

• Toast Demo Flutter Overlay、OverlayState、OverlayEntry 叠加
• Flutter RefreshIndicator 下拉刷新
• Flutter Tween · 实现抖动效果
• VSCode Flutter 打包APK ·

---

Flutter Widget 目录

---

2019-09-16
未完待续…