Flutter基础

# Dart

List数组

List 指定字 符串类型

int整数类型

is关键词来判断类型 

%取余,~取整

$a $b 连接

a??=1 如果a=空 1赋值给a  

number转换字符串toString

(join('-'))转成字符串

String转换number类型 int.parse 

isEmpty判断字符串是否为空

reversed 对列表倒序排序翻转 

addAll拼接数组 

remove删除

removeAt传入索引值

fillRange修改(初始值,结束值)

insert插入值

insertAll插入多个 (数组)  

set数组去重

泛型就是解决类,接口方法的复用性,以及对不特定数据类型的支持

Flutter基础_第1张图片

Flutter基础_第2张图片

Flutter基础_第3张图片

Flutter基础_第4张图片

Flutter基础_第5张图片

Flutter基础_第6张图片

Flutter基础_第7张图片

 Flutter

flutter create+名字

配置环境变量

Flutter基础_第8张图片

Flutter基础_第9张图片

Flutter基础_第10张图片

Flutter基础_第11张图片

Flutter基础_第12张图片

图标

Flutter基础_第13张图片

布局

样式

Text:文本组件

Flutter基础_第14张图片

Flutter基础_第15张图片

 borderRadius: BorderRadius.all(Radius.circular(150)) 150变成圆

padding:EdgeInsets.all()

padding:EdgeInsets.fromLTRB()

decoration:背景色

Flutter基础_第16张图片

Image

Flutter基础_第17张图片

Flutter基础_第18张图片

圆形图片

1,

image:DecorationImage(

image:

fit:BoxFit.cover

)

2,ClipOval

本地图片(assert(''))

1,新建文件夹2.0x 3.0x 图片根目录有每个文件夹也有

2,Flutter基础_第19张图片

ListView 列表

Flutter基础_第20张图片

图文列表

Flutter基础_第21张图片

GridView :网格布局

.count

.builder

crossAxisCount  几列

Flutter基础_第22张图片

Row水平布局

spaceEvenly: 均匀(常用)

Flutter基础_第23张图片

Column垂直布局Flutter基础_第24张图片

Expanded (display:flex)

Stack 层叠组件

(alignment 位置) (xy    0  -1 1 )

children

Stack结合Positioned使用

Flutter基础_第25张图片

平铺图片用

Flutter基础_第26张图片

Card组件

和listView实现

Flutter基础_第27张图片

CircleAvatar处理头像(也可以用ClipOval)

Wrap

Flutter基础_第28张图片

RaiseButton

Flutter基础_第29张图片

 Flutter基础_第30张图片

只有  有状态组件才有setState 方法,

BottomNavigationBar底部导航

Flutter基础_第31张图片

Flutter基础_第32张图片

type:BottomNavigationBarType.fixed  //配置底部tabs有多个按钮


Drawer侧边栏

Flutter基础_第33张图片

Divider下划线

DrawerHeader头部

Flutter基础_第34张图片

头部组件

Flutter基础_第35张图片

侧边栏列跳转的方法


按钮组件

Flutter基础_第36张图片

基本属性类似

Flutter基础_第37张图片

自定义按钮组件

Flutter基础_第38张图片

FloatingActionButton凸起按钮

和appBar同级

Flutter基础_第39张图片

Flutter基础_第40张图片

floationgActionButtonLocation位置

类似于咸鱼APP 中间的浮动按钮:Container包裹可以设置宽高,padding,margin 

Flutter基础_第41张图片

表单

 Flutter基础_第42张图片

Flutter基础_第43张图片

Flutter基础_第44张图片

Radio单选

Flutter基础_第45张图片

1,value

2,onChanged改变触发的事件

3, groupValue: 变量一样代表一组

Flutter基础_第46张图片

Flutter基础_第47张图片

日期

InkWell类似于button组件

Flutter基础_第48张图片

三方日期组件:

1,添加依赖

2,ctrl+s保存下载包或(fluter packages get)

3,引入

弹出层

AlertDialog,SimpleDialog

隐藏Navigator.pop(context,' ');

在showDialog组件里

showToast插件

定时器

Flutter基础_第49张图片

请求数据

Flutter基础_第50张图片

Flutter基础_第51张图片

Flutter基础_第52张图片

Dio

Flutter基础_第53张图片

appBar的封装

implements PreferredSizeWidget 

Flutter基础_第54张图片

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