首页  思维导图  详情

资料大全

2021-03-25 06:56:40   30  举报





AI智能生成

Flutter资料大全

iOS

安卓

跨平台

Flutter

作者其他创作

大纲/内容

官网

https://flutter.dev/

中文

电子书

Flutter实战

https://book.flutterchina.club/

开发环境搭建

https://flutter.dev/community/china

flutter doctor

1.检查flutter版本 2.检查android studio是否安装 3.检查虚拟设备或手机设备是否开启或链接 4.检查vscode是否也安装了flutter/dart插件

Dart

安装dart

brew tap dart-lang/dart

brew install dart

brew info dart

如果已装Flutter

flutter/bin/cache/dart-sdk

安装参考

https://blog.csdn.net/luqingshuai_eloong/article/details/109710468

参考资料

https://dart.cn/codelabs

网页编辑器

https://dartpad.cn/

基础

开发工具

调试

创建项目

Android Studio中

new flutter project

命令创建

flutter create projectname

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

运行

ce projectname

flutter run

https://www.processon.com/view/link/606081e20791295627bc05b0

组件大全

StatelessWidget

方法

Widget build(BuildContext context)

StatefulWidget

方法

createState()

结构

入口Widget

MaterialApp

属性

title

(String)

home

(Widget)

routes

(map)

路由

标准应用界面结构Widget

Scaffold

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

属性

appBar

(AppBar)

body

(Widget)

floatingActionButton

presistentFotterButtons

drawer

(Drawer)

左侧抽屉

enddrawer

(Drawer)

右侧抽屉

backgroundColor

resizeToAvoidBottomPadding

顶部Bar

AppBar

属性

title

侧边栏(抽屉)

Drawer

属性

child

底部导航

BottomNavigationBar

DrawerHeader

decoration

child

SnackBar

内容

Text

属性

stytle

(TextStyle)

textAlign

overflow

softWrap

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))

设备上图片

AssetImage

Icon

属性

color

size

按钮

IconButton

属性

icon

事件

onPressed

TextButton

ElevatedButton

OutlineButton

带边框按钮

过时

RaisedButton

过时

建议用ElevatedButton

Material风格按钮

属性

child

(Text)

事件

onPressed

FlatButton

扁平按钮

过时

建议用TextButton

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

滚动容器

ListView

属性

padding

GridView

PageView

DataTable

布局容器

容器组件

Container

属性

width

height

padding

内边距

类似css盒子模型

margins

外边距

borders

边框

color

背景色

child

decoration

ConstrainedBox

设置最大/小宽高

UnconstrainedBox

SizedBox

固定大小

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

修饰

RotatedBox

功能

旋转其他子Widget

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

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

属性

quarterTurns

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

child

BoxDecoration

属性

border

borderRadius

margin

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

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

Navigator

方法

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

路由跳转

常量

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

事件处理与通知

动画

文件操作

网络请求

包与插件

国际化

打包发布

项目

Github客户端示例

需求分析

首页模块

banner

可被值的入口

搜索模块

AI语音模块

旅拍模块

我的模块

H5混合开发

 收藏

立即使用

Flutter组件大全(超详细)

 收藏

立即使用

资料大全

强2080

职业：程序猿

去主页





0 条评论

下一页

为你推荐

查看更多

