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(按宽高自动换行布局)
       

 

 

你可能感兴趣的:(Flutter,基础)