Flutter组件大全(超详细) 思维导图模板_ProcessOn思维导图、流程图

StatelessWidget

方法

Widget build(BuildContext context)

StatefulWidget

方法

createState()

结构

入口Widget

MaterialApp

属性

title

(String)

标题

home

(Widget)

主页

进入程序后的第一个页面

routes

(map)

路由

声明程序中有哪个通过Navigation.of(context).pushNamed跳转的路由参数以键值对的形式传递 key:路由名字 value:对应的Widget

routes: { '/home':(BuildContext context) => HomePage(), '/home/one':(BuildContext context) => OnePage(), //.... },

navigator

参考

参考1

标准应用界面结构Widget

Scaffold

提供了默认的导航栏、标题和包含主屏幕widget树的body属性

属性

appBar

(AppBar)

body

(Widget)

floatingActionButton

presistentFotterButtons

drawer

(Drawer)

左侧抽屉

enddrawer

(Drawer)

右侧抽屉

backgroundColor

resizeToAvoidBottomPadding

顶部Bar

AppBar

属性

title

(Text)

actions

(List<Widget>)

侧边栏(抽屉)

Drawer

属性

child

底部导航

BottomNavigationBar

DrawerHeader

decoration

child

SnackBar

内容

Text

属性

stytle

(TextStyle)

文本样式

textAlign

overflow

（TextOverflow）

截断方式

softWrap

maxLines

最大行数

RichText

属性

text

(TextSpan)

textAlign

TextSpan

属性

text

(String)

style

(TextStyle)

TextField

属性

decoration

(InputDecoration)

labelText

(String)

labelStyle

(TextStyle)

hintText

输入为空时提示

(String)

controller

(TextEditingController)

textAlignVertical

垂直对齐方式

(TextAlignVertical)

toolbarOptions

长安是弹出菜单

(ToolbarOptions)

showCursor

(bool)

是否显示光标

cursorWith

(int)

cursorRadius

(Radius)

cursorColor

(Color)

obscureText

(bool)

是否密码框

inputFormatters

限制输入类型

例:

WhitelistingTextInputFormatter(RegExp("[a-zA-Z]"))

事件

onchange

onSubbmitted

onTap

图片

Image

属性

width

(int)

height

(int)

fit

(BoxFit)

方法

Image.network(url)

网络图片

frameBuilder

(AnimatedOpacity)

Image.asset(localfilepath)

assets下图片

Image.file(File(filepath))

设备上图片

FadeInImage

方法

FadeInImage.assetNetwork

placeholder

(String)

image

(String)

fit

(BoxFit)

AssetImage

Icon

属性

color

size

按钮

IconButton

属性

icon

事件

onPressed

TextButton

ElevatedButton

OutlineButton

带边框按钮

过时

RaisedButton

过时

建议用ElevatedButton

Material风格按钮

属性

child

(Text)

事件

onPressed

FlatButton

扁平按钮

过时

建议用TextButton

按钮组

ButtonBar

属性

chindren

Radio

单选

属性

value

本身value

groupValue

组值

当相等时则为选中状态

事件

onChanged

RadioList

属性

title

value

groupValue

事件

onChanged

CheckBox

勾选框

属性

value

(boolean)

activeColor

(Color)

矩形区域颜色

checkColor

(Color)

对勾颜色

事件

onChanged

CheckboxListTitle

属性

title

(String)

value

(bool)

controlAffinity

(ListTileControlAffinity)

subtitle

(Text)

子标题

secondary

(Icon)

第二图标

Slider

属性

value

(double)

min

max

divisions

label

(String)

activeColor

inactiveColor

事件

onchange

RangeSlider

属性

values

(RangeValues)

labels

min

max

divisions

事件

onchange

Switch

开关组件

属性

value

(bool)

activeColor

(Color)

activeTrackColor

(Color)

activeThumbImage

(AssetImage)

Switch

Switch和ListTile的组合

属性

title

(String)

LinearProgressIndicator

水平进度指示器

属性

value

(double)

backgroundColor

（Color)

valueColor

分隔线

Divider

ListTitle

属性

title

(Text)

tailing

(Icon)

方法

onTap

滚动容器

ListView

属性

padding

(EdgeInsets)

GridView

属性

scrollDirection

(Axis)

reverse

(bool)

controller

(ScrollController)

primary

(bool)

physics

(ScrollPhysics)

skrinkWrap

(bool)

gridDelegate

(SliverGridDelegate)

控制子组件如何排列

addAutomaticKeepAlives

(bool)

addRepaintBoundaries

(bool)

cacheExtent

(double)

children

(List<Widget>)

方法

GridView.builder()

gridDelegate

itemCount

itemBuilder

GridView.extent()

maxCrossAxisExtent

子元素最大长度

childAspectRatio

宽高比

GridView.count()

crossAxisCount

横轴数量

childAspectRatio

宽高比

children

相关类

DataColumn

属性

label

(Text)

布局容器

容器组件

Container

属性

width

(double?)

宽度

height

(double?)

高度

alignment

(AlignmentGeometry)

居中对齐

padding

(EdgeInsetsGeometry)

内边距

margins

(EdgeInsetsGeometry)

外边距

color

(Color)

背景色

child

(Widget)

子节点

decoration

(Decoration)

修饰器

foregroundDecoration

(Decoration)

constraints

(BoxConstraints)

transform

Matrix4

transformAlignment

(AlignmentGeometry)

clipBehavior

(Clip)

ConstrainedBox

设置最大/小宽高

UnconstrainedBox

SizedBox

固定大小

属性

width

height

AspectRatio

