规则

（1）为了提高阅读星，组件嵌套不能多于3层

操作

当有多个模拟器的时候，可以指定某个模拟器运行
flutter run -d 模拟器ID

查看所有模拟器的ID
flutter run

image.png

工具

接口服务器平台：easy-mock
(了解文章：https://www.jianshu.com/p/3665e1b1142c)

组件学习

SingleChildScrollView滚动视图类

ListView 可以设置滚动方向，但是listview不能嵌套listView

contaier
padding 内边距
margin 外边距
color 背景颜色
decoration 修饰，使用BoxDecoration组件（可以加渐变，加边框）

Expanded 填充整个屏幕（搭配row或colum布局）

row水平布局

colum 垂直布局

stack 层叠布局

不嵌套Align和Positioned组件，stack更适合两个组件的布局设置

Align组件

Stack 与 Align 组合使用
更适合多个组件相对于父组件的相对定位如居中，左上之类

Position定位组件

stack 与 Position 组合使用
更适合组件相对于父组件的精准定位，因为可以设置比如相对于父组件顶部的举例top的值，比如20

image.png

AspectRatio组件，作用：根据设置调整子元素child的宽高比

Card卡片组件

CircleAvatar 圆形头像

ClipOval 组件切圆图

圆角图片实现
第一种

image.png

图片
加载网络图片

Warp 流式布局组件

GestureDetector 手势组件

Padding可以设置内边距的组件

Opacity 设置透明度的组件

Expansiontile 折叠标题组件

image.png

类的构造方法，如果是必传的参数使用@required修饰

image.png image.png image.png image.png

安卓apk的打包

image.png

项目实战

控件风格：
material.dart
cupertino.dart // 偏向苹果图标的风格

保持页面状态：

tabBar控件
BottomNavigationBar

滚动控件
SingleChildScrollView

屏幕适配
插件： screenUtil

image.png image.png image.png

拨打电话插件
url_launcher

上拉加载插件
flutter_easyrefresh

Json 数据转模型

image.png

Flutter状态管理
statefulWidge缺点耦合性比较强
Provide 是定义一个全局的状态
（可以参考这篇文章介绍：https://mp.weixin.qq.com/s/ywGQnaYpioPxlYvYTSpR4w）

image.png

简单的使用实例

image.png image.png 必须要在main方法中设置

网页工具：JSon转dart模型
地址

提示框插件
FlutterToast

路由管理插件
[fluro] ()

futureBuilder实现widget异步加载

网页插件
flutter_html

数据持久化
flutter 自带的 shared_preferences

数据库sql
flutter 自带的sqflite

查看flutter官方自带组件
flutter/plugins

设置圆角

image.png

视频播放器
video_player

在android studio 中
使用快捷键 command + alt + b 可以查看抽象类中所有的实现类
使用快捷键 option(alt) + enter 将statelessWidget 转成 statefulWidget
使用快捷键o�ption(alt) + enter + w将build出来的widget抽取到一个单独的widget中

statefulWidget生命周期

image.png

自定义按钮

button顶部有间隙的原因

button内边距去除

button修改最小尺寸

image.png

本地图片配置路径 简易写法

占位图

image.png

icons字体图标（icons）和图片图标

flutter 图片加载默认是有添加缓存的，1000张或者100M，如果超过缓存容量，会自动清除缓存

container

image.png

textfield

image.png

修改textField边框颜色

image.png

flutter 官方文档路径
flutter.dev
flutter.中文

Container尺寸大小变化的规则

image.png

根据上面两张图，分几种情况
1、如果container没有设置child的话，那么会填充整个父类的大小
2、container有没有设置width和height，那么container会跟随child元素的大小
3、container设置了width和height，并且设置了alignment，那么child元素大小会跟随container的大小
4、container设置了alignment，那么container的widget树结构在child中间嵌套多一个align widget元素，而align的大小会跟随container的大小

设置圆角

image.png