Flutter

前言
%title插图%num
Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android 和iOS平台上都可以运行

在学 Futter 前我们应该先学 Dart。 因为 Futter 使用的是 Dart语言。

Flutter 组件库

Container 盒子组件

容器组件（Container）是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget，包含一个子Widget,自身具备如alignment、pading等基础属性，方便布局过程中摆放child。
容器组件是Flutter广泛使用的，在以下场景会用到：

  • 设置宽高：flutter大部分组件不能设置宽高，需要依赖容器
  • 添加背景颜色
  • 添加背景图像
  • 添加内边距、外边距
  • 添加边框、设置圆角
  • 设置child对齐；
  • 设置变换：旋转或者变形

对于 decoration 属性的 BoxDrcoration 组件的配置，可参阅 使用文档

属性名 类型 描述
key Key Container唯一表示符，用于查找更新
width 浮点数 Container 盒子的宽度
height 浮点数 Container 盒子的高度
child Widget Container 中的子级内容 [Widget]
alignment Alignment
  • topCenter 顶部居中对齐
  • topLeft 顶部左对齐
  • topRight 顶部右侧对齐
  • conter 水平垂直居中对齐
  • centerLeft 垂直居中水平居左对齐
  • centerRight 垂直居中水平居右对齐
  • bottomCenter 底部居中对齐
  • bottomLeft 底部居左对齐
  • bottomRight 底部居右对齐
    		•
    color Color 用来设置Container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
    margin Edgelnsets Container 组件与外部其他组件距离
    padding Edgelnsets 内部子级与Container 本身边缘之间距离
    decoration BoxDrcoration 定义背景色、边框、背景图片、圆角渐变的、渐变等(gradient与color只能二选一)
    transform Matrix4 让 Container 组件容易进行一些旋转之类的...(Matrix4.rotationZ(0.2))
    平移 - translate 旋转 - rotate 缩放 - scale 斜切 - skew

    MaterialAPP 入口组件

    MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的html标签，且它自带路由、主题色，title标签 等功能 。 一般该组件下 home会搭配 Scaffold组件完成基本的底层构建
    属性名 类型 描述
    home Widget 应用程序正常启动时首先显示的Widget(如果你指定了home属性，则在routes的路由表中不允许出现/的命名路由)
    title String Strig类型，该属性会在Android应用管理器的App上方显示
    theme ThemeData 主题应用于子控件，Theme(主题)它描述了应用程序的颜色和排版选择
    color color 应用的主要颜色值（primary color），也就是安卓任务管理窗口中所显示的应用颜色
    routes Map<String, WidgetBuilder> 应用的顶级路由表。当我们再使用Navigator.pushNamed进行命名路由的跳转时，会在此路表中进行查找并跳转
    debugShowCheckedModeBanner bool 是否显示左上角调试标记

    Text 文本组件

    文本组件是以字符串形式显示的单一格式，这个文本字符串可以是多行显示也可以是单独一行显示，主要取决于你的布局限制。
    顾名思义，该组件常用于描述文字。在Text 组件之下 还有 TextStyle 组件
    属性名 类型 描述
    textAlign TextAlign 文本对齐方式（center居中，left左对齐，right右对齐，justfy两端对齐）
    textDirection TextDirection 文本方向（ltr从左至右，rtl从右至左）
    softWare bool 是否自动换行（true自动换行，false单行显示，超出屏幕部分默认截断处理）
    overflow TextOverflow 文字超出屏幕之后的处理方式（clip裁剪，fade渐隐，ellipsis省略号）
    textScaleFactor number 字体显示倍率
    maxLines int 文字显示最大行数
    style TextStyle 字体的样式设置

    TextStyle 文本样式组件

    描述文本样式、修饰文本常用组件。一般在Text 组件下调用该组件
    属性名 类型 描述
    decoration TextDecoration 文字装饰线（none没有线，lineThrough删除线，overline上划线，underline下划线）
    decorationColor Color 文字装饰线颜色
    decorationStyle TextDecorationStyle 文字装饰线风格（[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线）
    wordSpacing int 单词间隙（如果是负值，会让单词变得更紧凑）
    letterSpacing int 字母间隙（如果是负值，会让字母变得更紧凑）
    fontStyle FontStyle 文字样式（italic斜体，normal正常体）
    fontSize double 文字大小
    color Color 文字颜色
    fontWeight FontWeight 字体粗细（bold粗体，normal正常体）

    Icon 图标组件

    Flutter 中的图标库，体积小、矢量、可以通过 TextSpan 与字体组件混用，且可以像文本一样改变字体图标的颜色、大小对齐等，图标大全

    属性名 类型 描述
    icons iconData 图标样式
    size number 图标大小
    color Color 图标颜色
    semanticLabel String 语义标签 帮助盲人或者视力有障碍的用户提供语言辅助描述
    textDirection TextDirection icon文字方向 前提需要IconData.matchTextDirection字段设置为true

    Color 颜色组件

    Color 是 Flutter 提供的一个颜色类

    属性名 类型 描述
    ARGB ARGB 直接输入ARGB颜色值修改颜色
    fromARGB ARGB 通过ARGB方法依次输入ARGB各值修改颜色
    formRGBO RGBO 通过RGBO方法依次输入ARGB各值修改颜色
    Colors color 预设颜色 如：Colors.red

    Column 布局组件

    Colomn 中的主轴方向是垂直方向。Column自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示

    属性 类型 说明
    children List 放置多个widgets
    mainAxisAlignment Widget 主轴的排序方式
    MainAxisAlignment.start主轴顶部(默认Y轴左边)
    MainAxisAlignment.end主轴底部(默认Y轴右边)
    MainAxisAlignment.center主轴中间(默认Y轴轴中间)
    MainAxisAlignment.spaceBetween 间距相同 首尾没有间距
    MainAxisAlignment.spaceAround子元素平均充满
    MainAxisAlignment.spaceEvenly间距相同 首尾有间距
    crossAxisAlignment Widget 次轴的排序方式
    CrossAxisAlignment.start次轴的顶部(默认X轴上部)
    CrossAxisAlignment.end次轴的底部(默认X轴下部)
    CrossAxisAlignment.center次轴的中部(默认X轴中间)
    CrossAxisAlignment.stretch子元素宽充满
    mainAxisSize Widget MainAxisSize.min容器空间需要根据内容的大小而撑开的时候用
    MainAxisSize.max则相反默认就是最大可占用的空间
    textBaseline Widget 基线对齐方式
    textDirection Widget TextDirection.ltr排列方式从左到右（X轴）
    TextDirection.ltr排列方式从右到左（X轴）

    Row 布局组件

    Row 中的主轴方向是水平方向的，Row自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示

    属性 类型 说明
    children List 放置多个widgets
    mainAxisAlignment MainAxisAlignment 主轴的排序方式
    start 主轴顶部(默认Y轴左边)
    end 主轴底部(默认Y轴右边)
    center 主轴中间(默认Y轴轴中间)
    spaceBetween 间距相同 首尾没有间距
    spaceAround 子元素平均充满
    spaceEvenly 间距相同 首尾有间距
    crossAxisAlignment CrossAxisAlignment 次轴的排序方式
    start 次轴的顶部(默认X轴上部)
    end 次轴的底部(默认X轴下部)
    center 次轴的中部(默认X轴中间)
    stretch 子元素宽充满
    mainAxisSize MainAxisSiz min 容器空间需要根据内容的大小而撑开的时候用
    max 则相反默认就是最大可占用的空间
    textBaseline TextBaseline 基线对齐方式
    textDirection TextDirection ltr 排列方式从左到右（X轴）
    rtl 排列方式从右到左（X轴）

    Flex 布局组件

    Flex 是弹性布局 它既有 column 效果 也有 row 效果

    属性 类型 说明
    children List 放置多个widgets
    direction Widget 声明主轴方向
    Axis.horizontal(垂直布局)
    Axis.horizontal(水平布局)
    mainAxisAlignment Widget 主轴排列顺序
    MainAxisAlignment.spaceAround(间隔相等平铺)
    MainAxisAlignment.spaceBetween(左右不留空平铺)
    MainAxisAlignment.spaceEvenly(均匀平铺平铺)
    ...
    crossAxisAlignment Widget 声明交叉轴对齐方式
    CrossAxisAlignment.center(默认居中)
    ...
    textDirection Widget 内容水平排列方式
    textDirection: TextDirection.ltr(从前向后)
    textDirection: TextDirection.rtl(从后向前)
    verticalDirection Widget 内容上下排列方式
    VerticalDirection.up(从下向上)
    VerticalDirection.down(从上向下)

    Expanded 可伸缩组件

    类似Container容器组件，但不声明宽则自动占满父级，而不是宽度为 0

    属性 类型 说明
    child widget 声明子组件
    flex int 声明弹性布局所占比例

    Wrap 流式布局组件

    Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式​布局 样式展示

    属性 类型 说明
    direction widget 属性控制布局方向，默认为水平方向，设置方向为垂直代码如下
    direction: Axis.vertical
    spacing int 主轴方向子组件的间距
    runSpacing int 次轴方向子组件的间距
    alignment widget 主轴方向的对齐方式
    WrapAlignment.spaceBetween(左右不留空平铺)
    ...
    runSpacing widget 纵轴方向的对齐方式
    WrapAlignment.spaceEvenly(均匀平铺)
    ...
    textDirection widget 主轴方向上子控件的方向
    取值范围是 ltr 从左到右 和 rtl 从右到左
    textDirection: TextDirection.rtl
    textDirection: TextDirection.ltr
    verticalDirection widget 交叉轴方向上子控件的方向
    VerticalDirection.up
    VerticalDirection.down

    Chip 标签组件

    它可以将一个复杂内容实体展现在一个小块中，如联系人样式展示

    属性名 类型 简介
    avatar Widget 在碎片标签之前显示的小控件
    label Widget 碎片的标签
    labelStyle TextStyle 标签文字样式
    labelPadding EdgeInsetsGeometry 标签文字内间距
    shape ShapeBorder 形状
    clipBehavior Clip 裁剪。 默认Clip.none（不裁剪）
    backgroundColor Color 背景颜色
    padding EdgeInsetsGeometry 内间距
    deleteIcon Widget 添加图标按钮， 必须与onDeleted 配合使用
    onDeleted VoidCallback 图标按钮监听
    deleteIconColor Color deleteIcon的颜色
    deleteButtonTooltipMessage String deleteIcon长按文字提示
    materialTapTargetSize MaterialTapTargetSize 配置点击目标的最小大小
    elevation double 阴影高度
    shadowColor Color 阴影颜色

    Stack 层叠组件

    可以容纳多个组件，以叠加的方式摆放子组件，后者居上。拥有Alignment属性，可以与Positioned组件联合使用，精准并有效摆放。同Android端FramLayout布局相似

    属性名 类型 简介
    children Widget 声明子组件
    alinment Alignment 声明未定位子组件的对齐方式
    topLeft(上左)
    topCenter(上中)
    topRight...(上右)
    textDirection TextDirection 声明未定位子组件的排列顺序
    overflow Overflow 超出Stack时候如何显示
    (默认值) Overflow.clip (截断)
    Overflow.visible (显示)
    fit StackFit 声明未定位子组件的大小
    StackFit.loose (原始大小)
    StackFit.expand (占满父级)

    Positioned 定位子组件

    这个使用控制Widget的位置，通过他可以随意摆放一个组件，有点像绝对布局

    属性名 类型 简介
    child Widget 声明子组件
    top double 基于父级上方的间隔
    left double 基于父级左方的间隔
    right double 基于父级右方的间隔
    bottom double 基于父级下方的间隔
    width double 组件宽度
    height double 组件高度

    Card 卡片组件

    Card 为卡片样式组件，拥有卡片轮廓的特征，因此它具有圆⾓和阴影，这让它 看起来有⽴体感

    属性名 类型 简介
    child Widget 声明子组件
    color Colors 背景色
    shadowColor Colors 阴影颜色
    elevation double 阴影高度
    shape ShapeBorder 边框样式
    margin EdgeInsets 外边距

    button 按钮组件

    Flutter 提供了一系列按钮样式，如 文本按钮(TextButton)、凸起按钮(ElevatedButton)、轮廓按钮(OutlineButton)、图标按钮(lconButton)、按钮组(ButtonBar)、浮动按钮(FloatingActionButton)、回退按钮(BackButton)、关闭按钮(CloseButton)

    自从 Flutter 1.22版本后，它们将外观属性集合为一个 ButtonStyle 非常方便统一控制

    属性名 类型 简介
    onPressed function 点击事件
    color onLongPress 长按事件
    child Text 内容
    style ButtonStyle 按钮样式

    ButtonStyle 按钮样式组件

    为 flutter按钮组件 修改默认样式（大小、颜色、阴影、边框、形状等），MaterialStateProperty 作为它们的样式场景，有 all 和 resolveWith 等

    属性名 类型 简介
    textStyle MaterialStateProperty 按钮文本样式
    shadowColor MaterialStateProperty 按钮阴影
    elevation MaterialStateProperty 按钮阴影高度
    side MaterialStateProperty 按钮边框
    shape MaterialStateProperty 按钮形状
    minimumSize MaterialStateProperty 设置按钮大小
    overlayColor MaterialStateProperty 按下的水波纹效果颜色

    Image 图片组件

    Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式

    Image 的静态函数
    Image.asset – 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。
    Image.network – 用于从网络上显示图片。
    Image.file – 用于从文件里显示图片。
    Image.memory – 用于从内存里（Uint8List）显示图片

    属性名 类型 简介
    alignment AlignmentGeometry 图像边界内对齐图像
    centerSlice Rect 九片图像的中心切片
    color Color 该颜色与每个图像像素混合
    搭配 colorBlendMode
    colorBlendMode BlendMode 用于 color 与此图像结合使用
    fit BoxFit 图像在布局中分配的空间
    gaplessPlayback bool 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）
    image 图片链接 要显示的图像
    matchTextDirection bool 是否在图像的方向上绘制图像
    TextDirection
    repeat ImageRepeat 未充分容器时，是否重复图片
    height double 图像的高度
    width double 图像的宽度

    singleChildScrollView 可滚动组件

    使内容长度高过该滚动组件长度的子组件实现滚动效果的组件

    属性名 类型 简介
    child Widget 子组件
    padding EdgeInsets 内边距
    scrollDirection Axis 滚动方向
    reverse bool 初始滚动位置 (false 头部 / true 尾部)
    physics function 滚动视图的物理特征
    ClampingScrollPhysics: Abdroid 下微光效果
    BouncingScrollPhysics: ios 下弹性效果

    ListView 列表组件

    加载列表的组件 (加载所有 Widgets , 适用于 Widget 较少的场景)， 通常搭配 ListTile组件
     – ListView.builder (按需加载 Widget ,性能比默认构造函数高，适用于 widget 较多的场景)
     – ListView.separated (同 ListView.builder ，但多了分割器)

    属性名 类型 简介
    children Widget 子组件
    scrollDirection Axis 滚动方向
    padding EdgeInsets 内间距
    primary bool 如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动
    itemExtent int [builder()] 确定每一个item的高度 会让item加载更加高效
    itemBuilder (context,index)
    {retust List(index)}    		 [builder()] 子组件列表对象
    itemCount int [builder()] item 数量
    physics function ClampingScrollPhysics() 等
    cacheExtent int 设置预加载的区域

    GridView 网格布局

    用于创建二维网格列表，GridView 创建网格列表有多种方式，常用有以下两种
     – 通过 GridView.count 实现网格布局 列数固定
     – 通过 GridView.builder 实现网格布局 子组件宽度固定

    属性名 类型 简介
    children Widget 子组件
    scrollDirection Axis 滚动方向
    padding EdgeInsets 内间距
    resolve bool 组件反向排序
    crossAxisSpacing double 水平方向的间距
    mainAxisSpacing double 垂直方向的间距
    crossAxisCount int 指定固定列数
    gridDelegate SliverGridDelegateWithFixedCrossAxisCount
    SliverGridDelegateWithMaxCrossAxisExtent    		 指定列数 子组件宽度自适应
    指定子组件宽度 列数自适应

    AlertDialog 提示对话框组件

    与用户进行交互时，出现的弹出框，有确认和取消两个选项
    两个选项供用户选择，点击确认执行操作，点击取消，不执行操作
    通常搭配 showDialog() 使用，如 showDialog( context:context , builder:(build){return AlertDialog(…)} );

    %title插图%num

    属性说明取值
    titleDialog标题Widget
    contentDialog描述内容Widget
    actions可选操作 (Button Widget 按钮)List<Widget>

    DataTable 表格组件

    DataTable 是 Flutter 中的表格
    columns 声明表头列表：DataColumn 表头单元格；
    rows 声明数据列表：DataRow 一行数据、DataCell 数据单元格

    %title插图%num

    属性类型简介
    columnsDataColumn定义表头列
    rowsDataRow声明表格行，里面cells属性为表格列，用 DataCell组件 声明列
    sortColumnIndexint对列 的 索引值 排序
    sortAscendingbool声明升序降序

    CalendarDatePicker 日历选择器

    CalendarDatePicker 是替代 YearPicker、MonthPicker、DayPicker 的新的日期选择控件
    更多相关知识，可查阅 CSDN文档

    %title插图%num

    属性类型简介
    initialDateDateTime@required DateTime 初始化选中日期
    firstDateDateTime@required DateTime 最小可选日期
    lastDateDateTime@required DateTime 最大可选日期
    currentDateDateTimeDateTime 当前选中日期
    onDateChangedfunction(DateTime value)@required 选中日期改变回调函数
    onDisplayedMonthChangedfunction月份改变回调函数
    initialCalendarModeDatePickerModeDatePickerMode.day 日期选择器样式
    selectableDayPredicatefunction筛选日期可不可点回调函数

    showDatePicker() 日期选择器弹框

    showDatePicker、showTimePicker 是 flutter 提供的日期选择器弹框
    更多相关知识，可查阅 CSDN文档

    %title插图%num

    属性类型简介
    contextcontext@required BuildContext，上下文 context
    initialDateDateTime@required DateTime，日历初始化日期 蓝色圆框
    firstDateDateTime@required DateTime，日历开始日期
    lastDateDateTime@required DateTime，日历结束日期
    currentDateDateTimeDateTime 当前日期
    initialEntryModeDatePickerEntryModeDatePickerEntryMode.calendar 与 input 两种，分别为选择器和填写框
    selectableDayPredicatefunction(DateTime dayTime){ return true;} 一个返回 bool 值的函数，自定义哪些可选，下文会详解
    helpTextString左上角文字
    cancelTextString取消按钮文字
    confirmTextString确认按钮文字，上图中 confirmText
    locale-地区设置，以后多语言部分在详解
    useRootNavigatorbool是否使用根导航，默认为 true，官方文档也没做详解，暂时没用到
    routeSettings-路由设置，官方文档也没做详解，暂时没用到
    textDirectionTextDirection文字方向，TextDirection，DatePickerEntryMode.input 模式时，居左或者居右设置
    builderfunction(widget)创建器，和直接创建基本一致，可以定制主题
    initialDatePickerModeDatePickerEntryModeDatePickerMode.day 与 DatePickerMode.year 两种
    errorFormatTextString格式错误是下方提示
    fieldHintTextString输入框默认提示语
    fieldLabelTextString输入框上方提示语
    errorInvalidTextString输入了不在 first 与 last 之间的日期提示语

    TextField 输入框组件

    TextField 是 flutter 输入框组件，组件功能强大，属性比较多。但常规使用比较简单
    更多相关知识，可查阅 CSDN文档

    %title插图%num

    属性类型说明
    controllerTextEditingController控制器，通过它可以获取文本内容，监听编辑文本事件，大多数情况下我们需要主动提供一个控制器
    focusNodeInputDecoration焦点控制
    decorationInputDecoration用于控制文本的外观，如提示文本、背景色、边框等
    keyboardTypeTextInputType用于设置输入框的默认键盘类型
    textInputActionTextInputAction键盘动作图标按钮，他是一个枚举值
    styleTextStyle正在编辑的文本样式
    textAlignTextAlign文本框的在水平方向的对齐方式
    autofocusbool是否自动获取焦点
    obscureTextbool是否隐藏正在编辑的文本，用于密码输入场景
    maxLinesint输入框的最大行数
    maxlengthint文本框的最大长度
    maxLengthEnforcementMaxLengthEnforcement当文本长度超出文本框长度时如何处理
    toolbarOptionsToolbarOptions长按时出现的选项
    onChangeValueChanged<String>输入框改变时候的回调函数，也可以通过controller来监听
    onEditingCompleteVoidCallback输入完后触发的回调函数，不接受参数
    onSubmittedValueChanged<String>接收ValueChanged<String>的参数
    inputFormattersList<TextInputFormatter>用于指定输入格式,可以用于检验格式
    enablebool为bool时，输入框将变为禁用状态
    focusedBorderUnderlineInputBorder输入框 获取焦点时-高亮的边框样式
    enabledBorderUnderlineInputBorder输入框 默认边框样式
    cursorWidth、cursorRadius和cursorColorColors这三个属性是用于自定义输入框光标宽度、圆角和颜色

    Hero 动画组件

    Hero动画实现了元素共享功能，简单来说：
    Hero动画就是在路由切换时，有一个共享的Widget可以在新旧路由间切换，由于共享的Widget在新旧路由页面上的位置、
    外观可能有所差异，所以在路由切换时会逐渐过渡，这样就会产生一个Hero动画。

    属性类型说明
    tagobjectHero控件的一个标签，用来判定唯一性，前后两个路由页Hero的tag必须相同
    childwidget子组件 通常为 Image组件

    GestureDetector 手势交互组件

    GestureDetector在Flutter中负责处理跟用户的简单手势交互，GestureDetector控件没有图像展示，只是检测用户输入的手势，
    并作出相应的处理，包括点击、拖动和缩放。许多控件使用GestureDetector为其他控件提供回调，比如IconButton、RaisedButton和FloatingActionButton控件有onPressed回调。

    当用户点击控件时触发回调，当用户点击控件时触发回调 更多内容

    属性类型说明
    onTapfunction单击事件的回调函数
    onDoubleTap function 用户快速连续两次在同一位置轻敲屏幕
    onLongPress function 指针在相同位置长时间保持与屏幕接触
    childwidget需要绑定交互事件的子组件
    第三方组件
    如若在运行第三方组件中遇到 Error: Cannot run with sound null safety, because the following dependencies 报错，

    该错误在Flutter中引入第三方库报错Cannot run with sound null safety, because the following dependencies。这是出现了don’t support null safe的问题，因为在Flutter2中使用了null safety（空安全）技术，如果出现null,就会报错。这种安全机制大大减少了null error。解决办法如下： 
    				
					在终端运行
flutter run --no-sound-null-safety
    自定义字体

    步骤1 下载并导入字体 并放置在步骤2 的 asset 参数描述的自定义位置

    谷歌字体

    步骤2 在 pubspec.yaml 中声明字体

    				
					  fonts:
   - family: ZCOOLKuaiLe
     fonts:
       - asset: fonts/Regular/ZCOOLKuaiLe-Regular.ttf
         weight: 300
         style: italic

    步骤3 在 MaterialApp组件中 引用（对于全局的引用）

    				
					MaterialApp(
      // 主题
      theme: ThemeData(
        // 自定义字体
        fontFamily: 'ZCOOLKuaiLe',
      ),
    );

    步骤3 在 TextStyle组件 中引用 （对于局部的引用）

    				
					Text(
          '我是初号机',
          // 文本方向：居左
          textAlign: TextAlign.left,
          // 文本溢出隐藏:省略号
          overflow: TextOverflow.ellipsis,
          // 文本最大行数
          maxLines: 3,
          // 文本样式
          style: TextStyle(
            // 文字大小
            fontSize: 30.0,
            // 文字颜色
            color: Colors.blue,
            // 文字装饰线 删除线
            decoration: TextDecoration.lineThrough,
            // 文字装饰线颜色
            decorationColor: Colors.yellow,
            // 文字装饰线样式
            decorationStyle: TextDecorationStyle.dotted,
            // 字体粗细
            fontWeight: FontWeight.w800,
            // 文字样式 倾斜
            fontStyle: FontStyle.italic,
            // 文字字体
            fontFamily: 'ZCOOLKuaiLe',
          ),
    布局结构

    flutter 是按照组件嵌套组件的方式完成布局，左侧为flutter的底层组件 Scaffold组件 完成布局。右侧为 常规 Flutter组件 的嵌套方式

    %title插图%num
    %title插图%num
    安卓权限

    * 目前仅作为扩展知识 *

    %title插图%num

    权限分配的位置在：
    项目目录\android\app\src\main\AndroidManifest.xml

    				
					<!--允许网络请求-->
<uses-permission android:name="android.permission.INTERNET"/>
<!--允许不安全网站(http) 的请求-->
android.usesCleartextTraffic='true'