固定宽高比

FractionallySizedBox

占父组件百分比

LimitedBox

没有父组件约束

固定宽高

Column

垂直列布局

属性

crossAxisAlignment

交叉轴对齐方式

CrossAxisAlignment

.start

开始对齐

结尾留空

.center

中间对齐

两边留空

.end

底部对齐

开头留空

.strectch

拉伸

mainAxisAlignment

子主题

MainAxisAlignment

.start

开始

结尾留空

.center

中间

两边留空

.end

结束

开头留空

.spaceEvenly

12间距= 23间距

假设1 2 3 三块内容

.spaceBetween

两边间距=12间距=23间距

.spaceAround

两边间距=12间距/2=23间距/2

mainAxisSize

主轴尺寸

MainAxsSize

max

默认值

尽可能大

min

尽可能小

textDirection

TextDirecction

.ltr

同MainAxisAlignment.start

.rtl

同MainAxisAlignment.end

children

Row

水平行布局

属性同Column

Center

属性

child

Stack

层叠布局

属性

alignment

children

fit

(StackFit)

IndexStack

属性

index

children

Wrap

流式布局

属性

children

direction

(Axis)

alignment

主轴对齐方式,作用每一行

(WrapAlignment)

runAlignment

交叉轴上每一行作为一个整体

textDirection

(TextDirection)

verticalDirection

(VerticalDirection)

Card

ListTitle

属性

titile

subtitle

leading

Expanded

Flexible

属性

child

flex

权重

(int)

Spacer

SafeArea

属性

child

安全区域

解决了刘海屏问题

SafeArea通过MediaQuery来检测屏幕尺寸，使应用程序的大小能与屏幕适配。
然后返回了一个Padding Widget 来包裹住我们编写的页面。这样我们的页面就不会被异形屏幕给遮挡住了。

修饰

RotatedBox

功能

旋转其他子Widget

在控件layout的时候就对其子widget进行旋转处理,所需要的空间大小跟旋转子widget所需要的空间大小一样

RotatedBox和Transform.rotate功能相似，它们都可以对子widget进行旋转变换，
但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子widget的位置和大小。

属性

quarterTurns

旋转的角度为90的倍数,正值为顺时针,负数为逆时针

child

BoxDecoration

属性

color

image

border

(BoxBorder)

borderRadius

boxShadow

gradient

backgroundBlendMode

shape

ThemeData

主题

属性

primaryColor

textTheme

CircleAvatar

属性

backgroundImage

radius

InputDecoration

属性

icon

(Icon)

框左外图标

prefixIcon

(Icon)

框里左图标

suffixIcon

(Icon)

框里尾部图标

helperText

(String)

helperStyle

(TextStyle)

helperMaxLines

(int)

errorText

(String)

errorStyle

(TextStyle)

errorMaxLines

(int)

errorBorder

(OutlineInputBorder)

counterText

(String)

字数统计显示

fill

(bool)

是否要用填充色填充

fillColor

(Color)

enbledBorder

(OutlineInputBorder)

focuseBorder

(OutlineInputBorder)

动画

AlwaysStoppedAnimation

其他

EdgeInsets

方法

.all()

(double)

.symmetric()

horizontal

(double)

vertical

(double)

.only()

left

(double)

right

(double)

top

(double)

bottom

(double)

.fromLTRB()

(double,double,double,double)

Colors

Icons

图标列表

文档链接

IconData

TextStyle

属性

fontWeight

color

颜色

fontSize

大小

fontWeight

粗细

FontWeight

w100~w900

.bold

(w700)

fontStyle

斜体

FontStyle

.italic

自定义字体

BoxFit

fill

平铺填充

cover

等比拉伸直到两边充满

contain

等比拉伸直到一边充满

fitWidth

fitHeight

none

裁剪与aligment有关

scaleDown

colorBleanMode

repeat

(ImageRepeat)

State

OutlineInputBorder

borderSide

(BorderSide)

borderRadius

(BorderRadius)

BorderSide

属性

color

(Color)

BorderRadius

方法

.all

Radius

方法

circular

TextEditingController

方法

dispose()

ToolbarOptions

属性

copy

(bool)

cut

(bool)

paste

(bool)

selectAll

(bool)

BuildContext

Positioned

属性

left

right

bottom

top

child

Fluttertoast

方法

Fluttertoast.showToast()

msg

(String)

gravity

(ToastGravity)

timeInSecForIosWeb

(double)

backgroundColor

(Color)

textColor

(Color)

fontSize

(double)

Theme

BoxBorder

属性

top

bottom

BorderSide

属性

color

width

style

BorderStyle

none

solid

路由

Navigator

方法

Navigator.pushNamed(context,"/路由名")

路由跳转

Navigator.of(context).push()

MaterialPageRoute

属性

builder

常量

TextAlign

.center

.left

.right

.justify

两端对齐

.start

前端对齐

end

末端对齐

TextAlignVertical

.center

同TextAlign

TextOverflow

.ellipsis

省略号结尾

.clip

直接裁剪

.fade

越来越透明

.visible

可见,溢出

ListTileControlAffinity

.leaading

勾选框在开头

.tailing

勾选框在结尾

.platform

根据平台确定

ImageRepeat

.repeatX

.repeatY

.repeat

.noRepeat

StackFit

.loose

.expand

.center

AlignmentDirectional

.center

Axis

方向

.vertical

水平方向

WrapAlignment

.start

.center

.end

.spaceBetween

.spaceEvenly

.spaceAround

VerticalDirection

.up

ToastGravity

.BOTTOM

触摸

GestureDetector