規(guī)則

（1）為了提高閱讀星，組件嵌套不能多于3層

操作

當(dāng)有多個(gè)模擬器的時(shí)候，可以指定某個(gè)模擬器運(yùn)行
flutter run -d 模擬器ID

查看所有模擬器的ID
flutter run

image.png

工具

接口服務(wù)器平臺(tái)：easy-mock
(了解文章：http://www.itdecent.cn/p/3665e1b1142c)

組件學(xué)習(xí)

SingleChildScrollView滾動(dòng)視圖類

ListView 可以設(shè)置滾動(dòng)方向，但是listview不能嵌套listView

contaier
padding 內(nèi)邊距
margin 外邊距
color 背景顏色
decoration 修飾，使用BoxDecoration組件（可以加漸變，加邊框）

Expanded 填充整個(gè)屏幕（搭配row或colum布局）

row水平布局

colum 垂直布局

stack 層疊布局

不嵌套Align和Positioned組件，stack更適合兩個(gè)組件的布局設(shè)置

Align組件

Stack 與 Align 組合使用
更適合多個(gè)組件相對(duì)于父組件的相對(duì)定位如居中，左上之類

Position定位組件

stack 與 Position 組合使用
更適合組件相對(duì)于父組件的精準(zhǔn)定位，因?yàn)榭梢栽O(shè)置比如相對(duì)于父組件頂部的舉例top的值，比如20

image.png

AspectRatio組件，作用：根據(jù)設(shè)置調(diào)整子元素child的寬高比

Card卡片組件

CircleAvatar 圓形頭像

ClipOval 組件切圓圖

圓角圖片實(shí)現(xiàn)
第一種

image.png

圖片
加載網(wǎng)絡(luò)圖片

Warp 流式布局組件

GestureDetector 手勢(shì)組件

Padding可以設(shè)置內(nèi)邊距的組件

Opacity 設(shè)置透明度的組件

Expansiontile 折疊標(biāo)題組件

image.png

類的構(gòu)造方法，如果是必傳的參數(shù)使用@required修飾

image.png

image.png

image.png

image.png

安卓apk的打包

image.png

項(xiàng)目實(shí)戰(zhàn)

控件風(fēng)格：
material.dart
cupertino.dart // 偏向蘋果圖標(biāo)的風(fēng)格

保持頁(yè)面狀態(tài)：

tabBar控件
BottomNavigationBar

滾動(dòng)控件
SingleChildScrollView

屏幕適配
插件： screenUtil

image.png

image.png

image.png

撥打電話插件
url_launcher

上拉加載插件
flutter_easyrefresh

Json 數(shù)據(jù)轉(zhuǎn)模型

image.png

Flutter狀態(tài)管理
statefulWidge缺點(diǎn)耦合性比較強(qiáng)
Provide 是定義一個(gè)全局的狀態(tài)
（可以參考這篇文章介紹：https://mp.weixin.qq.com/s/ywGQnaYpioPxlYvYTSpR4w）

image.png

簡(jiǎn)單的使用實(shí)例

image.png

image.png

必須要在main方法中設(shè)置

網(wǎng)頁(yè)工具：JSon轉(zhuǎn)dart模型
地址

提示框插件
FlutterToast

路由管理插件
[fluro] ()

futureBuilder實(shí)現(xiàn)widget異步加載

網(wǎng)頁(yè)插件
flutter_html

數(shù)據(jù)持久化
flutter 自帶的 shared_preferences

數(shù)據(jù)庫(kù)sql
flutter 自帶的sqflite

查看flutter官方自帶組件
flutter/plugins

設(shè)置圓角

image.png

視頻播放器
video_player

在android studio 中
使用快捷鍵 command + alt + b 可以查看抽象類中所有的實(shí)現(xiàn)類
使用快捷鍵 option(alt) + enter 將statelessWidget 轉(zhuǎn)成 statefulWidget
使用快捷鍵o?ption(alt) + enter + w將build出來(lái)的widget抽取到一個(gè)單獨(dú)的widget中

statefulWidget生命周期

image.png

自定義按鈕

button頂部有間隙的原因

button內(nèi)邊距去除

button修改最小尺寸

image.png

本地圖片配置路徑 簡(jiǎn)易寫法

占位圖

image.png

icons字體圖標(biāo)（icons）和圖片圖標(biāo)

flutter 圖片加載默認(rèn)是有添加緩存的，1000張或者100M，如果超過緩存容量，會(huì)自動(dòng)清除緩存

container

image.png

textfield

image.png

修改textField邊框顏色

image.png

flutter 官方文檔路徑
flutter.dev
flutter.中文

Container尺寸大小變化的規(guī)則

image.png

設(shè)置圓角

image.png