资料大全
2021-03-25 06:56:40 30 举报
AI智能生成
登录查看完整内容
Flutter资料大全
作者其他创作
大纲/内容
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
floatingActionButton
presistentFotterButtons
drawer
(Drawer)
左侧抽屉
enddrawer
右侧抽屉
backgroundColor
resizeToAvoidBottomPadding
顶部Bar
AppBar
侧边栏(抽屉)
Drawer
child
底部导航
BottomNavigationBar
DrawerHeader
decoration
SnackBar
内容
Text
stytle
(TextStyle)
textAlign
overflow
softWrap
RichText
text
(TextSpan)
TextSpan
style
TextField
(InputDecoration)
labelText
labelStyle
hintText
输入为空时提示
controller
(TextEditingController)
textAlignVertical
垂直对齐方式
(TextAlignVertical)
toolbarOptions
长安是弹出菜单
(ToolbarOptions)
showCursor
(bool)
是否显示光标
cursorWith
(int)
cursorRadius
(Radius)
cursorColor
(Color)
obscureText
是否密码框
inputFormatters
限制输入类型
例:
WhitelistingTextInputFormatter(RegExp(\"[a-zA-Z]\"))
事件
onchange
onSubbmitted
onTap
Image
width
height
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风格按钮
(Text)
FlatButton
扁平按钮
建议用TextButton
Radio
单选
value
本身value
groupValue
组值
当相等时则为选中状态
onChanged
RadioList
CheckBox
勾选框
(boolean)
activeColor
矩形区域颜色
checkColor
对勾颜色
CheckboxListTitle
controlAffinity
(ListTileControlAffinity)
subtitle
子标题
secondary
(Icon)
第二图标
Slider
(double)
min
max
divisions
label
inactiveColor
RangeSlider
values
(RangeValues)
labels
Switch
开关组件
activeTrackColor
activeThumbImage
(AssetImage)
Switch和ListTile的组合
LinearProgressIndicator
水平进度指示器
(Color)
valueColor
Divider
滚动容器
ListView
padding
GridView
PageView
DataTable
布局容器
容器组件
Container
内边距
类似css盒子模型
margins
外边距
borders
边框
背景色
ConstrainedBox
设置最大/小宽高
UnconstrainedBox
SizedBox
固定大小
AspectRatio
固定宽高比
FractionallySizedBox
占父组件百分比
LimitedBox
没有父组件约束
固定宽高
Column
垂直列布局
crossAxisAlignment
交叉轴对齐方式
CrossAxisAlignment
.start
开始对齐
结尾留空
.center
中间对齐
两边留空
.end
底部对齐
开头留空
.strectch
拉伸
mainAxisAlignment
子主题
MainAxisAlignment
开始
中间
结束
.spaceEvenly
12间距= 23间距
假设1 2 3 三块内容
.spaceBetween
两边间距=12间距=23间距
.spaceAround
两边间距=12间距/2=23间距/2
mainAxisSize
主轴尺寸
MainAxsSize
默认值
尽可能大
尽可能小
textDirection
TextDirecction
.ltr
同MainAxisAlignment.start
.rtl
同MainAxisAlignment.end
children
Row
水平行布局
属性同Column
Center
Stack
层叠布局
alignment
(StackFit)
IndexStack
index
Wrap
流式布局
direction
(Axis)
(WrapAlignment)
runAlignment
交叉轴上每一行作为一个整体
(TextDirection)
verticalDirection
(VerticalDirection)
Card
ListTitle
titile
leading
Expanded
Flexible
flex
权重
Spacer
修饰
RotatedBox
功能
旋转其他子Widget
RotatedBox和Transform.rotate功能相似,它们都可以对子widget进行旋转变换,但是有一点不同:RotatedBox的变换是在layout阶段,会影响在子widget的位置和大小。
quarterTurns
BoxDecoration
border
borderRadius
margin
ThemeData
主题
primaryColor
textTheme
CircleAvatar
backgroundImage
radius
InputDecoration
框左外图标
prefixIcon
框里左图标
suffixIcon
框里尾部图标
helperText
helperStyle
helperMaxLines
errorText
errorStyle
errorMaxLines
errorBorder
(OutlineInputBorder)
counterText
字数统计显示
fill
是否要用填充色填充
fillColor
enbledBorder
focuseBorder
动画
AlwaysStoppedAnimation
其他
EdgeInsets
all
Colors
Icons
IconData
TextStyle
fontWeight
颜色
fontSize
大小
粗细
FontWeight
w100~w900
.bold
(w700)
fontStyle
斜体
FontStyle
.italic
自定义字体
BoxFit
平铺填充
cover
等比拉伸 直到两边充满
contain
等比拉伸 直到一边充满
fitWidth
fitHeight
none
裁剪与aligment有关
scaleDown
colorBleanMode
repeat
(ImageRepeat)
State
OutlineInputBorder
borderSide
(BorderSide)
(BorderRadius)
BorderSide
BorderRadius
.all
Radius
circular
TextEditingController
dispose()
ToolbarOptions
copy
cut
paste
selectAll
BuildContext
Positioned
left
right
bottom
top
Navigator
路由跳转
常量
TextAlign
.left
.right
.justify
两端对齐
前端对齐
end
末端对齐
TextAlignVertical
同TextAlign
TextOverflow
.ellipsis
省略号结尾
.clip
直接裁剪
.fade
越来越透明
.visible
ListTileControlAffinity
.leaading
勾选框在开头
.tailing
勾选框在结尾
.platform
根据平台确定
ImageRepeat
.repeatX
.repeatY
.repeat
.noRepeat
StackFit
.loose
.expand
AlignmentDirectional
Axis
方向
.vertical
水平方向
WrapAlignment
VerticalDirection
.up
事件处理与通知
文件操作
网络请求
包与插件
国际化
打包发布
项目
Github客户端示例
需求分析
首页模块
banner
可被值的入口
搜索模块
AI语音模块
旅拍模块
我的模块
H5混合开发
收藏
收藏
0 条评论
回复 删除
下一页