# widget

name: AnimatedContainer
nameCN: 容器动画
linkWidget: 1
info:
集合alignment、padding、color、decoration、width、height、constraints、margin、transform于一身，这些属性皆可动画，可指定时长和曲线，有动画结束事件。


# node

name: RadioListTile需要一个泛型T
subtitle:
【value】 : 条目对象  【T】
【groupValue】 : 选中对象  【T】
【selected】: 是否选中   【bool】
【secondary】: 右侧组件   【Widget】
【title】: 中间上组件   【Widget】
【subtitle】: 中间下组件   【Widget】
【onChanged】: 切换事件   【Function(T)】

code:
import 'package:flutter/material.dart';
class ItemBean {
  final String title;
  final String subTitle;
  final String imgUrl;

  ItemBean(this.title, this.subTitle, this.imgUrl);
}

class CustomRadioListTile extends StatefulWidget {
  @override
  _CustomRadioListTileState createState() => _CustomRadioListTileState();
}

class _CustomRadioListTileState extends State<CustomRadioListTile> {
  final Map<ItemType, ItemBean> languages = {
    ItemType.java:
    ItemBean("Java", "曾经世界上最流行的语言", "assets/images/java.webp"),
    ItemType.kotlin:
    ItemBean("Kotlin", "未来世界上最流行的语言", "assets/images/kotlin.webp"),
    ItemType.dart:
    ItemBean("Dart", "世界上最优雅的语言", "assets/images/dart.webp"),
  };
  var _type = ItemType.java;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(11),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          children: languages.keys
              .map((type) => RadioListTile<ItemType>(
            value: type,
            groupValue: _type,
            title: Text(languages[type].title),
            subtitle: Text(languages[type].subTitle),
            selected: _type == type,
            secondary: CircleAvatar(
              backgroundImage: AssetImage(languages[type].imgUrl),
            ),
            onChanged: (type) => setState(() => _type = type),
          ))
              .toList()),
    );
  }
}


name: CircleAvatar的表现
subtitle:
【radius】 : 半径  【double】
【backgroundImage】 : 图片资源  【ImageProvider】
【foregroundColor】: 前景色   【Color】
【backgroundColor】: 背景色   【Color】
【minRadius】: 最小半径   【double】
【maxRadius】: 最大半径   【double】
【child】: 孩子组件   【Child】

code:
import 'package:flutter/material.dart';
class CustomCircleAvatar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: 50,
      backgroundImage: AssetImage("assets/images/wy_200x300.webp"),
      foregroundColor: Colors.white,
      child: Icon(
        Icons.check,
        size: 50,
      ),
    );
  }
}


name: RadioListTile选中色和密排
subtitle: 【activeColor】 : 选中时颜色 【Color】 【dense】: 是否密排 【bool】
code:
import 'package:flutter/material.dart';
class ItemBean {
  final String title;
  final String subTitle;
  final String imgUrl;

  ItemBean(this.title, this.subTitle, this.imgUrl);
}

class DenseRadioListTile extends StatefulWidget {
  @override
  _DenseRadioListTileState createState() => _DenseRadioListTileState();
}

class _DenseRadioListTileState extends State<DenseRadioListTile> {
  final Map<ItemType, ItemBean> languages = {
    ItemType.java:
    ItemBean("Java", "曾经世界上最流行的语言", "assets/images/java.webp"),
    ItemType.kotlin:
    ItemBean("Kotlin", "未来世界上最流行的语言", "assets/images/kotlin.webp"),
    ItemType.dart:
    ItemBean("Dart", "世界上最优雅的语言", "assets/images/dart.webp"),
  };
  var _type = ItemType.java;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(11),
      child: Column(
          mainAxisSize: MainAxisSize.min,
          children: languages.keys
              .map((type) => RadioListTile<ItemType>(
            value: type,
            groupValue: _type,
            title: Text(languages[type].title),
            activeColor: Colors.orangeAccent,
            dense: true,
            subtitle: Text(languages[type].subTitle),
            selected: _type == type,
            secondary: CircleAvatar(
              backgroundImage: AssetImage(languages[type].imgUrl),
            ),
            onChanged: (type) => setState(() => _type = type),
          ))
              .toList()),
    );
  }
}


name: mini属性
subtitle: 【mini】: 是否是迷你 【bool】
code:
import 'package:flutter/material.dart';
class MiniFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      Colors.red: Icons.add,
      Colors.blue: Icons.bluetooth,
      Colors.green: Icons.android,
    };
    return Wrap(
        spacing: 20,
        children: data.keys
            .map((e) => FloatingActionButton(
          heroTag:  e.toString()+"b",
          onPressed: () {},
          backgroundColor: e,
          mini: true,
          foregroundColor: Colors.white,
          child: Icon(data[e]),
          tooltip: "android",
          elevation: 5, //z-阴影盖度
        ))
            .toList());
  }
}


name: FloatingActionButton点击事件
subtitle:
【child】: 子组件   【Widget】
【tooltip】: 长按时提示文字   【String】
【backgroundColor】: 背景色   【Color】
【foregroundColor】: 前景色   【Color】
【elevation】: 影深   【double】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/material.dart';
class CustomFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      Colors.red: Icons.add,
      Colors.blue: Icons.bluetooth,
      Colors.green: Icons.android,
    };
    return Wrap(
        spacing: 20,
        children: data.keys
            .map((e) => FloatingActionButton(
          heroTag: e.toString()+"a",
          onPressed: () {},
          backgroundColor: e,
          foregroundColor: Colors.white,
          child: Icon(data[e]),
          tooltip: "android",
          elevation: 5, //z-阴影盖度
        ))
            .toList());
  }
}


name: shape属性
subtitle: 【shape】: 形状 【ShapeBorder】
code:
import 'dart:math';
import 'package:flutter/material.dart';
import '../../../../app/utils/pather.dart';
class ShapeFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      Colors.red: Icons.add,
      Colors.blue: Icons.bluetooth,
      Colors.green: Icons.android,
    };
    return Wrap(
        spacing: 20,
        children: data.keys
            .map((e) => FloatingActionButton(
          heroTag:  e.toString()+"c",
          onPressed: () {},
          backgroundColor: e,
          shape: StarBorder(),
          foregroundColor: Colors.white,
          child: Icon(data[e]),
          tooltip: "android",
          elevation: 5,
        ))
            .toList());
  }
}

/// 边线形状类
class StarBorder extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    return Pather.create.nStarPath(20, 25, 25 * cos((360 / 9 / 2) * pi / 180),
        dx: rect.height / 2, dy: rect.width / 2);
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) {
    return null;
  }
}


name: Drawer基本使用
subtitle: 【child】 : 子组件 【Widget】 【elevation】 : 影深 【double】
code:
import 'package:flutter/material.dart';
class CustomDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Unit'),
        ),
        drawer: Drawer(
          elevation: 3,
          child: _buildChild(),
        ),
      ),
    );
  }

  Widget _buildChild() => ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/images/caver.webp'),
                  fit: BoxFit.cover),
            ),
            child: Text(
              '张风捷特烈',
              style: TextStyle(fontSize: 24, color: Colors.white, shadows: [
                Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)
              ]),
            ),
          ),
          ListTile(
            leading: Icon(
              Icons.star,
              color: Colors.blue,
            ),
            title: Text('我的收藏'),
          ),
          ListTile(
            leading: Icon(
              Icons.palette,
              color: Colors.orangeAccent,
            ),
            title: Text('我的绘画'),
          ),
          ListTile(
            leading: Icon(
              Icons.insert_drive_file,
              color: Colors.green,
            ),
            title: Text('我的文件'),
          ),
        ],
      );
}


name: DayPicker基本使用
subtitle:
      
【selectedDate】 : 选中日期   【DateTime】
【currentDate】 : 当前日期   【DateTime】
【firstDate】 : 最前日期限制   【DateTime】
【lastDate】 : 最后日期限制   【DateTime】
【displayedMonth】 : 当前展示的月份   【DateTime】
【onChanged】 : 点击回调  【Function(DateTime)】

code:
import 'package:flutter/material.dart';
class CustomDayPicker extends StatefulWidget {
  @override
  _CustomDayPickerState createState() => _CustomDayPickerState();
}

class _CustomDayPickerState extends State<CustomDayPicker> {

  DateTime _date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 350,
      child: DayPicker(
          selectedDate: _date,
          currentDate: DateTime.now(),
          onChanged: (date){
           setState(() => _date = date);
          },
          firstDate:  DateTime(2018),
          lastDate: DateTime(2030),
          displayedMonth: DateTime.now()
      ),
    );
  }
}


name: OutlineButton点击事件
subtitle:
【textColor】: 子组件文字颜色   【Color】
【splashColor】: 水波纹颜色   【Color】
【highlightColor】: 长按高亮色   【Color】
【highlightedBorderColor】: 高亮时框色   【Color】
【child】: 子组件   【Widget】
【padding】: 内边距   【EdgeInsetsGeometry】
【borderSide】: 边线   【BorderSide】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/material.dart';
class CustomOutlineButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlineButton(//边线按钮
      onPressed: () {},
      child: Text("OutlineButton"),
      padding: EdgeInsets.all(8),
      splashColor: Colors.green,
      highlightColor: Colors.orangeAccent,
      highlightedBorderColor: Colors.grey,
      textColor: Color(0xff000000),
      borderSide: BorderSide(color: Color(0xff0A66F8), width: 2),
    );
  }
}


name: Listener基本事件
subtitle:
      
【child】 : 子组件   【Widget】
【onPointerDown】 : 按下事件   【Function(PointerDownEvent)】
【onPointerMove】 : 移动事件   【Function(PointerMoveEvent)】
【onPointerMove】 : 抬起事件   【Function(PointerUpEvent)】
【onPointerCancel】 : 取消事件   【Function(PointerUpEvent)】

code:
import 'package:flutter/material.dart';
class CustomListener extends StatefulWidget {
  @override
  _CustomListenerState createState() => _CustomListenerState();
}

class _CustomListenerState extends State<CustomListener> {
  var _info = '';

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerDown: (detail) => setState(() => _info = detail.toString()),
      onPointerMove: (detail) => setState(() => _info = detail.toString()),
      onPointerUp: (detail) => setState(() => _info = detail.toString()),
      onPointerCancel: (detail) => setState(() => _info = detail.toString()),

      child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 300 * 0.618,
        color: Colors.grey.withAlpha(33),
        child: Text(
          _info,
          style: TextStyle(fontSize: 16, color: Colors.blue),
        ),
      ),
    );
  }
}


name: PositionedDirectional基本使用
subtitle:
      
【child】 : 组件   【Widget】
【top】 : 到父顶距离   【double】
【end】 : 到父右距离   【double】
【start】 : 到父左距离   【double】
【bottom】 : 到父底距离   【double】

code:
import 'package:flutter/material.dart';
class CustomPositionedDirectional extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
        width: 200,
        height: 120,
        color: Colors.grey.withAlpha(33),
        child: Stack(
          children: <Widget>[
            yellowBox,
            redBox,
            PositionedDirectional(top: 20, start: 20, child: greenBox),
            PositionedDirectional(
              child: cyanBox,
              bottom: 10,
              end: 10,
            )
          ],
        ));
  }
}


name: 可以通过shape属性实现裁切效果
subtitle: 【shape】 : 形状 【ShapeBorder】 【margin】: 外边距 【double】 【color】: 颜色 【Color】 【child】: 孩子 【Widget】
code:
import 'package:flutter/material.dart';
import '../../../../app/utils/pather.dart';
class ShapeCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Color(0xffB3FE65),
      elevation: 6,
      shape: StarShapeBorder(),
      child: Container(
        alignment: Alignment.center,
        width: 100,
        height: 100,
        child: Text("Card", style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

class StarShapeBorder extends ShapeBorder {
  @override
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) =>
      Pather.create.nStarPath(9, 50, 40, dx: 50, dy: 50);

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
  }

  @override
  ShapeBorder scale(double t) {
    return null;
  }
}


name: Card可以让一个组件卡片化
subtitle: 【elevation】 : 影深 【double】 【margin】: 外边距 【double】 【color】: 颜色 【Color】 【child】: 孩子 【Widget】
code:
import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Color(0xffB3FE65),
      elevation: 4,
      margin: EdgeInsets.all(10),
      child: Container(
        alignment: Alignment.topLeft,
        width: 200,
        height: 0.618*200,
        margin: EdgeInsets.all(10),
        child: Text("Card", style: TextStyle(fontSize: 20)),
      ),
    );
  }
}


name: PreferredSize的转化使用
subtitle: 【PreferredSize将普通组件转化为PreferredSizeWidget
code:
import 'package:flutter/material.dart';
class AdapterPreferredSize extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150),
          child: AppBar(
            title: Text('PreferredSize'),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(40),
              child: Container(
                height: 40,
                color: Colors.orange,
              ),
            ),
          ),
        ),
      ),
    );
  }
}


name: PreferredSize调整AppBar高度
subtitle: 【preferredSize】 : 尺寸 【Size】
code:
import 'package:flutter/material.dart';
class CustomPreferredSize extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(150),
          child: AppBar(
            title: Text('PreferredSize'),
          ),
        ),
      ),
    );
  }
}


name: ButtonBar边距和高
subtitle: 【buttonPadding】: 内边距 【EdgeInsetsGeometry】 【buttonHeight】: 高 【double】
code:
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class PaddingButtonBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      alignment: MainAxisAlignment.center,
      buttonHeight: 40,
      buttonPadding: EdgeInsets.only(left: 15,right: 15),
      children: <Widget>[
        RaisedButton(
            color: Colors.blue,
            child: Text("Raised"),
            onPressed: () => DialogAbout.show(context)),
        OutlineButton(
            child: Text("Outline"),
            onPressed: () => DialogAbout.show(context)),
        FlatButton(
          color: Colors.blue,
          onPressed: () => DialogAbout.show(context),
          child: Text("Flat"),
        )
      ],
    );
  }
}


name: ButtonBar对齐方式
subtitle: 【alignment】: 对齐方式 【MainAxisAlignment】 【children】: 子组件集 【List<Widget>】
code:
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class CustomButtonBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      alignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            color: Colors.blue,
            child: Text("Raised"),
            onPressed: () => DialogAbout.show(context)),
        OutlineButton(
            child: Text("Outline"),
            onPressed: () => DialogAbout.show(context)),
        FlatButton(
          color: Colors.blue,
          onPressed: () => DialogAbout.show(context),
          child: Text("Flat"),
        )
      ],
    );
  }
}


name: GestureDetector基本事件
subtitle:
      
【child】 : 子组件   【Widget】
【onTap】 : 点击事件   【Function()】
【onDoubleTap】 : 双击事件   【GestureTapCallback】
【onLongPress】 : 长按事件   【GestureLongPressCallback】

code:
import 'package:flutter/material.dart';
class CustomGestureDetector extends StatefulWidget {
  @override
  _CustomGestureDetectorState createState() => _CustomGestureDetectorState();
}

class _CustomGestureDetectorState extends State<CustomGestureDetector> {
  var _info = '';

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _info = 'onTap'),
      onDoubleTap: () => setState(() => _info = 'onDoubleTap'),
      onLongPress: () => setState(() => _info = 'onLongPress'),
      child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 300 * 0.4,
        color: Colors.grey.withAlpha(33),
        child: Text(
          _info,
          style: TextStyle(fontSize: 18, color: Colors.blue),
        ),
      ),
    );
  }
}


name: GestureDetector详情信息
subtitle:
      
【onTapDown】 : 按下回调   【GestureTapDownCallback】
【onTapUp】 : 点击抬起回调   【GestureTapUpCallback】
【onTapCancel】 : 点击取消   【GestureTapCancelCallback】

code:
import 'package:flutter/material.dart';
class TapGestureDetector extends StatefulWidget {
  @override
  _TapGestureDetectorState createState() => _TapGestureDetectorState();
}

class _TapGestureDetectorState extends State<TapGestureDetector> {
  var _info = '';

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (detail) => setState(() => _info =
      'onTapDown:\n相对落点:${detail.localPosition}\n绝对落点:${detail.globalPosition}'),
      onTapUp: (detail) => setState(() => _info =
      'onTapUp:\n相对落点:${detail.localPosition}\n绝对落点:${detail.globalPosition}'),
      onTapCancel: () => setState(() => _info = 'onTapCancel'),
      child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 300 * 0.618,
        color: Colors.grey.withAlpha(33),
        child: Text(
          _info,
          style: TextStyle(fontSize: 18, color: Colors.blue),
        ),
      ),
    );
  }
}


name: GestureDetector的Pan事件
subtitle:
      
【onPanDown】 : 按下回调   【GestureDragDownCallback】
【onPanEnd】 : 拖动结束   【GestureDragEndCallback】
【onPanStart】 : 开始拖动   【GestureDragStartCallback】
【onPanUpdate】 : 拖动更新   【GestureDragUpdateCallback】
【onPanCancel】 : 拖动取消   【GestureDragCancelCallback】

code:
import 'package:flutter/material.dart';
class PanGestureDetector extends StatefulWidget {
  @override
  _PanGestureDetectorState createState() => _PanGestureDetectorState();
}

class _PanGestureDetectorState extends State<PanGestureDetector> {
  var _info = '';

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanDown: (detail) => setState(() => _info =
      'onPanDown:\n相对落点:${detail.localPosition}\n绝对落点:${detail.globalPosition}'),
      onPanEnd: (detail) => setState(() => _info =
      'onPanEnd:\n初速度:${detail.primaryVelocity}\n最终速度:${detail.velocity}'),
      onPanUpdate: (detail) => setState(() => _info =
      'onPanUpdate:\n相对落点:${detail.localPosition}\n绝对落点:${detail.globalPosition}'),
      onPanStart: (detail) => setState(() => _info =
      'onPanStart:\n相对落点:${detail.localPosition}\n绝对落点:${detail.globalPosition}'),
      onPanCancel: () => setState(() => _info = 'onTapCancel'),
      child: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          width: 300,
          height: 300 * 0.618,
          color: Colors.grey.withAlpha(33),
          child: Text(
            _info,
            style: TextStyle(fontSize: 18, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}


name: ActionChip的普通表现如下
subtitle: 【onPressed】: 点击事件 【Function】 【pressElevation】: 按下时影深 【double】 其他属性同Chip组件，无右侧组件。
code:
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class CustomActionChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ActionChip(
      padding: EdgeInsets.all(5),
      labelPadding: EdgeInsets.all(3),
      label: Text("This is a ActionChip."),
      backgroundColor: Colors.grey.withAlpha(66),
      avatar: Image.asset("assets/images/icon_head.webp"),
      shadowColor: Colors.orangeAccent,
      elevation: 3,
      pressElevation: 5,
      onPressed: ()=> DialogAbout.show(context),
    );
  }
}


name: RaisedButton点击事件
subtitle:
【color】: 颜色   【Color】
【splashColor】: 水波纹颜色   【Color】
【elevation】: 影深   【double】
【child】: 子组件   【Widget】
【textColor】: 子组件文字颜色   【Color】
【highlightColor】: 长按高亮色   【Color】
【padding】: 内边距   【EdgeInsetsGeometry】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/material.dart';
class CustomRaisedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.blue,
      splashColor: Colors.green,
      onPressed: () {},
      child: Text("RaisedButton"),
      textColor: Color(0xffFfffff),
      padding: EdgeInsets.all(8),
      elevation: 5,
      highlightColor: Color(0xffF88B0A),
    );
  }
}


name: MaterialBanner两行的使用
subtitle:
【contentTextStyle】: 中间位置样式   【TextStyle】
【leadingPadding】: 左侧组件边距    【EdgeInsetsGeometry】
当尾部组件数量大于1,该组件结构为左中下。

code:
import 'package:flutter/material.dart';
class MaterialBannerDemoTwo extends StatelessWidget {
  final info =
      'A banner displays an important, succinct message, and provides actions for users to address. '
      'A user action is required for itto be dismissed.';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[MaterialBanner(
        content: Text(
          info,
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
        leading: Icon(Icons.warning, color: Colors.yellow),
        padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2),
        leadingPadding:EdgeInsetsDirectional.only(end: 16.0) ,
        actions: <Widget>[
          RaisedButton(
            color: Colors.white,
            onPressed: () {},
            child: Text(
              'I KNOW',
              style: TextStyle(
                  color: Colors.purple,
                  fontWeight: FontWeight.bold,
                  fontSize: 14),
            ),
          ),

          RaisedButton(
            color: Colors.white,
            onPressed: () {},
            child: Text(
              'I IGNORE',
              style: TextStyle(
                  color: Colors.purple,
                  fontWeight: FontWeight.bold,
                  fontSize: 14),
            ),
          ),
        ],
      )],
    );
  }

}


name: MaterialBanner一行的使用
subtitle:
【content】 : 中间组件   【Widget】
【leading】: 左侧组件   【Widget】
【actions】: 右侧组件列表   【List<Widget>】
【padding】: 内边距   【EdgeInsetsGeometry】
【forceActionsBelow】: 是否按钮在下方   【bool】
【backgroundColor】: 背景色    【Color】

code:
import 'package:flutter/material.dart';
class MaterialBannerDemo extends StatelessWidget {
  final info =
      'Welcome to Flutter Unit!';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[MaterialBanner(
        content: Text(
          info,
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
        leading: Icon(Icons.info, color: Colors.lightBlueAccent),
        padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0),
        forceActionsBelow: false, // 默认false
        actions: <Widget>[
          Text(
            'I KNOW',
            style:TextStyle(
                color: Colors.orange,
                fontWeight: FontWeight.bold,
                fontSize: 14) ,
          )
        ],
      )],
    );
  }

}


name: SingleChildScrollView基本使用
subtitle: 【child】 : 子组件 【Widget】 【padding】 : 内边距 【EdgeInsetsGeometry】
code:
import 'package:flutter/material.dart';
class CustomSingleChildScrollView extends StatelessWidget {
  final data = <Color>[
    Colors.blue[50],
    Colors.blue[100],
    Colors.blue[200],
    Colors.blue[300],
    Colors.blue[400],
    Colors.blue[500],
    Colors.blue[600],
    Colors.blue[700],
    Colors.blue[800],
    Colors.blue[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          children: data
              .map((color) => Container(
            alignment: Alignment.center,
            height: 50,
            color: color,
            child: Text(
              colorString(color),
              style: TextStyle(color: Colors.white, shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(.5, .5),
                    blurRadius: 2)
              ]),
            ),
          ))
              .toList(),
        ),

      ),
    );
  }
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SingleChildScrollView滑动方向
subtitle: 【scrollDirection】 : 滑动方向 【Axis】 【reverse】 : 是否反向 【Axis】
code:
import 'package:flutter/material.dart';
class DirectionSingleChildScrollView extends StatelessWidget {
  final data = <Color>[
    Colors.blue[50],
    Colors.blue[100],
    Colors.blue[200],
    Colors.blue[300],
    Colors.blue[400],
    Colors.blue[500],
    Colors.blue[600],
    Colors.blue[700],
    Colors.blue[800],
    Colors.blue[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        reverse: true,
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Row(
          children: data
              .map((color) => Container(
            alignment: Alignment.center,
            width: 90,
            color: color,
            child: Text(
              colorString(color),
              style: TextStyle(color: Colors.white, shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(.5, .5),
                    blurRadius: 2)
              ]),
            ),
          ))
              .toList(),
        ),

      ),
    );
  }
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: ToggleButtons多选切换
subtitle: 可以控制状态转化的逻辑来形成不同的效果。
code:
import 'package:flutter/material.dart';
class ProToggleButtons extends StatefulWidget {
  @override
  _ProToggleButtonsState createState() => _ProToggleButtonsState();
}

class _ProToggleButtonsState extends State<ProToggleButtons> {
  var _isSelected = [false, false, false];
  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      children: <Widget>[
        Icon(Icons.skip_previous),
        Icon(Icons.pause),
        Icon(Icons.skip_next),
      ],
      borderWidth: 1,
      borderColor: Colors.blue,
      selectedBorderColor: Colors.orangeAccent,
      splashColor: Colors.purple.withAlpha(66),
      borderRadius: BorderRadius.circular(10),
      selectedColor: Colors.red,
      fillColor: Colors.green.withAlpha(11),
      isSelected: _isSelected,
      onPressed: (value) => setState(() {
        _isSelected[value] = !_isSelected[value];
      }),
    );
  }
}


name: ToggleButtons颜色属性
subtitle:
【borderColor】: 边线色   【Color】
【selectedBorderColor】: 选中边线色   【Color】
【selectedColor】: 选中时组件色   【Color】
【fillColor】: 选中时填充色   【Color】
【splashColor】: 水波纹色   【Color】

code:
import 'package:flutter/material.dart';
class ColorToggleButtons extends StatefulWidget {
  @override
  _ColorToggleButtonsState createState() => _ColorToggleButtonsState();
}

class _ColorToggleButtonsState extends State<ColorToggleButtons> {
  var _isSelected = [true, false, false];
  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      children: <Widget>[
        Icon(Icons.skip_previous),
        Icon(Icons.pause),
        Icon(Icons.skip_next),
      ],
      borderWidth: 1,
      borderColor: Colors.orangeAccent,
      selectedBorderColor: Colors.blue,
      splashColor: Colors.purple.withAlpha(66),
      borderRadius: BorderRadius.circular(10),
      selectedColor: Colors.red,
      fillColor: Colors.green.withAlpha(11),
      isSelected: _isSelected,
      onPressed: (value) => setState(() {
        _isSelected = _isSelected.map((e) => false).toList();
        _isSelected[value] = true;
      }),
    );
  }
}


name: ToggleButtons单选切换
subtitle:
【children】: 子组件集   【List<Widget>】
【borderWidth】: 边线宽   【double】
【borderRadius】: 圆角   【BorderRadius】
【isSelected】: 是否选中集   【List<bool>】
【onPressed】: 点击事件   【Function(int)】

code:
import 'package:flutter/material.dart';
class CustomToggleButtons extends StatefulWidget {
  @override
  _CustomToggleButtonsState createState() => _CustomToggleButtonsState();
}

class _CustomToggleButtonsState extends State<CustomToggleButtons> {
  var _isSelected = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      children: <Widget>[
        Icon(Icons.skip_previous),
        Icon(Icons.pause),
        Icon(Icons.skip_next),
      ],
      borderWidth: 1,
      borderRadius: BorderRadius.circular(10),
      isSelected: _isSelected,
      onPressed: (value) => setState(() {
        _isSelected = _isSelected.map((e) => false).toList();
        _isSelected[value] = true;
      }),
    );

  }
}


name: replacement可在隐藏时进行占位
subtitle: 【replacement】 : 隐藏时的占位组件 【Widget】
code:
import 'package:flutter/material.dart';
class ReplacementVisibility extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: <Widget>[
        _buildVisibility(true),
        _buildVisibility(false),
      ],
    );
  }

  _buildVisibility(bool visible) {
    var box = Container(
      height: 30,
      width: 30,
      color: Colors.blue,
    );
    return Container(
      width: 150,
      height: 150 * 0.618,
      color: Colors.cyanAccent.withAlpha(33),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          box,
          Visibility(
              visible: visible,
              replacement: Container(
                alignment: Alignment.center,
                height: 80 * 0.618,
                width: 80,
              ),
              child: Container(
                alignment: Alignment.center,
                height: 80 * 0.618,
                width: 80,
                color: Colors.red,
                child: Text(
                  "visible\ntrue",
                  style: TextStyle(fontSize: 20),
                ),
              )),
          box,
        ],
      ),
    );
  }
}


name: 根据visible控制内部子组件的显隐情况
subtitle: 【visible】 : 是否显示 【bool】 【child】: 孩子 【Widget】 默认孩子隐藏时会失去原来所在区域。
code:
import 'package:flutter/material.dart';
class CustomVisibility extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: <Widget>[
        _buildVisibility(true),
        _buildVisibility(false),
      ],
    );
  }

  _buildVisibility(bool visible) {
    var box = Container(
      height: 30,
      width: 30,
      color: Colors.blue,
    );
    return Container(
      width: 150,
      height: 150 * 0.618,
      color: Colors.cyanAccent.withAlpha(33),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          box,
          Visibility(
              visible: visible,
              child: Container(
                alignment: Alignment.center,
                height: 80 * 0.618,
                width: 80,
                color: Colors.red,
                child: Text(
                  "visible\ntrue",
                  style: TextStyle(fontSize: 20),
                ),
              )),
          box,
        ],
      ),
    );
  }
}


name: Title基本使用
subtitle: 【title】 : 名称 【int】 【color】: 颜色 【Color】 【child】: 子组件 【Widget】
code:
import 'package:flutter/material.dart';
class TitleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Title(
          title: '张风捷特烈',
          color: Color(0xFF9C27B0),
          child: Center(child: Text('应用菜单栏中该页的名称为: 张风捷特烈'))),
    );
  }
}


name: 监听ScrollUpdateNotification
subtitle: 在滑动过程中对滑动数据进行回调,你可以获取大量数据来进行操作。
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NotificationListenerUpdate extends StatefulWidget {
  @override
  _NotificationListenerUpdateState createState() =>
      _NotificationListenerUpdateState();
}

class _NotificationListenerUpdateState
    extends State<NotificationListenerUpdate> {
  final data = List<String>.generate(30, (i) => '第${i + 1}条');

  var _info = '';

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Stack(
        children: [
          Positioned(child: Padding(
            padding: const EdgeInsets.only(left:8.0),
            child: Text(_info),
          )),
          NotificationListener<ScrollUpdateNotification>(
              onNotification: _onNotification,
              child: CupertinoScrollbar(
                child: ListView.separated(
                  itemBuilder: _buildItem,
                  itemCount: data.length,
                  separatorBuilder: (_, __) => Divider(
                    height: 5,
                  ),
                ),
              )),

        ],
      ),
    );
  }

  bool _onNotification(ScrollUpdateNotification notification) {

    setState(() {
      _info = 'axis------【${notification.metrics.axis}】------\n'
          'pixels------【${notification.metrics.pixels}】------\n'
          'atEdge------【${notification.metrics.atEdge}】------\n'
          'axisDirection------【${notification.metrics.axisDirection}】------\n'
          'extentInside------【${notification.metrics.extentInside}】------\n'
          'outOfRange------【${notification.metrics.outOfRange}】------\n'
          'minScrollExtent------【${notification.metrics.minScrollExtent}】------\n'
          'maxScrollExtent------【${notification.metrics.maxScrollExtent}】------\n'
          'viewportDimension------【${notification.metrics.viewportDimension}】------\n'
          'delta------【${notification.dragDetails?.delta}】------\n'
          'globalPosition------【${notification.dragDetails?.globalPosition}】------\n'
          'localPosition------【${notification.dragDetails?.localPosition}】------\n'
          'scrollDelta------【${notification.scrollDelta}】------\n'
          'depth------【${notification.depth}】------';

    });

    return true;
  }

  Widget _buildItem(BuildContext context, int index) {
    return Container(
      height: 50,
      alignment: Alignment.centerRight,
      padding: EdgeInsets.only(right: 8),
      child: Text(
        data[index],
        style: TextStyle(color: Theme.of(context).primaryColor, fontSize: 18),
      ),
    );
  }
}


name: 监听OverscrollIndicatorNotification
subtitle: 该通知之后在滑动到最顶和最底是回调，通过leading属性判断是顶部还是底部。另外通过notification#disallowGlow(),可以去除顶底滑动蓝色阴影
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class NotificationListenerDemo extends StatefulWidget {
  @override
  _NotificationListenerDemoState createState() => _NotificationListenerDemoState();
}

class _NotificationListenerDemoState extends State<NotificationListenerDemo> {
  final data = List<String>.generate(30, (i) => '第${i + 1}条');

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      child: NotificationListener<OverscrollIndicatorNotification>(
          onNotification: _onNotification,
          child: CupertinoScrollbar(
            child: ListView.separated(
              itemBuilder: _buildItem,
              itemCount: data.length,
              separatorBuilder: (_,__)=>Divider(height: 5,),
            ),
          )),
    );
  }

  bool _onNotification(OverscrollIndicatorNotification notification) {
    if (notification.leading) {
      notification.disallowGlow();
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('已滑到顶部'),
        backgroundColor: Colors.blue,
        duration: Duration(milliseconds: 200),
      ));
    } else {
      notification.disallowGlow();
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('已滑到底部'),
        duration: Duration(milliseconds: 200),
        backgroundColor: Colors.blue,
      ));
    }

    return true;
  }

  Widget _buildItem(BuildContext context, int index) {
    return Container(
      height: 50,
      alignment: Alignment.center,
      child: Text(data[index],style: TextStyle(color: Theme.of(context).primaryColor,fontSize: 18),),
    );
  }
}


name: GridView.extent构造
subtitle:
      
【maxCrossAxisExtent】 : box轴向长度   【double】
【reverse】 : 是否反向滑动   【bool】
【shrinkWrap】 : 无边界时是否包裹  【bool】

code:
import 'package:flutter/material.dart';
class ExtentGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.extent(
        scrollDirection: Axis.horizontal,
        maxCrossAxisExtent: 80.0,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: GridView.count构造
subtitle:
      
【children】 : 子组件列表   【List<Widget>】
【crossAxisCount】 : 主轴一行box数量  【int】
【mainAxisSpacing】 : 主轴每行间距  【double】
【crossAxisSpacing】 : 交叉轴每行间距  【double】
【childAspectRatio】 : box主长/交叉轴长  【double】
【crossAxisCount】 : 主轴一行数量  【int】

code:
import 'package:flutter/material.dart';
class CustomGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFFFF00FF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.count(
        crossAxisCount: 4,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 1/0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: GridView.builder构造
subtitle:
      
【itemCount】 : 条目数量   【int】
【gridDelegate】 : 网格代理   【SliverGridDelegate】
【itemBuilder】 : 条目构造器  【IndexedWidgetBuilder】

code:
import 'package:flutter/material.dart';
class BuilderGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF33FFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.builder(
          itemCount: data.length,
          scrollDirection: Axis.vertical,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//网格代理：定交叉轴数目
              crossAxisCount: 4,//条目个数
              mainAxisSpacing: 5,//主轴间距
              crossAxisSpacing: 5,//交叉轴间距
              childAspectRatio:1/0.618),
          itemBuilder: (_, int position)=> _buildItem(data[position])
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: GridView滑动方向
subtitle:
      
【scrollDirection】 : 滑动方向   【Axis】
【reverse】 : 是否反向滑动   【bool】
【shrinkWrap】 : 无边界时是否包裹  【bool】

code:
import 'package:flutter/material.dart';
class HorizontalGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: GridView.count(
        scrollDirection: Axis.horizontal,
        reverse: true,
        crossAxisCount: 4,
        mainAxisSpacing: 2,
        crossAxisSpacing: 2,
        childAspectRatio: 0.618,
        children: data
            .map((color) => _buildItem(color))
            .toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 30,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(
            color: Colors.black,
            offset: Offset(.5, .5),
            blurRadius: 2)
      ]),
    ),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: 基本使用方法
subtitle:
      
【child】 : 子组件   【Widget】
使用 DraggableScrollableActuator.reset(context) 重置后代 DraggableScrollableSheet 位初始位置。

code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter/src/rendering/sliver.dart';
class DraggableScrollableActuatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: ElevatedButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => DraggableScrollableActuatorPage()),
          );
        },
        child: Text("进入 DraggableScrollableActuator 测试页"),
      ),
    );
  }
}

class DraggableScrollableActuatorPage extends StatelessWidget {
  final List<Color> data = [
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
    Colors.red[50],
    Colors.red[100],
    Colors.red[200],
    Colors.red[300],
    Colors.red[400],
    Colors.red[500],
    Colors.red[600],
    Colors.red[700],
    Colors.red[800],
    Colors.red[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DraggableScrollableActuator"),
      ),
      body: Container(
        // height: 400,
        child: DraggableScrollableActuator(
          child: Builder(
            builder: (ctx) => Column(
              children: [
                ElevatedButton(
                  onPressed: () {
                    DraggableScrollableActuator.reset(ctx);
                  },
                  child: Text("重置位置"),
                ),
                Expanded(
                  child: buildSheet(),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget buildSheet() => DraggableScrollableSheet(
        initialChildSize: 0.3,
        minChildSize: 0.2,
        maxChildSize: 1,
        expand: true,
        builder: (BuildContext context, ScrollController scrollController) =>
            ListView.builder(
          controller: scrollController,
          itemCount: data.length,
          itemBuilder: buildColorItem,
        ),
      );

  Widget buildColorItem(BuildContext context, int index) {
    return Container(
      alignment: Alignment.center,
      height: 60,
      color: data[index],
      child: Text(
        colorString(data[index]),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
        ]),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SnackBar基本使用
subtitle:
      
【content】 : 中间内容组件   【Widget】
【action】 : 右侧按钮   【SnackBarAction】
【duration】 : 持续时长   【Widget】
【backgroundColor】 : 背景色   【Color】
【elevation】 : 影深   【double】
【shape】 : 形状   【ShapeBorder】
【onVisible】 : 显示时回调  【Function()】

code:
import 'package:flutter/material.dart';
class CustomSnackBar extends StatefulWidget {
  @override
  _CustomSnackBarState createState() => _CustomSnackBarState();
}

class _CustomSnackBarState extends State<CustomSnackBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: FlatButton(
            color: Colors.blue,
            onPressed: () =>
                Scaffold.of(context).showSnackBar(_buildSnackBar()),
            child: Text(
              '点我弹出SnackBar',
              style: TextStyle(color: Colors.white),
            )));
  }

  Widget _buildSnackBar() {
    return SnackBar(
      elevation: 3,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), topRight: Radius.circular(10))),
      content: Text('Wellcome to for join Flutter Unit!'),
      duration: Duration(seconds: 3),
      //持续时间
      backgroundColor: Colors.red,
      onVisible: () => print('onVisible'),
      action: SnackBarAction(
          textColor: Colors.white, label: '确定', onPressed: () {}),
    );
  }
}


name: TabPageSelectorIndicator基本使用
subtitle: 【size】: 大小 【double】 【backgroundColor】: 背景色 【Color】 【borderColor】: 边线色 【Color】
code:
import 'package:flutter/material.dart';
class TabPageSelectorIndicatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          TabPageSelectorIndicator(
            backgroundColor: Colors.greenAccent,
            borderColor: Colors.deepPurpleAccent,
            size: 15,
          ),
          TabPageSelectorIndicator(
            backgroundColor: Colors.blue,
            borderColor: Colors.grey,
            size: 20,
          ),
          TabPageSelectorIndicator(
            backgroundColor: Colors.green,
            borderColor: Colors.red,
            size: 25,
          ),
          TabPageSelectorIndicator(
            backgroundColor: Colors.yellow,
            borderColor: Colors.brown,
            size: 30,
          ),
          TabPageSelectorIndicator(
            backgroundColor: Colors.amber,
            borderColor: Colors.purpleAccent,
            size: 35,
          ),
        ],
      ),
    );
  }

}


name: PageStorage基本使用
subtitle:
【bucket】 : 存储区   【PageStorageBucket】
【child】: 子组件   【Widget】
上面切换界面初始化组件时并不会将状态重置。如上CountWidget，子组件需要在初始化时从存储器中读取状态，在改变状态时将状态量写入存储器。另外，如果使用MaterialApp已经内置了PageStorage,不过你也可以创建PageStorage。

code:
import 'package:flutter/material.dart';
class PageStorageDemo extends StatefulWidget {
  @override
  _PageStorageDemoState createState() => _PageStorageDemoState();
}

class _PageStorageDemoState extends State<PageStorageDemo> {
  int _pageIndex = 0;
  final PageStorageBucket _bucket = PageStorageBucket();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Scaffold(
        body: PageStorage(
          child: _buildContentByIndex(),
          bucket: _bucket,
        ),
        bottomNavigationBar: BottomNavigationBar(
          elevation: 0,
          backgroundColor: Colors.blueAccent.withAlpha(55),
          currentIndex: _pageIndex,
          onTap: (int index) {
            setState(() {
              _pageIndex = index;
            });
          },
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('Setting'),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildContentByIndex() {
    if (_pageIndex == 0) {
      return CountWidget(key: PageStorageKey('CountWidget1'));
    }

    if (_pageIndex == 1) {
      return CountWidget(key: PageStorageKey('CountWidget2'));
    }

    return ListView();
  }
}

class CountWidget extends StatefulWidget {
  CountWidget({Key key}) : super(key: key);

  @override
  _CountWidgetState createState() => _CountWidgetState();
}

class _CountWidgetState extends State<CountWidget> {
  int _count = 0;

  @override
  void initState() {
    super.initState();
    _count = PageStorage.of(context)?.readState(context) as int ?? 0;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('点击了$_count次'),
          MaterialButton(
              onPressed: _addCount,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              color: Colors.green,
              shape: CircleBorder(
                side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
              ))
        ],
      ),
    );
  }

  void _addCount() {
    setState(() {
      _count++;
      PageStorage.of(context)?.writeState(context, _count);
    });
  }
}


name: ListTile的密排属性
subtitle: 【dense】: 是否密排 【bool】
code:
import 'package:flutter/material.dart';
class DenseListTile extends StatefulWidget {
  @override
  _DenseListTileState createState() => _DenseListTileState();
}

class _DenseListTileState extends State<DenseListTile> {
  bool _dense = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: ListTile(
        leading: Image.asset("assets/images/icon_head.webp"),
        title: Text("以梦为马"),
        subtitle: Text("海子"),
        selected: false,
        contentPadding: EdgeInsets.all(5),
        trailing: Icon(Icons.more_vert),
        dense: _dense,
        onTap: () => setState(() => _dense = !_dense),
      ),
    );
  }
}


name: ListTile选中效果和长按事件
subtitle: 【selected】: 是否选中 【bool】 【onTap】: 点击事件 【Function()】
code:
import 'package:flutter/material.dart';
class SelectListTile extends StatefulWidget {
  @override
  _SelectListTileState createState() => _SelectListTileState();
}

class _SelectListTileState extends State<SelectListTile> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: ListTile(
        leading: Image.asset("assets/images/icon_head.webp"),
        selected: _selected,
        title: Text("以梦为马"),
        subtitle: Text("海子"),
        contentPadding: EdgeInsets.all(5),
        trailing: Icon(Icons.more_vert),
        onTap: () => setState(() => _selected = !_selected),
      ),
    );
  }
}


name: ListTile的基本表现如下
subtitle:
【leading】: 左侧组件   【Widget】
【title】: 中间上组件   【Widget】
【subtitle】: 中间下组件   【Widget】
【trailing】: 尾组件   【Widget】
【contentPadding】: 内边距   【EdgeInsetsGeometry】
【onLongPress】: 点击事件   【Function()】

code:
import 'package:flutter/material.dart';
class CustomListTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: ListTile(
        leading: Image.asset("assets/images/icon_head.webp"),
        title: Text("以梦为马"),
        subtitle: Text("海子"),
        contentPadding: EdgeInsets.all(5),
        trailing: Icon(Icons.more_vert),
        onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),
      ),
    );
  }
}


name: GridTileBar的基本表现如下
subtitle:
【value】 : 条目对象  【T】
【leading】: 左侧组件   【Widget】
【trailing】: 尾组件   【Widget】
【title】: 中间上组件   【Widget】
【subtitle】: 中间下组件   【Widget】
【backgroundColor】: 背景色   【Color】

code:
import 'package:flutter/material.dart';
class CustomGridTileBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridTileBar(
      backgroundColor: Colors.blue.withAlpha(120),
      trailing: Icon(
        Icons.star,
        color: Colors.red,
      ),
      leading: CircleAvatar(
        backgroundImage: AssetImage("assets/images/wy_200x300.webp"),
      ),
      title: Text("百里·巫缨"),
      subtitle: Text("倾国必倾城"),
    );
  }
}


name: GridTile的基本表现如下
subtitle: 【header】: 头组件 【Widget】 【child】: 子组件 【Widget】 【footer】: 脚组件 【Widget】
code:
import 'package:flutter/material.dart';
class CustomGridTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200, height: 200,
      child: GridTile(
        header: GridTileBar(
          backgroundColor: Colors.blue.withAlpha(120),
          trailing: Icon(
            Icons.star,
            color: Colors.red,
          ),
          leading: CircleAvatar(
            backgroundImage: AssetImage("assets/images/wy_200x300.webp"),
          ),
          title: Text("百里·巫缨"),
          subtitle: Text("倾国必倾城"),
        ),
        child: Opacity(
          opacity: 0.5,
          child: Image.asset(
            "assets/images/sabar.webp",
            fit: BoxFit.cover,
          ),
        ),
        footer: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "ID:z\$ySX32&29",
            style: TextStyle(shadows: [
              Shadow(
                  color: Colors.blue,
                  offset: Offset(.1, .1),
                  blurRadius: 2),
            ]),
          ),
        ),
      ),
    );
  }
}


name: 可以设置颜色和阴影
subtitle: 【backgroundColor】: 背景色 【Color】 【shadowColor】: 阴影色 【Color】 【elevation】: 影深 【double】
code:
import 'package:flutter/material.dart';
class ColorOfChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      children: <Widget>[
        Chip(
          avatar: Image.asset("assets/images/icon_head.webp"),
          label: Text("张风捷特烈"),
          padding: EdgeInsets.all(5),
          labelPadding: EdgeInsets.all(5),
          backgroundColor: Colors.grey.withAlpha(66),
          shadowColor: Colors.orangeAccent,
          elevation: 3,
        ),
        Chip(
          avatar: Image.asset("assets/images/icon_head.webp"),
          label: Text("张风捷特烈"),
          padding: EdgeInsets.all(5),
          labelPadding: EdgeInsets.all(5),
          backgroundColor: Colors.cyanAccent.withAlpha(11),
          shadowColor: Colors.blue.withAlpha(88),
          elevation: 4,
        ),
      ],
    );
  }
}


name: 可以设置右侧点击按钮
subtitle:
【deleteIcon】: 右侧组件(通常为Icon)   【Widget】
【deleteIconColor】: 右侧组件颜色   【Color】
【onDeleted】: 右侧组件点击事件   【Function】

code:
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class DeleteOfChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Chip(
      avatar: Image.asset("assets/images/icon_head.webp"),
      label: Text("张风捷特烈"),
      padding: EdgeInsets.all(5),
      labelPadding: EdgeInsets.all(3),
      backgroundColor: Colors.grey.withAlpha(66),
      shadowColor: Colors.orangeAccent,
//      deleteIcon: Icon(Icons.close,size: 18),
      deleteIconColor: Colors.red,
      onDeleted: () => DialogAbout.show(context),
      elevation: 3,
    );
  }
}


name: Chip的普通表现如下
subtitle:
【avatar】: 左侧组件   【Widget】
【label】: 中间组件   【Widget】
【padding】 : 内边距  【EdgeInsetsGeometry】
【labelPadding】: label边距   【EdgeInsetsGeometry】

code:
import 'package:flutter/material.dart';
class CustomChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      children: <Widget>[
        Chip(
          avatar: Image.asset("assets/images/icon_head.webp"),
          label: Text("张风捷特烈"),
          padding: EdgeInsets.all(5),
          labelPadding: EdgeInsets.all(5),
        ),
        Chip(
          avatar: CircleAvatar(
              backgroundImage:
              AssetImage("assets/images/wy_200x300.webp")),
          label: Text("百里巫缨"),
          padding: EdgeInsets.all(8),
          labelPadding: EdgeInsets.all(6),
        ),
      ],
    );
  }
}


name: NavigationToolbar基本使用
subtitle:
【leading】 : 左侧组件   【Widget】
【middle】: 中间组件   【Widget】
【trailing】: 右侧组件组件   【Widget】
【centerMiddle】: 中间组件是否居中   【bool】
【middleSpacing】: 中间组件距左距离    【double】

code:
import 'package:flutter/material.dart';
class NavigationToolbarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            height: 60,
            child: NavigationToolbar(
              leading: Icon(Icons.ac_unit),
              middle: Text('middleSpacing#true'),
              middleSpacing: 20,
              centerMiddle: true,
              trailing: Icon(Icons.more_vert),
            ),
          ),
          Container(
            height: 60,
            child: NavigationToolbar(
              leading: Icon(Icons.ac_unit),
              middle: Text('middleSpacing#false'),
              middleSpacing: 20,
              centerMiddle: false,
              trailing: Icon(Icons.more_vert),
            ),
          ),
        ],
    );
  }
}


name: SimpleDialog基本使用
subtitle:
      
【title】 : 顶部组件   【Widget】
【children】 : 子组件列表  【List<Widget>】
【titlePadding】 : 顶部内边距  【EdgeInsetsGeometry】
【contentPadding】 : 内容内边距  【EdgeInsetsGeometry】
【backgroundColor】 : 右下角组件列表  【背景色】
【elevation】 : 右下角组件列表  【背景色】
【shape】 : 影深   【double】

code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomSimpleDialog extends StatelessWidget {
  final info = [
    '性别:    男     未婚',
    '微信:    zdl1994328',
    "掘金:    张风捷特烈",
    "github:    toly1994328",
    "邮箱:    1981462008@qq.com",
  ];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        _buildSimpleDialog(context),
        Positioned(
            top: 70,
            right: 30,
            child: _buildRaisedButton(context)),

      ],
    );
  }
  Widget _buildRaisedButton(BuildContext context) => RaisedButton(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10))),
    color: Colors.blue,
    onPressed: () {
      showDialog(context: context, builder: (ctx) => _buildSimpleDialog(ctx));
    },
    child: Text(
      'Just Show It',
      style: TextStyle(color: Colors.white),
    ),
  );

  SimpleDialog _buildSimpleDialog(BuildContext context) {
    return SimpleDialog(
    title: _buildTitle(),
    titlePadding: EdgeInsets.only(
      top: 5,
      left: 20,
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 5),
    children: _buildChild(context),
    backgroundColor: Colors.white,
    elevation: 4,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10))),
  );
  }

  List<Column> _buildChild(BuildContext context) {
    return info
        .map((str) => Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SimpleDialogOption(
                  onPressed: () => print(str),
                  child: Container(
                    width: double.infinity,
                    child: Text(
                      str,
                      style: TextStyle(color: Color(0xff999999), fontSize: 16),
                    ),
                  ),
                ),
                Divider(
                  indent: 20,
                  height: 12,
                  color: info.indexOf(str) == info.length - 1
                      ? Colors.transparent
                      : Theme.of(context).dividerColor,
                )
              ],
            ))
        .toList();
  }

  Widget _buildTitle() {
    return Row(
      //标题
      children: <Widget>[
        Image.asset(
          "assets/images/icon_head.webp",
          width: 30,
          height: 30,
        ),
        SizedBox(
          width: 10,
        ),
        Expanded(
            child: Text(
          "张风捷特烈",
          style: TextStyle(fontSize: 18),
        )),
        CloseButton()
      ],
    );
  }
}


name: MaterialButton长按事件
subtitle: 【highlightColor】: 长按高亮色 【Color】 【onLongPress】: 长按事件 【Function】
code:
import 'package:flutter/material.dart';
class LongPressMaterialButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
        height: 40,
        elevation: 5,
        color: Colors.blue,
        highlightColor: Colors.green,
        textColor: Colors.white,
        padding: EdgeInsets.all(8),
        child: Text("MaterialButton"),
        onLongPress: () =>  Navigator.of(context).pushNamed('AboutMePage'),
        onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));
  }
}


name: MaterialButton点击事件
subtitle:
【color】: 颜色   【Color】
【splashColor】: 水波纹颜色   【Color】
【height】: 高   【double】
【elevation】: 影深   【double】
【child】: 子组件   【Widget】
【textColor】: 子组件文字颜色   【Color】
【highlightColor】: 长按高亮色   【Color】
【padding】: 内边距   【EdgeInsetsGeometry】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/material.dart';
class CustomMaterialButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
        height: 40,
        elevation: 5,
        color: Colors.orangeAccent,
        textColor: Colors.white,
        splashColor: Colors.blue,
        padding: EdgeInsets.all(8),
        child: Text("MaterialButton"),
        onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'));
  }
}


name: MaterialButton的自定义形状
subtitle: 【shape】: 形状 【ShapeBorder】
code:
import 'package:flutter/material.dart';
class ShapeMaterialButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      children: <Widget>[
        Container(
          width: 40,
          height: 40,
          child: MaterialButton(
              padding: EdgeInsets.all(0),
              textColor: Color(0xffFfffff),
              elevation: 3,
              color: Colors.blue,
              highlightColor: Color(0xffF88B0A),
              splashColor: Colors.red,
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
              shape: CircleBorder(
                side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
              ),
              onLongPress: () =>  Navigator.of(context).pushNamed('AboutMePage'),
              onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage')),
        ),
        Container(
          width: 100,
          height: 40,
          child: MaterialButton(
              padding: EdgeInsets.all(0),
              textColor: Color(0xffFfffff),
              elevation: 3,
              color: Colors.blue,
              highlightColor: Color(0xffF88B0A),
              splashColor: Colors.red,
              child: Icon(
                Icons.remove,
                color: Colors.white,
              ),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(15))),
              onLongPress: () =>  Navigator.of(context).pushNamed('AboutMePage'),
              onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage')),
        ),
      ],
    );
  }
}


name: CloseButton点击事件
subtitle: 点击时会退出当前栈
code:
import 'package:flutter/material.dart';
class CustomCloseButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CloseButton();
  }
}


name: TabBar基本使用
subtitle:
      
【controller】 : 控制器   【TabController】
【indicatorColor】 : 指示器颜色   【指示器颜色】
【indicatorWeight】 : 指示器高   【double】
【indicatorPadding】 : 指示器边距   【EdgeInsetsGeometry】
【labelStyle】 : 页签文字样式   【TextStyle】
【unselectedLabelStyle】 : 未选中文字样式   【TextStyle】
【isScrollable】 : 是否可滑动   【bool】
【onTap】 : 页签点击回调   【Function(int)】
【tabs】 : 标签组件   【List<Widget>】

code:
import 'package:flutter/material.dart';
class CustomTabBar extends StatefulWidget {
  @override
  _CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar>
    with SingleTickerProviderStateMixin {
  final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(
      onTap: (tab) {
        print(tab);
      },
      labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      unselectedLabelStyle: TextStyle(fontSize: 16),
      isScrollable: true,
      controller: _tabController,
      labelColor: Colors.blue,
      indicatorWeight: 3,
      indicatorPadding: EdgeInsets.symmetric(horizontal: 10),
      unselectedLabelColor: Colors.grey,
      indicatorColor: Colors.orangeAccent,
      tabs: tabs.map((e) => Tab(text: e)).toList(),
    );
  }
}


name: 通过设置Theme可实现无水波纹
subtitle: 将Theme关于水波纹的颜色设置为透明即可。
code:
import 'package:flutter/material.dart';
class NoShadowTabBarDemo extends StatefulWidget {
  @override
  _NSTabBarState createState() => _NSTabBarState();
}

class _NSTabBarState extends State<NoShadowTabBarDemo>
    with SingleTickerProviderStateMixin {
  final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
      ),
      child: TabBar(
        onTap: (tab) {
          print(tab);
        },
        labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        unselectedLabelStyle: TextStyle(fontSize: 16),
        isScrollable: true,
        controller: _tabController,
        labelColor: Colors.blue,
        indicatorWeight: 3,
        indicatorPadding: EdgeInsets.symmetric(horizontal: 10),
        unselectedLabelColor: Colors.grey,
        indicatorColor: Colors.orangeAccent,
        tabs: tabs.map((e) => Tab(text: e)).toList(),
      ),
    );
  }
}


name: GridPage基础属性
subtitle: 【child】: 子组件 【Widget】 【color】: 颜色 【Color】 【interval】: 小块边长 【double】
code:
import 'package:flutter/material.dart';
class CustomGridPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 200,
        height: 100,
        child: GridPaper(
            color: Colors.red,
            interval: 50,
            child: Image.asset(
              "assets/images/wy_300x200.webp",
              fit: BoxFit.cover,
            )));
  }
}


name: GridPage再分割
subtitle:
【child】: 子组件   【Widget】
【color】: 颜色   【Color】
【subdivisions】: 小块中子块个数   【int】
【divisions】: 小块中子块的分割数   【int】

code:
import 'package:flutter/material.dart';
class DivisionsGridPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 200,
        height: 100,
        child: GridPaper(
            color: Colors.red,
            interval: 50,
            divisions: 4,
            subdivisions: 4,
            child: Image.asset(
              "assets/images/wy_300x200.webp",
              fit: BoxFit.cover,
            )));
  }
}


name: CupertinoAlertDialog基本使用
subtitle: 【title】 : 顶部组件 【Widget】 【content】 : 内容组件 【Widget】 【actions】 : 顶部文字样式 【List<Widget>】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoAlertDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildRaisedButton(context),
        _buildCupertinoAlertDialog(context),
      ],
    );
  }

  Widget _buildRaisedButton(BuildContext context) => RaisedButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))),
        color: Colors.blue,
        onPressed: () {
          showDialog(
              context: context,
              builder: (ctx) => _buildCupertinoAlertDialog(context));
        },
        child: Text(
          'Just Show It !',
          style: TextStyle(color: Colors.white),
        ),
      );

  Widget _buildCupertinoAlertDialog(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: CupertinoAlertDialog(
          title: _buildTitle(context),
          content: _buildContent(),
          actions: <Widget>[
            CupertinoButton(
              child: Text("Yes, Delete"),
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoButton(
              child: Text("Cancle"),
              onPressed: () => Navigator.pop(context),
            ),
          ]),
    );
  }

  Widget _buildTitle(context) {
    return Row(
        //标题
        children: <Widget>[
          Icon(
            CupertinoIcons.delete_solid,
            color: Colors.red,
          ),
          Expanded(
              child: Text(
            'Delete File',
            style: TextStyle(color: Colors.red, fontSize: 20),
          )),
          InkWell(
            child: Icon(CupertinoIcons.clear_thick),
            onTap: () => Navigator.pop(context),
          )
        ]);
  }

  Widget _buildContent() {
    return Padding(
      padding: const EdgeInsets.only(top: 18.0),
      child: Column(
        children: <Widget>[
          Text(
            '    Hi toly! If you push the conform buttom ,'
            ' You will lose this file. Are you sure wand to do that?',
            style: TextStyle(color: Color(0xff999999), fontSize: 16),
            textAlign: TextAlign.justify,
          ),
        ],
      ),
    );
  }
}


name: 返回按钮基本使用
subtitle: 【onPressed】 : 点击事件 【VoidCallback】 【color】: 颜色 【Color】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoNavigationBarBackButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CupertinoNavigationBarBackButton(
        color: Colors.deepPurpleAccent,
        onPressed: ()=>Navigator.of(context).pop(),
      ),
    );
  }
}


name: Tab基本使用
subtitle: 【child】 : 子组件 【Widget】 【text】 : 文字 【String】 【icon】 : 下方组件 【Widgit】 text和child不能同时存在
code:
import 'package:flutter/material.dart';
class CustomTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Tab(
            icon:Icon( Icons.add,color: Colors.blue,),
            child: Text('添加'),
          ),
          Tab(
            icon:Icon( Icons.close,color: Colors.red,),
            text: '删除',
          ),
          Tab(
            icon:Icon( Icons.refresh,color: Colors.green),
            text: '更新',
          ),
        ],
      ),
    );
  }
}


name: Spacer基本使用
subtitle: 一个Spacer会占据可延伸区域
code:
import 'package:flutter/material.dart';
class OneSpacer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return
      Container(
        color: Colors.grey.withAlpha(33),
        child: Row(children: <Widget>[
          Container(
            alignment: Alignment.center,
            width: 100,
            height: 50,
            color: Colors.red,
          ),
          Spacer(),
          Container(
            alignment: Alignment.center,
            width: 60,
            height: 50,
            color: Colors.blue,
          ),
        ],),
      );
  }
}


name: 多个Spacer空间分配
subtitle: 【flex】 : 剩余空间分配占比 【int】
code:
import 'package:flutter/material.dart';
class ManySpacer extends StatefulWidget {
  @override
  _ManySpacerState createState() => _ManySpacerState();
}

class _ManySpacerState extends State<ManySpacer> {
  int _flexA=1;
  int _flexB=1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSliders(),
        Container(
          color: Colors.grey.withAlpha(33),
          child: Row(children: <Widget>[
            Spacer(flex: _flexA),
            Container(
              alignment: Alignment.center,
              width: 100,
              height: 50,
              color: Colors.red,
            ),
            Spacer(flex: _flexB),
            Container(
              alignment: Alignment.center,
              width: 60,
              height: 50,
              color: Colors.blue,
            ),
          ],),
        )
      ],
    );
  }

  Widget _buildSliders() {
    return Column(
      children: <Widget>[
        Slider(
            divisions: 20,
            min: 1,
            max: 10,
            label: "左边flex: $_flexA",
            value: _flexA.toDouble(),
            onChanged: (v) => setState(() => _flexA = v.round())
        ),
        Slider(
            divisions: 20,
            label: "右边flex: $_flexB",
            min: 1,
            max: 10,
            value: _flexB.toDouble(),
            onChanged: (v) => setState(() => _flexB = v.round())
        ),
      ],
    );
  }
}


name: VerticalDivider颜色和粗细
subtitle: 【color】: 颜色 【Color】 【thickness】: 线粗细 【double】
code:
import 'package:flutter/material.dart';
class CustomVerticalDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataColor = [
      Colors.red, Colors.yellow,
      Colors.blue, Colors.green];
    var dataThickness = [1.0, 2.0, 4.0, 6.0];
    var data = Map.fromIterables(dataColor, dataThickness);
    return Container(
      height: 150,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: dataColor
            .map((e) => VerticalDivider(
          color: e,
          thickness: data[e],
        ))
            .toList(),
      ),
    );
  }
}


name: VerticalDivider宽度和空缺
subtitle: 【indent】: 前面空缺长度 【double】 【endIndent】: 后面空缺长度 【double】 【height】: 占位高 【double】
code:
import 'package:flutter/material.dart';
class HeightVerticalDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataColor = [
      Colors.red, Colors.yellow,
      Colors.blue, Colors.green];
    var dataThickness = [10.0, 20.0, 30.0, 40.0];
    var data = Map.fromIterables(dataColor, dataThickness);
    return Container(
      height: 150,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: dataColor
            .map((e) => VerticalDivider(
          color: e,
          indent:data[e],
          endIndent: data[e]*2,
          width: data[e],
          thickness: data[e]/10,
        ))
            .toList(),
      ),
    );
  }
}


name: 用于显示一个纯色图片
subtitle: 【入参】 : 图片资源 【ImageProvider】 【size】 : 大小 【double】 【color】: 角标颜色 【Color】
code:
import 'package:flutter/material.dart';
class CustomImageIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      Colors.blue: 50.0,
      Colors.red: 60.0,
      Colors.green: 70.0,
      Colors.yellow: 80.0,
    };
    return Wrap(
      spacing: 10,
      children: data.keys
          .map((e) => ImageIcon(
                AssetImage("assets/images/leaf.webp"),
                color: e,
                size: data[e],
              ))
          .toList(),
    );
  }
}


name: 右上角和底部
subtitle:
【otherAccountsPictures】: 右上组件   【List<Widget>】
【onDetailsPressed】: 右下角点击事件   【Function()】
【arrowColor】: 右下角按钮颜色   【Color】
【margin】: 外边距   【EdgeInsetsGeometry】

code:
import 'package:flutter/material.dart';
class ProUAGHP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 3 * 2,
      child: UserAccountsDrawerHeader(
        margin: EdgeInsets.all(10),
        accountName: Container(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "张风捷特烈",
            style:
                TextStyle(color: Colors.orangeAccent, fontSize: 22,
                    shadows: [
              Shadow(
                  color: Colors.black,
                  offset: Offset(.5, .5),
                  blurRadius: 2),
            ]),
          ),
        ),
        accountEmail: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("1981462002@qq.com",
              style: TextStyle(
                  color: Colors.white, fontSize: 14,
                  shadows: [
                Shadow(
                    color: Colors.orangeAccent,
                    offset: Offset(.5, .5),
                    blurRadius: 2),
              ])),
        ),
        currentAccountPicture: Container(
          padding: const EdgeInsets.all(15.0),
          child: CircleAvatar(
            backgroundImage: AssetImage("assets/images/icon_head.webp"),
          ),
        ),
        otherAccountsPictures: <Widget>[
          FlutterLogo(textColor: Colors.green),
        ],
        onDetailsPressed: () {

        },
        arrowColor: Colors.white,
        decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage("assets/images/caver.webp")),
        ),
      ),
    );
  }
}


name: 该组件的基本表现如下
subtitle:
【currentAccountPicture】: 上组件   【Widget】
【accountName】: 中组件   【Widget】
【accountEmail】: 下组件   【Widget】
【decoration】: 装饰   【Decoration】

code:
import 'package:flutter/material.dart';
class CustomUAGHP extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 3 * 2,
      child: UserAccountsDrawerHeader(
        accountName: Container(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "张风捷特烈",
            style:
            TextStyle(color: Colors.orangeAccent, fontSize: 22, shadows: [
              Shadow(
                  color: Colors.black, offset: Offset(.5, .5), blurRadius: 2),
            ]),
          ),
        ),
        accountEmail: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("1981462002@qq.com",
              style: TextStyle(color: Colors.white, fontSize: 14, shadows: [
                Shadow(
                    color: Colors.orangeAccent,
                    offset: Offset(.5, .5),
                    blurRadius: 2),
              ])),
        ),
        currentAccountPicture: Container(
          padding: const EdgeInsets.all(15.0),
          child: CircleAvatar(
            backgroundImage: AssetImage("assets/images/icon_head.webp"),
          ),
        ),
        decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage("assets/images/caver.webp")),
        ),
      ),
    );
  }
}


name: Dialog基本使用
subtitle:
      
【child】 : 动画图标数据   【Widget】
【elevation】 : 影深  【double】
【backgroundColor】 : 背景色  【Color】
【shape】 : 形状   【ShapeBorder】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildRaisedButton(context),
        _buildDialog(),
      ],
    );
  }

  Widget _buildDialog() => Dialog(
      backgroundColor: Colors.white,
      elevation: 5,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: Container(
        width: 50,
        child: DeleteDialog(),
      ),
    );

  Widget _buildRaisedButton(BuildContext context) => RaisedButton(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10))),
          color: Colors.blue,
          onPressed: () {
            showDialog(context: context, builder: (ctx) => _buildDialog());
          },
          child: Text(
            'Just Show It !',
            style: TextStyle(color: Colors.white),
          ),

  );
}

class DeleteDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _buildBar(context),
          _buildTitle(),
          _buildContent(),
          _buildFooter(context),
        ],
      ),
    );
  }

  Widget _buildTitle() {
    return Text(
      'Delete Doucument',
      style: TextStyle(color: Color(0xff5CC5E9), fontSize: 24),
    );
  }

  Widget _buildContent() {
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Text(
        '    Hi toly! If you push the conform buttom ,'
        ' You will lose this file. Are you sure wand to do that?',
        style: TextStyle(color: Color(0xffCFCFCF), fontSize: 16),
        textAlign: TextAlign.justify,
      ),
    );
  }

  Widget _buildFooter(context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 15.0, top: 10,left: 10,right: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            height: 40,
            width: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(30)),
                color: Color(0xff73D1EE)),
            child: Text('Yes',
                style: TextStyle(color: Colors.white, fontSize: 16)),
          ),
          InkWell(
            onTap: ()=>Navigator.of(context).pop(),
            child: Container(
              alignment: Alignment.center,
              height: 40,
              width: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(30)),
                  color: Colors.orangeAccent),
              child: Text('Cancle',
                  style: TextStyle(color: Colors.white, fontSize: 16)),
            ),
          )
        ],
      ),
    );
  }

  _buildBar(context) => Container(
        height: 30,
        alignment: Alignment.centerRight,
        margin: EdgeInsets.only(right: 10, top: 5),
        child: InkWell(
          onTap: ()=>Navigator.of(context).pop(),
          child: Icon(
            Icons.close,
            color: Color(0xff82CAE3),
          ),
        ),
      );
}


name: CupertinoActionSheet基本使用
subtitle:
      
【title】 : 第一行组件   【Widget】
【message】 : 第二行组件  【Widget】
【cancelButton】 : 取消按钮处组件  【Widget】
【actions】 : 中间组件列表  【List<Widget>】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoActionSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        _buildRaisedButton(context),
        _buildCupertinoActionSheet(context),
      ],
    );
  }

  Widget _buildCupertinoActionSheet(BuildContext context) =>
      Container(
        alignment: Alignment.bottomCenter,
        child: CupertinoActionSheet(
          title: Text("Please chose a language"),
          message: Text('the language you use in this application.'),
          cancelButton: CupertinoActionSheetAction(
              onPressed: () => Navigator.pop(context), child: Text("Cancel")),
          actions: <Widget>[
            CupertinoActionSheetAction(
                onPressed: () => Navigator.pop(context), child: Text('Dart')),
            CupertinoActionSheetAction(
                onPressed: () => Navigator.pop(context), child: Text('Java')),
            CupertinoActionSheetAction(
                onPressed: () => Navigator.pop(context), child: Text('Kotlin')),
          ],
        ),
      );

  Widget _buildRaisedButton(BuildContext context) => RaisedButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))),
        color: Colors.blue,
        onPressed: () => showDialog(
            context: context,
            builder: (ctx) => _buildCupertinoActionSheet(context)),
        child: Text(
          'Just Show It !',
          style: TextStyle(color: Colors.white),
        ),
      );
}


name: DrawerHeader基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【decoration】 : 装饰   【Decoration】
【margin】 : 外边距   【EdgeInsetsGeometry】
【padding】 : 内边距   【EdgeInsetsGeometry】

code:
import 'package:flutter/material.dart';
class CustomDrawerHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Unit'),
        ),
        drawer: Drawer(
          elevation: 3,
          child: _buildChild(),
        ),
      ),
    );
  }

  Widget _buildChild() => ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      _buildHeader(),
      ListTile(
        leading: Icon(
          Icons.star,
          color: Colors.blue,
        ),
        title: Text('我的收藏'),
      ),
      ListTile(
        leading: Icon(
          Icons.palette,
          color: Colors.orangeAccent,
        ),
        title: Text('我的绘画'),
      ),
      ListTile(
        leading: Icon(
          Icons.insert_drive_file,
          color: Colors.green,
        ),
        title: Text('我的文件'),
      ),
    ],
  );

  Widget _buildHeader() {
    return DrawerHeader(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.only(left: 20,top: 15),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topLeft:Radius.circular(40),
            topRight:Radius.circular(40)
        ),
        image: DecorationImage(
            image: AssetImage('assets/images/caver.webp'),
            fit: BoxFit.cover),
      ),
      child: Text(
        '张风捷特烈',
        style: TextStyle(fontSize: 24, color: Colors.white, shadows: [
          Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)
        ]),
      ),
    );
  }
}


name: Container还具有变换性
subtitle: 【transform】 : 变换矩阵 【Matrix4】 基于Matrix4的矩阵变换，变换详情见线性代数
code:
import 'package:flutter/material.dart';
import 'dart:math';
class ContainerTransform extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //容器
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 150,
      height: 150 * 0.618,
      transform: Matrix4.skew(-pi / 10, 0),
      child: Text(
        "Container",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}


name: Container的约束性
subtitle: 【constraints】 : 约束 【BoxConstraints】 会约束该区域的尺寸，不会小于指定的最小宽高，也不会大于指定的最大宽高。
code:
import 'package:flutter/material.dart';
class ContainerConstraints extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //容器
      color: Colors.blue,
      width: 200,
      height: 200 * 0.618,
      constraints: BoxConstraints(
          minWidth: 100, maxWidth: 150,
          minHeight: 20, maxHeight: 100),
    );
  }
}


name: 可用于显示一个指定宽高的区域
subtitle: 【width】 : 宽 【int】 【高】: 外边距 【int】 【color】: 子组件 【Color】
code:
import 'package:flutter/material.dart';
class CustomContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      width: 200,
      height: 200 * 0.618,
      color: Colors.red.withAlpha(88),
    );
  }
}


name: 可对子组件进行对齐定位
subtitle: 【alignment】 : 对齐定位 【AlignmentGeometry】
code:
import 'package:flutter/material.dart';
class ContainerAlignment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomRight,
      width: 200,
      height: 200 * 0.618,
      color: Colors.grey.withAlpha(88),
      child: Icon(
        Icons.android,
        color: Colors.green,
      ),
    );
  }
}


name: 可以在区域中放入一个子组件
subtitle:
【padding】 : 内边距   【EdgeInsetsGeometry】
【margin】: 外边距   【EdgeInsetsGeometry】
【child】: 子组件    【Widget】

code:
import 'package:flutter/material.dart';
class ContainerWithChild extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topLeft,
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(10),
      width: 200,
      height: 200 * 0.618,
      color: Colors.grey.withAlpha(88),
      child: Icon(Icons.android),
    );
  }
}


name: 可对子组件进行装饰
subtitle: 【decoration】 : 装饰 【Decoration】 可装饰: 边线、圆弧、颜色、渐变色、阴影、图片等内容
code:
import 'package:flutter/material.dart';
class ContainerDecoration extends StatelessWidget {

  static const rainbow = <int>[
    0xffff0000,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff00FFFF,
    0xff0000FF,
    0xff8B00FF
  ];

  @override
  Widget build(BuildContext context) {
    var stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];
    return Container(//容器
      alignment: Alignment.center,
      width: 200,
      height: 200 * 0.618,
      margin: EdgeInsets.all(20),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(//添加渐变色
          gradient: LinearGradient(
              stops: stops,
              colors: rainbow.map((e) => Color(e)).toList()),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              bottomRight: Radius.circular(50)),
          boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(1, 1),
                blurRadius: 10,
                spreadRadius: 1),
          ]),
      child: Text(
        "Container",
        style: TextStyle(fontSize: 20),
      ),
    );
  }
}


name: ListView.separated构造
subtitle: 【separatorBuilder】 : 条目构造器 【IndexedWidgetBuilder】
code:
import 'package:flutter/material.dart';
class SeparatedListView extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView.separated(
        separatorBuilder: (context, index) => Divider(
          thickness: 1,
          height: 1,
          color: Colors.orange,
        ),
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  Widget _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 50,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
      ]),
    ),
  );
}


name: ListView基本使用
subtitle: 【children】 : 子组件列表 【List<Widget>】 【padding】 : 内边距 【EdgeInsetsGeometry】
code:
import 'package:flutter/material.dart';
class CustomListView extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child:  ListView(
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: data
            .map((color) => Container(
          alignment: Alignment.center,
          width: 100,
          height: 50,
          color: color,
          child: Text(
            colorString(color),
            style: TextStyle(color: Colors.white, shadows: [
              Shadow(
                  color: Colors.black,
                  offset: Offset(.5, .5),
                  blurRadius: 2)
            ]),
          ),
        ))
            .toList(),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: ListView.builder构造
subtitle: 【itemCount】 : 条目个数 【int】 【itemBuilder】 : 条目构造器 【IndexedWidgetBuilder】
code:
import 'package:flutter/material.dart';
class BuilderListView extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) => _buildItem(data[index]),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  Widget _buildItem(Color color) => Container(
    alignment: Alignment.center,
    width: 100,
    height: 50,
    color: color,
    child: Text(
      colorString(color),
      style: TextStyle(color: Colors.white, shadows: [
        Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
      ]),
    ),
  );
}


name: ListView横向滑动
subtitle:
      
【scrollDirection】 : 滑动方向   【Axis】
【reverse】 : 是否反向滑动   【bool】
【shrinkWrap】 : 无边界时是否包裹  【bool】

code:
import 'package:flutter/material.dart';
class HorizontalListView extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ListView(
        reverse: true,
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: data
            .map((color) => Container(
          alignment: Alignment.center,
          width: 100,
          height: 50,
          color: color,
          child: Text(
            colorString(color),
            style: TextStyle(color: Colors.white, shadows: [
              Shadow(
                  color: Colors.black,
                  offset: Offset(.5, .5),
                  blurRadius: 2)
            ]),
          ),
        ))
            .toList(),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: ChoiceChip的普通表现如下
subtitle:
【selectedColor】: 选中时颜色   【Color】
【selectedShadowColor】: 选中时阴影颜色   【Color】
【onSelected】: 选中事件   【Fuction(bool)】
    其他属性同Chip组件，无右侧组件。

code:
import 'package:flutter/material.dart';
class CustomChoiceChip extends StatefulWidget {
  @override
  _CustomChoiceChipState createState() => _CustomChoiceChipState();
}

class _CustomChoiceChipState extends State<CustomChoiceChip> {
  bool _select = false;

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      selected: _select,
      padding: EdgeInsets.all(5),
      labelPadding: EdgeInsets.all(5),
      label: Text(
        _select ?
        "You are selected it." :
        "This is a ChoiceChip.",
        style: TextStyle(fontSize: 16),
      ),
      backgroundColor: Colors.grey.withAlpha(66),
      avatar: Image.asset("assets/images/icon_head.webp"),
      selectedColor: Colors.orangeAccent.withAlpha(44),
      selectedShadowColor: Colors.blue,
      shadowColor: Colors.orangeAccent,
      elevation: 3,
      onSelected: (value) => setState(() => _select = value),
    );
  }
}


name: SnackBarAction基本使用
subtitle:
      
【label】 :  标签  【String】
【textColor】 : 文字颜色   【Color】
【disabledTextColor】 : 文字失效色   【Color】
【onPressed】 : 点击回调  【Function()】

code:
import 'package:flutter/material.dart';
class CustomSnackBarAction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: SnackBarAction(
            disabledTextColor: Colors.red,
            textColor: Colors.blue,
            label: '确定',
            onPressed: () => print('onPressed')));
  }
}


name: 文字样式-ThemeData#TextTheme
subtitle: 子组件可以通过ThemeData.of获取主题的数据进行使用。
code:
import 'package:flutter/material.dart';
class TextThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var queryData = Theme.of(context).textTheme;
    var styles = {
      "headline: ": queryData.headline,
      "title: ": queryData.title,
      "subhead: ": queryData.subhead,
      "subtitle: ": queryData.body1,
      "body2: ": queryData.body2,
      "button: ": queryData.button,
      "overline: ": queryData.overline,
      "subtitle: ": queryData.subtitle,
      "button: ": queryData.caption,
      "display1: ": queryData.display1,
      "display2: ": queryData.display2,
      "display3: ": queryData.display3,
      "display4: ": queryData.display4,
    };

    return Container(
      child: Column(
        children: styles.keys.map((e) => buildItem(e, styles[e])).toList(),
      ),
    );
  }

  Widget buildItem(String e, TextStyle style) => Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              e,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Text(
              "@toly",
              style: style,
            )
          ],
        ),
      ),
      Divider(
        height: 1,
      )
    ],
  );
}


name: Theme的用法
subtitle: 使用Theme,可以指定非常多的属性作为主题,这些属性将应用于所有的后代组件，如指定字体、滑块、卡片、文字、分割线、按钮等属性。
code:
import 'package:flutter/material.dart';
class CustomTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
        data: ThemeData(
            cardTheme: CardTheme(color: Colors.red, elevation: 4),
            dividerTheme: DividerThemeData(
                color: Colors.blue,
                thickness: 2
            ),
            sliderTheme: SliderThemeData(
              thumbColor: Colors.red,
              activeTrackColor: Colors.green,
              inactiveTrackColor: Colors.grey,
            )),
        child: Wrap(
            crossAxisAlignment: WrapCrossAlignment.center,
            children: <Widget>[
              Card(
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.transparent,
                ),
              ),
              Container(
                  width: 150,
                  child: Slider(value: 0.8, onChanged: (v) => {})),
              Container(  width: 150,child: Divider())
            ]));
  }
}


name: FilterChip可接受选择事件
subtitle:
【selected】: 是否选择   【bool】
【onSelected】: 选择事件   【Function(bool)】
【selectedColor】: 选择后的颜色   【Color】
【selectedShadowColor】: 选择后的阴影颜色   【Color】,

code:
import 'package:flutter/material.dart';
class CustomFilterChip extends StatefulWidget {
  @override
  _CustomFilterChipState createState() => _CustomFilterChipState();
}

class _CustomFilterChipState extends State<CustomFilterChip> {
  final Map<String, String> map = {
    'A': 'Ant',
    'B': 'Bug',
    'C': 'Cat',
    'D': 'Dog',
  };
  List<String> _selected = <String>[];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Wrap(
          children: map.keys.map((key) =>
              _buildChild(key)).toList(),
        ),
        Container(
            padding: EdgeInsets.all(10),
            child: Text('您已选择: ${_selected.join(', ')}')),
      ],
    );
  }

  Padding _buildChild(String key) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: FilterChip(
        selectedColor: Colors.orange.withAlpha(55),
        selectedShadowColor: Colors.blue,
        shadowColor: Colors.orangeAccent,
        pressElevation: 5,
        elevation: 3,
        avatar: CircleAvatar(child: Text(key)),
        label: Text(map[key]),
        selected: _selected.contains(map[key]),
        onSelected: (bool value) {
          setState(() {
            if (value) {
              _selected.add(map[key]);
            } else {
              _selected.removeWhere((name) => name == map[key]);
            }
          });
        },
      ),
    );
  }
}


name: CupertinoDialogAction基本使用
subtitle:
【isDefaultAction】 : 是否是默认性操作   【bool】
【isDestructiveAction】 : 是否是毁灭性操作   【bool】
【textStyle】: 文字样式   【TextStyle】
【onPressed】: 点击事件   【VoidCallback】
【child】: 子组件   【Widget】

code:
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class CupertinoDialogActionDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CupertinoDialogAction(
          isDestructiveAction: false,
          onPressed: ()=>_toast(context),
          child: Text('CupertinoDialogAction'),
        ),
        CupertinoDialogAction(
          isDestructiveAction: true,
          onPressed: ()=>_toast(context),
          child: Text('CupertinoDialogAction'),
        ),
      ],
    );
  }

  _toast(BuildContext context){
    Scaffold.of(context).showSnackBar(SnackBar(
      backgroundColor: Theme.of(context).primaryColor,
      content: Text('CupertinoDialogAction'),));
  }
}


name: Divider颜色和粗细
subtitle: 【color】: 颜色 【Color】 【thickness】: 线粗细 【double】
code:
import 'package:flutter/material.dart';
class CustomDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataColor = [
      Colors.red, Colors.yellow,
      Colors.blue, Colors.green];
    var dataThickness = [1.0, 2.0, 4.0, 6.0];
    var data = Map.fromIterables(dataColor, dataThickness);
    return Column(
      children: dataColor
          .map((e) => Divider(
        color: e,
        thickness: data[e],
      ))
          .toList(),
    );
  }
}


name: Divider高度和空缺
subtitle: 【indent】: 前面空缺长度 【double】 【endIndent】: 后面空缺长度 【double】 【height】: 占位高 【double】
code:
import 'package:flutter/material.dart';
class HeightDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var dataColor = [
      Colors.red, Colors.yellow,
      Colors.blue, Colors.green];
    var dataThickness = [10.0, 20.0, 30.0, 40.0];
    var data = Map.fromIterables(dataColor, dataThickness);
    return Column(
      children: dataColor
          .map((e) => Divider(
        color: e,
        indent:data[e],
        endIndent: data[e]*2,
        height: data[e],
        thickness: data[e]/10,
      ))
          .toList(),
    );
  }
}


name: TabPageSelector基本使用
subtitle:
【controller】 : 控制器   【TabController】
【indicatorSize】: 指示器大小   【double】
【selectedColor】: 选中色   【Color】
【color】: 颜色    【Color】

code:
import 'package:flutter/material.dart';
class TabPageSelectorDemo extends StatefulWidget {
  @override
  _TabPageSelectorDemoState createState() => _TabPageSelectorDemoState();
}

class _TabPageSelectorDemoState extends State<TabPageSelectorDemo>
    with SingleTickerProviderStateMixin {
  final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Container(color: Colors.purple, child: _buildTableBarView()),
          Positioned(
            bottom: 10,
            child: buildTabPageSelector(),
          ),
        ],
      ),
    );
  }

  Widget buildTabPageSelector() => TabPageSelector(
            controller: _tabController,
            color: Colors.white,
            indicatorSize: 10,
            selectedColor: Colors.orangeAccent,
          );

  Widget _buildTableBarView() => TabBarView(
      controller: _tabController,
      children: tabs
          .map((e) => Center(
                  child: Text(
                e,
                style: TextStyle(color: Colors.white, fontSize: 20),
              )))
          .toList());
}


name: BottomSheet基本使用
subtitle:
      
【builder】 : 组件构造器   【WidgetBuilder】
【backgroundColor】 : 背景色   【Color】
【elevation】 : 影深   【double】
【shape】 : 形状   【ShapeBorder】
【onClosing】 : 关闭回调  【Function()】

code:
import 'package:flutter/material.dart';
class CustomBottomSheet extends StatefulWidget {
  @override
  _CustomBottomSheetState createState() => _CustomBottomSheetState();
}

class _CustomBottomSheetState extends State<CustomBottomSheet> {
  bool opened = false;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: FlatButton(
            color: Colors.blue,
            onPressed: () {
              opened = !opened;
              opened
                  ? Scaffold.of(context)
                      .showBottomSheet((_) => _buildBottomSheet())
                  : Navigator.of(context).pop();
            },
            child: Text(
              '点我显隐BottomSheet',
              style: TextStyle(color: Colors.white),
            )));
  }

  Widget _buildBottomSheet() => BottomSheet(
      enableDrag: true,
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topRight: Radius.circular(60),
          topLeft: Radius.circular(60),
        )
      ),
      backgroundColor: Colors.transparent,
      onClosing: () => print('onClosing'),
      builder: (_) => (Container(
            height: 250,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/sabar_bar.webp'),
                    fit: BoxFit.cover),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(60),
                  topLeft: Radius.circular(60),
                )),
          )));
}


name: CheckBoxListTile的密排属性
subtitle: 【dense】: 是否密排 【bool】
code:
import 'package:flutter/material.dart';
class DenseCheckBoxListTile extends StatefulWidget {
  @override
  _DenseCheckBoxListTileState createState() => _DenseCheckBoxListTileState();
}

class _DenseCheckBoxListTileState extends State<DenseCheckBoxListTile> {
  var _selected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: CheckboxListTile(
        value: _selected,
        dense: true,
        checkColor: Colors.yellow,
        activeColor: Colors.orangeAccent,
        secondary: Image.asset("assets/images/icon_head.webp"),
        title: Text("张风捷特烈"),
        subtitle: Text("@万花过尽知无物"),
        onChanged: (v) => setState(() => _selected = !_selected),
      ),
    );
  }
}


name: CheckBoxListTile的选中效果
subtitle: 【selected】: 是否选中 【bool】
code:
import 'package:flutter/material.dart';
class SelectCheckBoxListTile extends StatefulWidget {
  @override
  _SelectCheckBoxListTileState createState() => _SelectCheckBoxListTileState();
}

class _SelectCheckBoxListTileState extends State<SelectCheckBoxListTile> {
  var _selected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: CheckboxListTile(
        value: _selected,
        selected: _selected,
        checkColor: Colors.yellow,
        activeColor: Colors.orangeAccent,
        secondary: Image.asset("assets/images/icon_head.webp"),
        title: Text("张风捷特烈"),
        subtitle: Text("@万花过尽知无物"),
        onChanged: (v) => setState(() => _selected = !_selected),
      ),
    );
  }
}


name: CheckBoxListTile的基本表现如下
subtitle:
【secondary】: 左侧组件   【Widget】
【checkColor】: ✔️颜色   【Color】
【activeColor】: 选中时外框颜色   【Color】
【title】: 中间上组件   【Widget】
【subtitle】: 中间下组件   【Widget】
【onChanged】: 选中事件   【Function(bool)】

code:
import 'package:flutter/material.dart';
class CustomCheckBoxListTile extends StatefulWidget {
  @override
  _CustomCheckBoxListTileState createState() => _CustomCheckBoxListTileState();
}

class _CustomCheckBoxListTileState extends State<CustomCheckBoxListTile> {
  var _selected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: CheckboxListTile(
        value: _selected,
        checkColor: Colors.yellow,
        activeColor: Colors.orangeAccent,
        secondary: Image.asset("assets/images/icon_head.webp"),
        title: Text("张风捷特烈"),
        subtitle: Text("@万花过尽知无物"),
        onChanged: (v) => setState(() => _selected = !_selected),
      ),
    );
  }
}


name: OrientationBuilder基本使用
subtitle: 【builder】 : 方向组件构造器 【OrientationWidgetBuilder】
code:
import 'package:flutter/material.dart';
class OrientationBuilderDemo extends StatefulWidget {
  @override
  _OrientationBuilderDemoState createState() => _OrientationBuilderDemoState();
}

class _OrientationBuilderDemoState extends State<OrientationBuilderDemo> {
  double _width = 200;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: _width,
          height: 200,
          child: OrientationBuilder(builder: _builder),
          color: Colors.orange,
        ),
        _buildSlider()
      ],
    );
  }

  //根据回调的orientation返回组件
  Widget _builder(BuildContext context, Orientation orientation) {
    switch(orientation){
      case Orientation.portrait:
        return Icon(Icons.phone_android,size: 60,);
        break;
      case Orientation.landscape:
        return RotatedBox(
          quarterTurns: 1,
            child: Icon(Icons.phone_android,size: 60,));
        break;
      default: return Container();
    }
  }

  Widget _buildSlider() =>Slider(
    value: _width,
    max: 350.0,
    min: 80.0,
    divisions: 17,
    onChanged: (v)=> setState(() => _width= v),
  );
}


name: CupertinoActionSheetAction基本使用
subtitle: 【child】 : 子组件 【Widget】 【isDefaultAction】 : 是否默认选中 【bool】 【onPressed】 : 点击事件 【Function()】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class CustomCupertinoActionSheetAction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          margin: EdgeInsets.all(5),
          color: Colors.grey.withAlpha(33),
          child: CupertinoActionSheetAction(
              isDefaultAction: true,
              onPressed: () => DialogAbout.show(context),
              child: Text('张风捷特烈')),
        ),
        Container(
          color: Colors.grey.withAlpha(33),
          margin: EdgeInsets.all(5),
          child: CupertinoActionSheetAction(
              isDefaultAction: false,
              onPressed: () => DialogAbout.show(context),
              child: Text('百里·巫缨')),
        ),
      ],
    );
  }
}


name: AnimatedIcon基本使用
subtitle:
      
【icon】 : 动画图标数据   【AnimatedIcons】
【size】 : 大小  【double】
【color】 : 颜色  【Color】
【progress】 : 动画   【Animation<double>】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomAnimatedIcon extends StatefulWidget {
  @override
  _CustomAnimatedIconState createState() => _CustomAnimatedIconState();
}

class _CustomAnimatedIconState extends State<CustomAnimatedIcon>
    with SingleTickerProviderStateMixin {
  AnimationController _ctrl;

  @override
  void initState() {
    _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _ctrl.forward();
    super.initState();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _ctrl.reset();
          _ctrl.forward();
        });
      },
      child: Wrap(
        runSpacing: 30,
        children: _buildChildren(),
      ),
    );
  }

  final data = {
    Colors.orange: AnimatedIcons.menu_arrow,
    Colors.blue: AnimatedIcons.ellipsis_search,
    Colors.red: AnimatedIcons.close_menu,
    Colors.green: AnimatedIcons.arrow_menu,
    Colors.cyanAccent: AnimatedIcons.play_pause,
    Colors.purple: AnimatedIcons.pause_play,
  };

  List<Widget> _buildChildren() => data.keys
      .map((e) => AnimatedIcon(
    size: 50,
    color: e,
    icon: data[e],
    progress: _ctrl,
  ))
      .toList();
}


name: AboutDialog基本使用
subtitle:
      
【applicationIcon】 : 左上图标   【Widget】
【applicationVersion】 : 版本号  【String】
【applicationName】 : 应用名  【String】
【applicationLegalese】 : 应用律术   【String】
【children】 : 子组件列表   【List<Widget>】

code:
import 'package:flutter/material.dart';
class CustomAboutDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        _buildAboutDialog(),
        Positioned(top: 50, right: 20, child: _buildRaisedButton(context)),
      ],
    );
  }

  Widget _buildRaisedButton(BuildContext context) => RaisedButton(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))),
        color: Colors.blue,
        onPressed: () {
          showDialog(context: context, builder: (ctx) => _buildAboutDialog());
        },
        child: Text(
          'Just Show It',
          style: TextStyle(color: Colors.white),
        ),
      );

  AboutDialog _buildAboutDialog() {
    return AboutDialog(
      applicationIcon: FlutterLogo(),
      applicationVersion: 'v0.0.1',
      applicationName: 'Flutter Unit',
      applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',
      children: <Widget>[
        Container(
            margin: EdgeInsets.only(top: 20),
            width: 80,
            height: 80,
            child: Image.asset('assets/images/icon_head.webp')),
        Container(
            margin: EdgeInsets.only(top: 10),
            alignment: Alignment.center,
            child: Text(
              'The King Of Coder.',
              style: TextStyle(color: Colors.white, fontSize: 20, shadows: [
                Shadow(
                    color: Colors.blue, offset: Offset(.5, .5), blurRadius: 3)
              ]),
            ))
      ],
    );
  }
}


name: FadeInImage.assetNetwork加载网络图片
subtitle:
【placeholder】 : 展位图地址  【String】
【image】 : 显示图地址  【String】
【width】: 宽   【double】
【height】: 高   【double】
【fadeInDuration】: 淡入时长   【Duration】
【fadeOutDuration】: 淡出时长   【Duration】
【fadeInCurve】: 淡入曲线   【Cubic】
【fadeOutCurve】: 淡出曲线   【Cubic】
【fit】: 适应模式   【BoxFit】
【alignment】: 对齐模式   【Alignment】
【repeat】: 重复模式   【ImageRepeat】,

code:
import 'package:flutter/material.dart';
class CustomFadeInImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var placeholder = "assets/images/icon_head.webp";
    var img =
        "https://user-gold-cdn.xitu.io/2017/8/24/"
        "d324efef8cbee6468a018aad7ab2ba6b?imageView2/"
        "1/w/180/h/180/q/85/format/webp/interlace/1";
    return FadeInImage.assetNetwork(
        placeholder: placeholder,
        image: img,
      width: 100,
      height: 100,
      fit: BoxFit.cover,
      repeat:ImageRepeat.noRepeat,
      alignment: Alignment.center,
      fadeInDuration: Duration(seconds: 5),
      fadeInCurve: Curves.easeInCubic,
    );
  }
}


name: Placeholder的fallback属性
subtitle: 当所在区域无宽高约束时，占位组件的宽高。" 【fallbackHeight】: 高 【double】 【fallbackWidth】: 宽 【double】
code:
import 'package:flutter/material.dart';
class FallbackPlaceholder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return UnconstrainedBox(
      child:  Placeholder(
        color: Colors.blue,
        strokeWidth: 2,
        fallbackHeight: 100,
        fallbackWidth: 150,
      ),
    );
  }
}


name: Placeholder基础属性
subtitle: 【color】: 颜色 【Color】 【strokeWidth】: 线粗 【double】
code:
import 'package:flutter/material.dart';
class CustomPlaceholder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100*0.618,
      child:  Placeholder(
        color: Colors.orangeAccent,
        strokeWidth: 2,
      ),
    );
  }
}


name: IconButton属性
subtitle:
【child】: 子组件   【Widget】
【icon】: 内边距   【Widget】
【tooltip】: 长按提示文字   【String】
【highlightColor】: 长按高亮色   【Color】
【splashColor】: 水波纹色   【Color】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/material.dart';
class CustomIconButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: IconButton(
        padding: EdgeInsets.only(),
        onPressed: () {},
        icon: Icon(Icons.android, size: 40, color: Colors.green),
        tooltip: "android",
        highlightColor: Colors.orangeAccent,
        splashColor: Colors.blue,
      ),
    );
  }
}


name: 可以接受选中事件
subtitle: 【selected】: 是否选中 【bool】 【onSelected】: 选中事件 【Function(bool)】
code:
import 'package:flutter/material.dart';
class SelectInputChip extends StatefulWidget {
  @override
  _SelectInputChipState createState() => _SelectInputChipState();
}

class _SelectInputChipState extends State<SelectInputChip> {
  bool _select = false;

  @override
  Widget build(BuildContext context) {
    return InputChip(
      selected: _select,
      padding: EdgeInsets.all(5),
      labelPadding: EdgeInsets.all(3),
      label: Text("This is a InputChip."),
      backgroundColor: Colors.grey.withAlpha(66),
      avatar: Image.asset("assets/images/icon_head.webp"),
      selectedColor: Colors.orangeAccent.withAlpha(88),
      selectedShadowColor: Colors.blue,
      shadowColor: Colors.orangeAccent,
      elevation: 3,
      onDeleted: () =>  Navigator.of(context).pushNamed('AboutMePage'),
      onSelected: (bool value) {
        setState(() {
          _select = value;
        });
        print("onSelected");
      },
    );
  }
}


name: 可以接受点击、删除事件
subtitle: 【onPressed】: 点击事件 【Function()】 【onDeleted】: 删除事件 【Function()】
code:
import 'package:flutter/material.dart';
class PressInputChip extends StatefulWidget {
  @override
  _PressInputChipState createState() => _PressInputChipState();
}

class _PressInputChipState extends State<PressInputChip> {
  bool _delete = false;

  @override
  Widget build(BuildContext context) {
    return InputChip(
        padding: EdgeInsets.all(5),
        labelPadding: EdgeInsets.all(3),
        label: Text(
            !_delete ?
            "This is a InputChip." :
            "You are clicked delete icon."),
        backgroundColor: Colors.grey.withAlpha(66),
        avatar: Image.asset("assets/images/icon_head.webp"),
        selectedColor: Colors.orangeAccent.withAlpha(88),
        selectedShadowColor: Colors.blue,
        shadowColor: Colors.orangeAccent,
        elevation: 3,
        onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'),
        onDeleted: () => setState(() => _delete = !_delete));
  }
}


name: 文字对齐方式
subtitle: 【textAlign】: 对齐方式 【TextAlign】 下面依次是:left、right、center、justify、start、end,
code:
import 'package:flutter/material.dart';
class TextAlignText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: TextAlign.values
          .map((e) => Container(
        width: 120,
        color: Colors.cyanAccent.withAlpha(33),
        height: 120 * 0.618,
        child: Text(
          " 张风捷特烈 toly " * 3,
          textAlign: e,
        ),
      ))
          .toList(),
    );
  }
}


name: 文字的基本样式
subtitle:
【入参】 : 文字  【String】
【style】: 文字样式   【TextStyle】
【color】: 文字样式   【Color】
【fontSize】: 文字大小   【double】
【fontWeight】: 字重   【FontWeight】
【fontStyle】: 字体样式   【fontStyle】
【letterSpacing】: 字距   【double】

code:
import 'package:flutter/material.dart';
class CustomText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var style = TextStyle(
      color: Colors.blue,
      fontSize: 20,
      fontWeight: FontWeight.bold,
      fontStyle: FontStyle.italic,
      letterSpacing: 10,
    );
    return Container(
      width: 200,
      color: Colors.cyanAccent.withAlpha(33),
      height: 200 * 0.618 * 0.618,
      child: Text("toly-张风捷特烈-1994`", style: style),
    );
  }
}


name: 文字方向与最大行数
subtitle: 【maxLines】 : 最大行数 【int】 【textDirection】 : 文字方向 【TextDirection】 下面依次是:rtl、ltr,
code:
import 'package:flutter/material.dart';
class TextDirectionText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 40,
      runSpacing: 10,
      children: TextDirection.values
          .map((e) => Container(
        width: 120,
        color: Colors.cyanAccent.withAlpha(33),
        height: 120 * 0.618,
        child: Text(
          " 张风捷特烈 toly " * 10,
          textDirection: e,
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
        ),
      ))
          .toList(),
    );
  }
}


name: 文字装饰线
subtitle:
【fontFamily】 : 文字字体  【String】
【decoration】: 装饰线   【TextDecoration】
【decorationColor】: 装饰线颜色   【Color】
【decorationThickness】: 装饰线粗   【double】
【decorationStyle】: 装饰线样式   【TextDecorationStyle】

code:
import 'package:flutter/material.dart';
class DecorationText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "19940328",
      style: TextStyle(
          fontSize: 50,
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
          decorationThickness: 3,
          decorationStyle: TextDecorationStyle.wavy,
          decorationColor: Colors.blue,
          fontStyle: FontStyle.italic,
          fontFamily: "DancingScript",
          letterSpacing: 10),
    );
  }
}


name: 是否包裹与越界效果
subtitle:
【softWrap】 : 是否换行  【bool】
【overflow】 : 越界效果  【TextOverflow】
下面softWrap=false;  overflow依次是:clip、fade、ellipsis、visible,

code:
import 'package:flutter/material.dart';
class SoftWrapText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: TextOverflow.values
          .map((e) => Container(
        width: 150,
        color: Colors.cyanAccent.withAlpha(33),
        height: 150 * 0.618 * 0.618,
        child: Text(" 张风捷特烈 toly " * 5,
            overflow: e,
            softWrap: false),
      ))
          .toList(),
    );
  }
}


name: 文字阴影
subtitle: 【shadows】 : 文字 【List<Shadow>】 【backgroundColor】: 背景颜色 【Color】
code:
import 'package:flutter/material.dart';
class ShadowText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      "张风捷特烈",
      style: TextStyle(
          fontSize: 50,
          color: Colors.white,
          backgroundColor: Colors.black,
          shadows: [
            Shadow(
                color: Colors.cyanAccent,
                offset: Offset(1, 1),
                blurRadius: 10),
            Shadow(
                color: Colors.blue,
                offset: Offset(-0.1, 0.1),
                blurRadius: 10),
          ]),
    );
  }
}


name: 用于显示一个图标
subtitle: 【入参】 :图标数据 【IconData】 【size】 : 大小 【double】 【color】: 颜色 【Color】
code:
import 'package:flutter/material.dart';
class CustomIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        Icon(
          Icons.send,
          color: Colors.orange,
          size: 60,
        ),
        Icon(
          Icons.android,
          color: Colors.green,
          size: 100,
        ),
      ],
    );
  }
}


name: 使用自定义图标
subtitle: 可在iconfont网站中下载图标字体进行使用
code:
import 'package:flutter/material.dart';
import '../../../../app/res/toly_icon.dart';
class MyIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: [
        TolyIcon.icon_search,
        TolyIcon.icon_star,
        TolyIcon.icon_layout,
        TolyIcon.icon_star_ok
      ]
          .map((e) => Icon(
        e,
        color: Colors.green,
        size: 60,
      ))
          .toList(),
    );
  }
}


name: 文字样式-TextTheme
subtitle: 后代组件可以通过CupertinoTheme.of获取主题的数据进行使用。
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TextCupertinoTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var queryData = CupertinoTheme.of(context).textTheme;
    var styles = {
      "tabLabelTextStyle: ": queryData.tabLabelTextStyle,
      "actionTextStyle: ": queryData.actionTextStyle,
      "navActionTextStyle: ": queryData.navActionTextStyle,
      "textStyle: ": queryData.textStyle,
      "navTitleTextStyle: ": queryData.navTitleTextStyle,
      "pickerTextStyle: ": queryData.pickerTextStyle,
      "dateTimePickerTextStyle: ": queryData.dateTimePickerTextStyle,
      "navLargeTitleTextStyle: ": queryData.navLargeTitleTextStyle,
    };

    return Container(
      child: Column(
        children: styles.keys.map((e) => buildItem(e, styles[e])).toList(),
      ),
    );
  }

  Widget buildItem(String e, TextStyle style) => Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Text(
              e,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            Text(
              "@toly",
              style: style,
            )
          ],
        ),
      ),
      Divider(
        height: 1,
      )
    ],
  );
}


name: CupertinoThemeData的使用
subtitle: 和Theme一样可以通过指定的属性，让它们在后代中共享，不过属性较少。注意如果需要使用主题，不能在当前的context中获取。
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTheme(
        data: CupertinoThemeData(
            primaryColor: Colors.blue,
            primaryContrastingColor: Colors.green
        ),
        child: _ChildUseTheme());
  }
}

class _ChildUseTheme extends StatelessWidget {
  const _ChildUseTheme({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Container(
            width: 50,
            height: 50,
            color: CupertinoTheme.of(context).primaryContrastingColor,
          ),
          Container(
              width: 150,
              child: Slider(value: 0.8, onChanged: (v) => {})),
          Container(  width: 150,child: Divider(color:CupertinoTheme.of(context).primaryContrastingColor,thickness: 1,))
        ]);
  }
}


name: FlatButton点击事件
subtitle:
【color】: 颜色   【Color】
【splashColor】: 水波纹颜色   【Color】
【child】: 子组件   【Widget】
【textColor】: 子组件文字颜色   【Color】
【highlightColor】: 长按高亮色   【Color】
【padding】: 内边距   【EdgeInsetsGeometry】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/material.dart';
class CustomFlatButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: ()=>{},
      padding: EdgeInsets.all(8),
      splashColor: Colors.green,
      child: Text("FlatButton"),
      textColor: Color(0xffFfffff),
      color: Colors.blue,
      highlightColor: Color(0xffF88B0A),
    );
  }
}


name: BackButton属性
subtitle: 【color】: 颜色 【Color】 【onPressed】: 点击事件 【Function】 onPressed为空会退出当前栈
code:
import 'package:flutter/material.dart';
class CustomBackButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = [Colors.red,Colors.yellow,Colors.blue,Colors.green];
    return Wrap(
      spacing: 10,
      children: data.map((e)=>BackButton(
        color: e,
      )).toList()
    );
  }
}


name: SimpleDialogOption基本使用
subtitle: 【child】 : 子组件 【Widget】 【onPressed】 : 点击事件 【Function()】
code:
import 'package:flutter/material.dart';
class CustomSimpleDialogOption extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: double.infinity,
          height: 50,
          margin: EdgeInsets.all(5),
          color: Colors.grey.withAlpha(33),
          child: SimpleDialogOption(
              onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),
              child: Text('张风捷特烈')),
        ),
        Container(
          height: 50,
          alignment: Alignment.center,
          width: double.infinity,
          color: Colors.grey.withAlpha(33),
          margin: EdgeInsets.all(5),
          child: SimpleDialogOption(
              onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'),
              child: Text('百里·巫缨')),
        ),
      ],
    );
  }
}


name: Builder的使用
subtitle: 【builder】 : 组件构造器 【WidgetBuilder】 同一个类中使用`XXX.of(context)`获取某类状态对象方法会存在`上下文滞后`的错误，使用Builder解决。
code:
import 'package:flutter/material.dart';
class BuilderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Builder'),
        ),
        floatingActionButton: Builder(
          builder: (ctx) => FloatingActionButton(
            onPressed: () {
              Scaffold.of(ctx)
                  .showSnackBar(SnackBar(content: Text('hello builder')));
            },
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }


}


name: SwitchListTile的密排属性
subtitle: 【dense】: 是否密排 【bool】
code:
import 'package:flutter/material.dart';
class DenseSwitchListTile extends StatefulWidget {
  @override
  _DenseSwitchListTileState createState() => _DenseSwitchListTileState();
}

class _DenseSwitchListTileState extends State<DenseSwitchListTile> {
  var _value=false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: SwitchListTile(
        value: _value,
        dense: true,
        selected: _value,
        activeColor: Colors.orangeAccent,
        secondary: Image.asset("assets/images/icon_head.webp"),
        title: Text("张风捷特烈"),
        subtitle: Text("@万花过尽知无物"),
        onChanged: (v) => setState(() => _value = !_value),
      ),
    );
  }
}


name: SwitchListTile的选中效果
subtitle:
【selected】: 是否选中   【bool】
【inactiveThumbImage】: 未选中时圆圈图片   【ImageProvider】
【activeThumbImage】: 选中时圆圈图片   【ImageProvider】

code:
import 'package:flutter/material.dart';
class SelectSwitchListTile extends StatefulWidget {
  @override
  _SelectSwitchListTileState createState() => _SelectSwitchListTileState();
}

class _SelectSwitchListTileState extends State<SelectSwitchListTile> {
  var _value=false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: SwitchListTile(
        value: _value,
        selected: _value,
        activeColor: Colors.orangeAccent,
        secondary: Image.asset("assets/images/icon_head.webp"),
        inactiveThumbImage: AssetImage("assets/images/pica.gif"),
        activeThumbImage: AssetImage("assets/images/icon_head.webp"),
        title: Text("张风捷特烈"),
        subtitle: Text("@万花过尽知无物"),
        onChanged: (v) => setState(() => _value = !_value),
      ),
    );
  }
}


name: SwitchListTile的基本表现如下
subtitle:
【secondary】: 左侧组件   【Widget】
【title】: 中间上组件   【Widget】
【subtitle】: 中间下组件   【Widget】
【inactiveThumbColor】: 未选中时圆圈颜色   【Color】
【inactiveTrackColor】: 未选中滑槽颜色   【Color】
【activeColor】: 选中时圆圈颜色   【Color】
【activeTrackColor】: 选中滑槽颜色   【Color】
【onChanged】: 选中事件   【Function(bool)】

code:
import 'package:flutter/material.dart';
class CustomSwitchListTile extends StatefulWidget {
  @override
  _CustomSwitchListTileState createState() => _CustomSwitchListTileState();
}

class _CustomSwitchListTileState extends State<CustomSwitchListTile> {
  var _value=false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: SwitchListTile(
        value: _value,
        inactiveThumbColor:Colors.cyanAccent ,
        inactiveTrackColor: Colors.blue.withAlpha(88),
        activeColor: Colors.orangeAccent,
        activeTrackColor: Colors.orange,
        secondary: Image.asset("assets/images/icon_head.webp"),
        title: Text("张风捷特烈"),
        subtitle: Text("@万花过尽知无物"),
        onChanged: (v) => setState(() => _value = !_value),
      ),
    );
  }
}


name: DataTable的sort
subtitle:
      
【sortColumnIndex】 : 列号   【int】
【columnSpacing】 : 列间距   【double】
【sortAscending】 : 是否顺序  【bool】

code:
import 'package:flutter/material.dart';
class _BeanOp {
  final int id;
  final String name;
  final String type;
  bool select;

  _BeanOp(this.id, this.name, this.type, this.select);

  @override
  String toString() {
    return '_BeanOp{id: $id, name: $name, type: $type, select: $select}';
  }
}

class SortDataTable extends StatefulWidget {
  @override
  _SortDataTableState createState() => _SortDataTableState();
}

class _SortDataTableState extends State<SortDataTable> {
  var data = [
    _BeanOp(101, 'DataTable', 'StatelessWidget', false),
    _BeanOp(44, 'RangeSlider', 'StatefulWidget', false),
    _BeanOp(2, 'Text', 'StatelessWidget', false),
    _BeanOp(1, 'Image', 'StatefulWidget', false),
  ];

  bool _sortAscending = false;
  var selectData = <_BeanOp>[];

  @override
  Widget build(BuildContext context) {
    return DataTable(
        columnSpacing: 20,
        sortColumnIndex: 1,
        sortAscending: _sortAscending,
        columns: [
          DataColumn(
            label: Container(
              child: Checkbox(
                value: selectData.length == data.length,
                onChanged: _onSelectAll,
              ),
            ),
          ),
          DataColumn(label: Text('id'), numeric: false, onSort: _onSortId),
          DataColumn(label: Text('名称')),
          DataColumn(label: Text('类型')),
        ],
        rows: data
            .map((e) => DataRow(selected: false, cells: [
          DataCell(Checkbox(
            value: e.select,
            onChanged: (v) => _onSelectOne(v, e),
          )),
          DataCell(Text('${e.id}')),
          DataCell(Text('${e.name}'),
              showEditIcon: true, onTap: () {}),
          DataCell(Text('${e.type}')),
        ]))
            .toList());
  }

  _onSortId(int index, bool ascending) {
    setState(() {
      _sortAscending = ascending;
      data.sort(
              (a, b) => ascending ? a.id.compareTo(b.id) : b.id.compareTo(a.id));
    });
  }

  _onSelectOne(bool selected, _BeanOp e) {
    setState(() {
      if (selected) {
        //选中
        selectData.add(e);
      } else {
        selectData.remove(e);
      }
      e.select = selected;
      print(selectData);
    });
  }

  _onSelectAll(bool select) {
    setState(() {
      if (select) {
        data.forEach((e) => e.select = true);
        selectData = data.map((e) => e).toList();
      } else {
        data.forEach((e) => e.select = false);
        selectData = [];
      }
    });
  }
}


name: DataTable基本使用
subtitle: 【columns】 : 列 【List<DataColumn>】 【rows】 : 行 【List<DataRow>】
code:
import 'package:flutter/material.dart';
class _Bean {
  final int id;
  final String name;
  final String type;

  _Bean(this.id, this.name, this.type);
}

class CustomDataTable extends StatelessWidget {
  final data = [
    _Bean(101, 'DataTable', 'StatelessWidget'),
    _Bean(44, 'RangeSlider', 'StatefulWidget'),
    _Bean(2, 'Text', 'StatelessWidget'),
    _Bean(1, 'Image', 'StatefulWidget'),
  ];

  final columns = ['id', '名称', '类型'];

  @override
  Widget build(BuildContext context) {
    return DataTable(
        columns: columns.map((e) => DataColumn(label: Text(e))).toList(),
        rows: data
            .map((e) => DataRow(cells: [
          DataCell(Text('${e.id}')),
          DataCell(Text('${e.name}')),
          DataCell(Text('${e.type}')),
        ]))
            .toList());
  }
}


name: 样式用于显示文字
subtitle: 【style】 : 样式-3种枚举 【FlutterLogoStyle】 【textColor】: 文字颜色 【Color】
code:
import 'package:flutter/material.dart';
class FlutterLogoWithText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      FlutterLogoStyle.horizontal:Colors.blue,
      FlutterLogoStyle.markOnly:Colors.red,
      FlutterLogoStyle.stacked:Colors.green,
    };

    return Wrap(
      spacing: 20,
      children: data.keys.map((e) => FlutterLogo(
        size: 80,
        style: e,
        textColor: data[e],
      ))
          .toList(),
    );
  }
}


name: 用于显示一个FlutterLogo
subtitle: 【size】 : 大小 【double】 【colors】: 颜色 【MaterialColor】
code:
import 'package:flutter/material.dart';
class CustomFlutterLogo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var data = {
      Colors.blue:50.0,
      Colors.red:60.0,
      Colors.green:70.0,
      Colors.yellow:80.0,
    };
    return Wrap(
      children: data.keys
          .map((e) => FlutterLogo(
        size: data[e],
        textColor: e,
      ))
          .toList(),
    );
  }
}


name: AboutListTile基本使用
subtitle:
      
【icon】 : 左图标   【Widget】
【applicationIcon】 : 左上图标   【Widget】
【applicationVersion】 : 版本号  【String】
【applicationName】 : 应用名  【String】
【applicationLegalese】 : 应用律术   【String】
【aboutBoxChildren】 : 弹框内容组件   【List<Widget>】

code:
import 'package:flutter/material.dart';
class AboutListTileDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AboutListTile(
      icon: Icon(Icons.info),
      applicationIcon: FlutterLogo(),
      applicationName: 'Flutter Unit',
      applicationVersion: 'v0.0.1',
      applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',
      aboutBoxChildren: [
        Padding(
          padding: const EdgeInsets.all(10.0),
          child: Text(
            '      FlutterUnit是【张风捷特烈】的开源项目，'
                '收录Flutter的200+组件，并附加详细介绍以及操作交互，'
                '希望帮助广大编程爱好者入门Flutter。'
                '更多知识可以关注掘金账号、公众号【编程之王】。',
            style: TextStyle(color: Color(0xff999999), fontSize: 16),
            textAlign: TextAlign.justify,
          ),
        ),
      ],
    );
  }
}


name: 用于显示一个角标
subtitle:
【message】 : 显示的文字信息  【String】
【location】 : 位置*4  【BannerLocation】
【color】: 角标颜色   【Color】
【child】: 孩子   【Widget】
【textStyle】: 文字样式   【TextStyle】

code:
import 'package:flutter/material.dart';
class CustomBanner extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      BannerLocation.topStart: Colors.red,
      BannerLocation.topEnd: Colors.blue,
      BannerLocation.bottomStart: Colors.green,
      BannerLocation.bottomEnd: Colors.yellow,
    };

    return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: data.keys.map((e) =>
            Container(
              color: Color(0xffD8F5FF),
              width: 150,
              height: 150 * 0.618,
              child: Banner(
                message: "Flutter 1.12发布",
                location: e,
                color: data[e],
                child: Padding(
                    padding: EdgeInsets.all(20),
                    child: FlutterLogo(textColor: Colors.blue,
                      style: FlutterLogoStyle.horizontal,)),
              ),
            )).toList());
  }
}


name: AlertDialog基本使用
subtitle:
      
【title】 : 顶部组件   【Widget】
【content】 : 内容组件  【Widget】
【titleTextStyle】 : 顶部文字样式  【TextStyle】
【contentTextStyle】 : 内容文字样式  【TextStyle】
【titlePadding】 : 顶部内边距  【EdgeInsetsGeometry】
【contentPadding】 : 内容内边距  【EdgeInsetsGeometry】
【actions】 : 右下角组件列表  【List<Widget>】
【backgroundColor】 : 右下角组件列表  【背景色】
【elevation】 : 右下角组件列表  【背景色】
【shape】 : 影深   【double】

code:
import 'package:flutter/material.dart';
class CustomAlertDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildRaisedButton(context),
        _buildAlertDialog(),
      ],
    );
  }

  Widget _buildRaisedButton(BuildContext context) => RaisedButton(
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10))),
    color: Colors.blue,
    onPressed: () {
      showDialog(context: context, builder: (ctx) => _buildAlertDialog());
    },
    child: Text(
      'Just Show It !',
      style: TextStyle(color: Colors.white),
    ),
  );

  Widget _buildAlertDialog() {
    return AlertDialog(
      title: _buildTitle(),
      titleTextStyle: TextStyle(fontSize: 20, color: Colors.black),
      titlePadding: EdgeInsets.only(
        top: 5,
        left: 20,
      ),
      contentPadding: EdgeInsets.symmetric(horizontal: 5),
      backgroundColor: Colors.white,
      content: _buildContent(),
      actions: <Widget>[
        Icon(Icons.android, color: Colors.blue,),
        Icon(Icons.add, color: Colors.blue,),
        Icon(Icons.g_translate, color: Colors.blue,),
        Icon(Icons.games, color: Colors.blue,),
      ],
      elevation: 4,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10))),
    );
  }

  Widget _buildTitle() {
    return Row(
      //标题
      children: <Widget>[
        Image.asset(
          "assets/images/icon_head.webp",
          width: 30,
          height: 30,
        ),
        SizedBox(width: 10,),
        Expanded(
            child: Text(
              "关于",
              style: TextStyle(fontSize: 18),
            )),
        CloseButton()
      ],
    );
  }

  Widget _buildContent() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(10.0),
          child: Text(
            '      FlutterUnit是【张风捷特烈】的开源项目，'
                '收录Flutter的200+组件，并附加详细介绍以及操作交互，'
                '希望帮助广大编程爱好者入门Flutter。'
                '更多知识可以关注掘金账号、公众号【编程之王】。',
            style: TextStyle(color: Color(0xff999999), fontSize: 16),
            textAlign: TextAlign.justify,
          ),
        ),
      ],
    );
  }
}


name: CheckedModeBanner基本使用
subtitle: 【child】 : 组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CheckedModeBannerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CheckedModeBanner(
      child: Container(
        alignment: Alignment.center,
        width: 250,
        height: 150,
        color: Theme.of(context).primaryColor,
        child: Text(
          "CheckedModeBanner",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }
}


name: Offstage基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【offstage】 : 是否消失 【bool】
code:
import 'package:flutter/material.dart';
class CustomOffstage extends StatefulWidget {
  @override
  _CustomOffstageState createState() => _CustomOffstageState();
}

class _CustomOffstageState extends State<CustomOffstage> {
  bool _off = false;

  @override
  Widget build(BuildContext context) {
    var radBox = Container(
      height: 50,
      width: 60,
      color: Colors.red,
      child: Switch(
          value: _off,
          onChanged: (v) => setState(() => _off = v)),
    );

    return Container(
      width: 250,
      height: 200,
      child: Row(
        children: <Widget>[radBox, _buildOffStage(), radBox],
      ),
    );
  }

  Widget _buildOffStage() => Offstage(
      offstage: _off,
      child: Container(
        alignment: Alignment.center,
        height: 100,
        width: 100,
        color: Colors.blue,
        child: Text(
          "Offstage",
          style: TextStyle(fontSize: 20),
        ),
      ));
}


name: ClipRect基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【clipBehavior】 : 裁剪行为   【Clip】
【clipper】 : 裁剪器   【CustomClipper<Rect>】

code:
import 'package:flutter/material.dart';
class CustomClipRect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: SizedBox(
        height: 100,
        width: 100,
        child: Image.asset(
          "assets/images/wy_300x200.webp",
          fit: BoxFit.cover,),
      ),
    );
  }
}


name: RotatedBox基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【quarterTurns】 : 旋转多少个90° 【int】
code:
import 'package:flutter/material.dart';
class CustomRotatedBox extends StatefulWidget {
  @override
  _CustomRotatedBoxState createState() => _CustomRotatedBoxState();
}

class _CustomRotatedBoxState extends State<CustomRotatedBox> {
  int _quarterTurns = 0;

  @override
  Widget build(BuildContext context) {
    return RotatedBox(
      quarterTurns: _quarterTurns,
      child: GestureDetector(
          onTap: () => setState(() => _quarterTurns++),
          child: Icon(
            Icons.android,
            size: 60,
            color: Colors.blue,
          )),
    );
  }
}


name: PhysicalShape基本使用
subtitle:
【clipper】 : 裁剪器   【CustomClipper<Path>】
【clipBehavior】 : 裁剪行为   【Clip】
【child】 : 子组件   【Widget】
【elevation】 : 阴影深   【double】
【shadowColor】 : 阴影颜色   【Color】
【color】: 颜色    【Color】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PhysicalShapeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      child: PhysicalShape(
          shadowColor: Colors.orange,
          elevation: 3,
          child: Image.asset(
            'assets/images/caver.webp',
            fit: BoxFit.cover,
          ),
          clipBehavior: Clip.hardEdge,
          clipper: ShapeBorderClipper(
            shape: CircleBorder(side: BorderSide.none),
          ),
          color: Colors.deepPurpleAccent),
    );
  }
}


name: LimitedBox基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【maxHeight】 : 最大高 【double】 【maxWidth】 : 最大宽 【double】
code:
import 'package:flutter/material.dart';
class CustomLimitedBox extends StatefulWidget {
  @override
  _CustomLimitedBoxState createState() => _CustomLimitedBoxState();
}

class _CustomLimitedBoxState extends State<CustomLimitedBox> {
  var _text = '';

  @override
  Widget build(BuildContext context) {
    var child = Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 50,
      height: 50,
      child: Text("Static"),
    );

    var box = LimitedBox(
      maxHeight: 60,
      maxWidth: 100,
      child: Container(color: Colors.orange, child: Text(_text)),
    );
    return Column(
      children: <Widget>[
        Container(
          color: Colors.grey.withAlpha(22),
          width: 300,
          height: 100,
          child: Row(
            children: <Widget>[child, UnconstrainedBox(child: box), child],
          ),
        ),
        _buildInput()
      ],
    );
  }

  Widget _buildInput() {
    return Padding(
      padding: const EdgeInsets.all(18.0),
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          hintText: '请输入',
        ),
        onChanged: (v) {
          setState(() {
            _text = v;
          });
        },
      ),
    );
  }
}


name: 该组件无法使用
subtitle: 【-】 : - 【-】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoTextSelectionToolbarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(10),
        width: 300,
        // color: Theme.of(context).primaryColor,
        child: Text(
          "注：此组件私有构造器，外部无法使用，并没有使用价值。",
          style: TextStyle(color: Colors.red, fontSize: 18),
        ),
    );
  }
}


name: OverflowBox基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【minWidth】 : 最小宽   【double】
【minHeight】 : 最小高   【double】
【maxHeight】 : 最大高   【double】
【maxWidth】 : 最大宽   【double】
【alignment】 : 对齐方式   【AlignmentGeometry】

code:
import 'package:flutter/material.dart';
class CustomOverflowBox extends StatefulWidget {
  @override
  _CustomOverflowBoxState createState() => _CustomOverflowBoxState();
}

class _CustomOverflowBoxState extends State<CustomOverflowBox> {
  var _text = '';

  @override
  Widget build(BuildContext context) {
    var box = OverflowBox(
      alignment: Alignment.center,
      minHeight: 50,
      minWidth: 50,
      maxWidth: 200,
      maxHeight: 120,
      child: Container(
        color: Colors.orange,
        child: Text(_text),
      ),
//        child: Text("张风"),
    );
    return Column(
      children: <Widget>[
        Container(
            color: Colors.grey.withAlpha(33),
            width: 100,
            height: 100,
            child: box),
        _buildInput()
      ],
    );
  }

  Widget _buildInput() {
    return Padding(
      padding: const EdgeInsets.all(18.0),
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          hintText: '请输入',
        ),
        onChanged: (v) {
          setState(() {
            _text = v;
          });
        },
      ),
    );
  }
}


name: CustomPaint绘线贝塞尔曲线
subtitle: Flutter也支持贝塞尔曲线等复杂绘制。
code:
import 'dart:ui';
import 'package:flutter/material.dart';
class PlayBezier3Page extends StatefulWidget {
  @override
  _PlayBezier3PageState createState() => _PlayBezier3PageState();
}

class _PlayBezier3PageState extends State<PlayBezier3Page> {
  List<Offset> _pos = <Offset>[];
  int selectPos;

  @override
  void initState() {
    _initPoints();
    super.initState();
  }

  void _initPoints() {
    _pos = List<Offset>();
    _pos.add(Offset(0, 0));
    _pos.add(Offset(60, -60));
    _pos.add(Offset(-90, -90));
    _pos.add(Offset(-120, -40));
  }


  @override
  Widget build(BuildContext context) {
    return  Container(
        height: 200,
        width: MediaQuery.of(context).size.width,
        child: RepaintBoundary(
          child: CustomPaint(
            painter: BezierPainter(pos: _pos, selectPos: selectPos),
          ),
        ),

    );
  }
}

class BezierPainter extends CustomPainter {
  Paint _gridPaint;
  Path _gridPath;

  Paint _mainPaint;
  Path _mainPath;
  int selectPos;
  Paint _helpPaint;

  List<Offset> pos;

  BezierPainter({this.pos, this.selectPos}) {
    _gridPaint = Paint()..style = PaintingStyle.stroke;
    _gridPath = Path();

    _mainPaint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    _mainPath = Path();

    _helpPaint = Paint()
      ..color = Colors.purple
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round;
  }

  @override
  void paint(Canvas canvas, Size size) {
    canvas.clipRect(Offset.zero & size);
    canvas.translate(size.width / 2, size.height / 2);
    _drawGrid(canvas, size); //绘制格线
    _drawAxis(canvas, size); //绘制轴线

      _mainPath.moveTo(pos[0].dx, pos[0].dy);
      _mainPath.cubicTo(pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);
      canvas.drawPath(_mainPath, _mainPaint);
      _drawHelp(canvas);
      _drawSelectPos(canvas);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;

  void _drawGrid(Canvas canvas, Size size) {
    _gridPaint
      ..color = Colors.grey
      ..strokeWidth = 0.5;
    _gridPath = _buildGridPath(_gridPath, size);
    canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);

    canvas.save();
    canvas.scale(1, -1); //沿x轴镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();

    canvas.save();
    canvas.scale(-1, 1); //沿y轴镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();

    canvas.save();
    canvas.scale(-1, -1); //沿原点镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();
  }

  void _drawAxis(Canvas canvas, Size size) {
    canvas.drawPoints(
        PointMode.lines,
        [
          Offset(-size.width / 2, 0),
          Offset(size.width / 2, 0),
          Offset(0, -size.height / 2),
          Offset(0, size.height / 2),
          Offset(0, size.height / 2),
          Offset(0 - 7.0, size.height / 2 - 10),
          Offset(0, size.height / 2),
          Offset(0 + 7.0, size.height / 2 - 10),
          Offset(size.width / 2, 0),
          Offset(size.width / 2 - 10, 7),
          Offset(size.width / 2, 0),
          Offset(size.width / 2 - 10, -7),
        ],
        _gridPaint
          ..color = Colors.blue
          ..strokeWidth = 1.5);
  }

  Path _buildGridPath(Path path, Size size, {step = 20.0}) {
    for (int i = 0; i < size.height / 2 / step; i++) {
      path.moveTo(0, step * i);
      path.relativeLineTo(size.width / 2, 0);
    }
    for (int i = 0; i < size.width / 2 / step; i++) {
      path.moveTo(step * i, 0);
      path.relativeLineTo(
        0,
        size.height / 2,
      );
    }
    return path;
  }

  void _drawHelp(Canvas canvas) {
    canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);
    canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);
  }

  void _drawSelectPos(Canvas canvas) {
    if (selectPos == null) return;
    canvas.drawCircle(
        pos[selectPos],
        10,
        _helpPaint
          ..color = Colors.green
          ..strokeWidth = 2);
  }
}


name: CustomPaint绘线图形
subtitle: 【painter】 : 绘画器 【CustomPainter】
code:
import 'package:flutter/material.dart';
class ClockPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      child:RepaintBoundary(
        child: CustomPaint(//使用CustomPaint盛放画布
            painter: ClockPainter(),
        ),
      ),
    )
    ;
  }
}

class ClockPainter extends CustomPainter {
  Paint _paint;
  var _radius = 3.0; //小球半径
  Path _path = Path(); //画笔对象
  ClockPainter () {
    _paint = Paint()..color= Color(0xff45d0fd)..isAntiAlias=true;
    _path.addOval(Rect.fromCircle(radius: _radius, center: Offset(0, 0))); //小球路径
  }

  @override
  void paint(Canvas canvas, Size size) {
    print(size);
    canvas.clipRect(Offset.zero & size);
    canvas.translate(size.width/2-65*2, 0);
    renderDigit(1, canvas);//渲染数字
    canvas.translate(65, 0);//平移画布
    renderDigit(9, canvas);
    canvas.translate(65, 0); renderDigit(9, canvas);
    canvas.translate(65, 0); renderDigit(4, canvas);
  }
  //渲染数字  num  ：要显示的数字   canvas ：画布
  void renderDigit(int num, Canvas canvas) {
    if (num > 10) {  return; }
    for (int i = 0; i < digit[num].length; i++) {
      for (int j = 0; j < digit[num][j].length; j++) {
        if (digit[num][i][j] == 1) {
          canvas.save();
          double rX = j * 2 * (_radius + 1) + (_radius + 1); //第(i，j)个点圆心横坐标
          double rY = i * 2 * (_radius + 1) + (_radius + 1); //第(i，j)个点圆心纵坐标
          canvas.translate(rX, rY);
          canvas.drawPath(_path, _paint);
          canvas.restore();
        }
      }
    }
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate)=> false;
}

const digit = [
  [
    [0, 0, 1, 1, 1, 0, 0],
    [0, 1, 1, 0, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 0, 1, 1, 0],
    [0, 0, 1, 1, 1, 0, 0]
  ], //0

  [
    [0, 0, 0, 1, 1, 0, 0],
    [0, 1, 1, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [1, 1, 1, 1, 1, 1, 1]
  ], //1
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 1, 1, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 1, 1, 1, 1, 1]
  ], //2
  [
    [1, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 1, 1, 1, 0, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ], //3

  [
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 1, 0],
    [0, 0, 1, 1, 1, 1, 0],
    [0, 1, 1, 0, 1, 1, 0],
    [1, 1, 0, 0, 1, 1, 0],
    [1, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 1, 1]
  ], //4
  [
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ], //5
  [
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 1, 1, 0, 0, 0, 0],
    [1, 1, 0, 0, 0, 0, 0],
    [1, 1, 0, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ], //6
  [
    [1, 1, 1, 1, 1, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 0, 1, 1, 0, 0, 0],
    [0, 0, 1, 1, 0, 0, 0]
  ], //7
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 1, 1, 0]
  ], //8
  [
    [0, 1, 1, 1, 1, 1, 0],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [1, 1, 0, 0, 0, 1, 1],
    [0, 1, 1, 1, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 0, 1, 1],
    [0, 0, 0, 0, 1, 1, 0],
    [0, 0, 0, 1, 1, 0, 0],
    [0, 1, 1, 0, 0, 0, 0]
  ], //9
  [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 1, 1, 0],
    [0, 1, 1, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ] //:
];


name: IgnorePointer基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【ignoring】 : 是否忽视事件   【bool】
如下,Switch选中时ignoring为true，按钮事件将被锁定，无法点击。

code:
import 'package:flutter/material.dart';
class CustomIgnorePointer extends StatefulWidget {
  @override
  _CustomIgnorePointerState createState() => _CustomIgnorePointerState();
}

class _CustomIgnorePointerState extends State<CustomIgnorePointer> {
  bool _ignore = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          GestureDetector(
            onTap: (){
              print('IgnorePointer');
            },
            child: IgnorePointer(
              ignoring: _ignore,
              child: _buildButton(),
            ),
          ),
          _buildSwitch(),
          Text(!_ignore ? '允许点击' : '点击已锁定')
        ],
      ),
    );
  }

  Widget _buildButton() => RaisedButton(
      color: Theme.of(context).primaryColor,
      child: Text(
        'To About',
        style: TextStyle(color: Colors.white),
      ),
      onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'));

  _buildSwitch() => Switch(
      value: _ignore,
      onChanged: (v) {
        setState(() {
          _ignore = v;
        });
      });
}


name: LayoutBuilder基本认识
subtitle: 【builder】 : 布局构造器 【LayoutWidgetBuilder】
code:
import 'package:flutter/material.dart';
class CustomLayoutBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('CustomLayoutBuild');
    return Container(
      alignment: Alignment.center,
      height: 80,
      width: 150,
      color: Colors.green,
      child: LayoutBuilder(
        builder: (_, zone) {
          return Text(
            '父容器宽:${zone.maxWidth}\n'
            '父容器高:${zone.maxHeight}',
            style: TextStyle(color: Colors.white, fontSize: 16),
          );
        },
      ),
    );
  }
}


name: LayoutBuilder的展开使用
subtitle: 使用TextPainter来检测文字的行数，实现展开或收起功能。
code:
import 'package:flutter/material.dart';
class SimpleExpandableText extends StatefulWidget {

  @override
  createState() => _SimpleExpandableTextState();
}

class _SimpleExpandableTextState extends State<SimpleExpandableText> {

  final text = '桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。'
      '红的像火，粉的像霞，白的像雪。'
      '花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。'
      '花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。'
      '野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。';

  bool expand = false;
  int maxLines =3;


  final style = TextStyle(fontSize: 15, color: Colors.grey, shadows: [
    Shadow(
        color: Colors.white, offset: Offset(1,1)
    )
  ]);

  @override
  build(context) => Container(
    decoration: BoxDecoration(
        color: Colors.cyanAccent.withAlpha(8),
        borderRadius: BorderRadiusDirectional.all(Radius.circular(20))),
    padding: EdgeInsets.all(15),
    child: LayoutBuilder(builder: (context, size) {

      final painter = TextPainter(
        text: TextSpan(text: text, style: style),
        maxLines: maxLines,
        textDirection: TextDirection.ltr,
      );
      painter.layout(maxWidth: size.maxWidth);
      if (!painter.didExceedMaxLines)
        return Text(text, style: style);

      return Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(text, maxLines: expand ? null : 3, style: style),
          GestureDetector(
            onTap: () => setState(() {
                expand = !expand;
              }),
            child: Text(
              expand ? '<< 收起' : '展开 >>',
              style: TextStyle(color: Colors.blue),
            ),
          ),
        ],
      );
    }),
  );
}


name: LayoutBuilder的适应布局
subtitle: 可以根据区域的大小进行组件展示设计。" 比如在不同的宽度区域显示不同的布局结构。" 毕竟很多地方不容易获取父组件区域，使用LayoutBuilder就会非常爽口。
code:
import 'package:flutter/material.dart';
class FitByLayoutBuilder extends StatefulWidget {
  @override
  _FitByLayoutBuilderState createState() => _FitByLayoutBuilderState();
}

class _FitByLayoutBuilderState extends State<FitByLayoutBuilder> {
  double _width = 100;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: _width,
          child: LayoutBuilder(
            builder: (_, zone) {
              if (zone.maxWidth <= 150) {
                return _buildType1();
              } else {
                return _buildType2(zone);
              }
            },
          ),
        ),
        _buildSlider(),
      ],
    );
  }

  Widget _buildSlider() {
    return Slider(
          min: 50,
          max: 300,
          label: "父宽:${_width.toStringAsFixed(1)}",
          value: _width,
          onChanged: (v) => setState(() {
              _width = v;
            }));
  }

  Widget _buildType1() => Container(
        color: Colors.blue,
        child: Column(
          children: <Widget>[
            _buildTitle(),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: _buildContent(),
            ),
          ],
        ),
      );

  Widget _buildType2(BoxConstraints zone) => Container(
        height: 100,
        width: zone.maxWidth,
        color: Colors.orange,
        child: Row(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(10),
              height: 80,
              width: 30,
              color: Colors.grey,
            ),
            Expanded(child: _buildContent())
          ],
        ),
      );

  Widget _buildTitle() => Container(
        margin: EdgeInsets.only(left: 10, right: 10, top: 10),
        color: Colors.grey,
        height: 30,
      );

  Widget _buildContent() => Wrap(
        runSpacing: 3,
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 30,
          ),
          Container(
            color: Colors.yellow,
            height: 30,
          ),
          Container(
            color: Colors.green,
            height: 30,
          ),
        ],
      );
}


name: Center基本使用
subtitle: 【child】 : 孩子组件 【Widget】
code:
import 'package:flutter/material.dart';
class CustomCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(5),
        width: 200,
        height: 100,
        color: Colors.grey.withAlpha(88),
        child: Center(
            child: Container(
          width: 80,
          height: 60,
          color: Colors.cyanAccent,
        )));
  }
}


name: ClipRRect基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【borderRadius】 : 边线半径   【BorderRadius】
【clipBehavior】 : 裁剪行为   【Clip】
【clipper】 : 裁剪器   【CustomClipper<Rect>】

code:
import 'package:flutter/material.dart';
class CustomClipRRect extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.elliptical(35, 30)),
      child: Image.asset(
        "assets/images/wy_300x200.webp",
        width: 150,
        height: 100,
      ),
    );
  }
}


name: SizedBox基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【width】 : 宽 【double】 【height】 : 高 【double】
code:
import 'package:flutter/material.dart';
class CustomSizedBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var child = Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 50,
      height: 50,
      child: Text("Static"),
    );

    var box = SizedBox(
      width: 80,
      height: 40,
      child: Container(
          color: Colors.orange,
          child: Icon(
            Icons.android,
            color: Colors.white,
          )),
    );

    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 100,
      child: Row(
        children: <Widget>[child, box, child],
      ),
    );
  }
}


name: AspectRatio基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【aspectRatio】 : 宽高比例 【double】
code:
import 'package:flutter/material.dart';
class CustomAspectRatio extends StatefulWidget {
  @override
  _CustomAspectRatioState createState() => _CustomAspectRatioState();
}

class _CustomAspectRatioState extends State<CustomAspectRatio> {
  var _ratio = 0.75;

  @override
  Widget build(BuildContext context) {
    var child = Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 50,
      height: 50,
      child: Text("Static"),
    );

    var box = AspectRatio(
      aspectRatio: _ratio,
      child: Container(
          color: Colors.orange,
          child: Icon(
            Icons.android,
            color: Colors.white,
          )),
    );

    return Column(
      children: <Widget>[
        _buildSlider(),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 300,
          height: 100,
          child: Row(
            children: <Widget>[child, box, child],
          ),
        ),
      ],
    );
  }

  Widget _buildSlider() => Slider(
      divisions: 20,
      min: 0.1,
      max: 2.0,
      label: _ratio.toStringAsFixed(2),
      value: _ratio,
      onChanged: (v) => setState(() => _ratio = v));
}


name: ClipPath基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【clipBehavior】 : 裁剪行为   【Clip】
【clipper】 : 裁剪器   【CustomClipper<Path>】

code:
import 'dart:math';
import 'package:flutter/material.dart';
class CustomClipPath extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: ShapeBorderClipper(shape: _StarShapeBorder()),
      child: Image.asset(
        "assets/images/wy_300x200.webp",
        width: 150,
        height: 100,
        fit: BoxFit.cover,
      ),
    );
  }
}

class _StarShapeBorder extends ShapeBorder {
  final Path _path = Path();

  @override
  EdgeInsetsGeometry get dimensions => null;

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) {
    return null;
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) =>
      nStarPath(20, rect.height / 2, rect.height / 2 * 0.85,
          dx: rect.width / 2, dy: rect.height / 2);

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  Path nStarPath(int num, double R, double r, {dx = 0, dy = 0}) {
    double perRad = 2 * pi / num;
    double radA = perRad / 2 / 2;
    double radB = 2 * pi / (num - 1) / 2 - radA / 2 + radA;
    _path.moveTo(cos(radA) * R + dx, -sin(radA) * R + dy);
    for (int i = 0; i < num; i++) {
      _path.lineTo(
          cos(radA + perRad * i) * R + dx, -sin(radA + perRad * i) * R + dy);
      _path.lineTo(
          cos(radB + perRad * i) * r + dx, -sin(radB + perRad * i) * r + dy);
    }
    _path.close();
    return _path;
  }

  @override
  ShapeBorder scale(double t) {
    return null;
  }
}


name: Baseline基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【baseline】 : 基线位置   【double】
【baselineType】 : 基线类型   【TextBaseline】

code:
import 'package:flutter/material.dart';
class CustomBaseline extends StatefulWidget {
  @override
  _CustomBaselineState createState() => _CustomBaselineState();
}

class _CustomBaselineState extends State<CustomBaseline> {
  double _baseline=20;

  @override
  Widget build(BuildContext context) {

    var childBox = Text(
      '你好,Flutter',
      style: TextStyle(fontSize: 20,fontFamily: "Menlo"),
    );


    var baseline = Baseline(
        child: childBox,
        baseline: _baseline,
        baselineType: TextBaseline.alphabetic
    );

    return Column(
      children: <Widget>[
        _buildSlider(),
        Container(
          width: 100/0.618,
          height: 100,
          color: Colors.grey.withAlpha(22),
          child: baseline,
        ),
      ],
    );
  }

  Widget _buildSlider() => Slider(
      divisions: 20,
      min: 0,
      max: 60,
      label: _baseline.toString(),
      value: _baseline,
      onChanged: (v) => setState(() => _baseline = v));
}


name: 线性渐变着色
subtitle: 通过LinearGradient#createShader创建线性渐变着色器 着色器相关知识详见【绘制专辑】
code:
import 'package:flutter/material.dart';
class LinearShaderMask extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        ShaderMask(
          shaderCallback: _buildShader,
          child: Image.asset(
            'assets/images/icon_head.webp',
            height: 70,
            width: 70,
          ),
        ),
        ShaderMask(
          shaderCallback: _buildShader,
          child: Text(
            '张风捷特烈',
            style: TextStyle(fontSize: 40, color: Colors.white),
          ),
        ),
        ShaderMask(
          shaderCallback: _buildShader,
          child: Container(
            height: 100,
            color: Colors.white,
            width: 50,
          ),
        ),
      ],
    );
  }

  final colors = [Colors.red, Colors.yellow, Colors.blue];

  Shader _buildShader(Rect bounds) => LinearGradient(
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
          tileMode: TileMode.mirror,
          colors: colors)
      .createShader(bounds);
}


name: 径向渐变着色
subtitle:
      
【child】 : 孩子组件   【Widget】
【shaderCallback】 : 着色器回调   【ShaderCallback】
【blendMode】 : 混色模式   【BlendMode】
    通过RadialGradient#createShader创建径向渐变着色器。

code:
import 'package:flutter/material.dart';
class RadialShaderMask extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        ShaderMask(
          shaderCallback: _buildShader,
          child: Image.asset(
            'assets/images/icon_head.webp',
            height: 70,
            width: 70,
          ),
        ),
        ShaderMask(
          shaderCallback: _buildShader,
          child: Text(
            '张风捷特烈',
            style: TextStyle(fontSize: 40, color: Colors.white),
          ),
        ),
        ShaderMask(
          shaderCallback: _buildShader,
          child: Container(
            height: 100,
            color: Colors.white,
            width: 50,
          ),
        ),
      ],
    );
  }

  final colors = [Colors.red, Colors.yellow, Colors.blue];

  Shader _buildShader(Rect bounds) => RadialGradient(
          center: Alignment.topLeft,
          radius: 1.0,
          tileMode: TileMode.mirror,
          colors: colors)
      .createShader(bounds);
}


name: ColorFiltered基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【colorFilter】 : 滤色器 【ColorFilter】
code:
import 'package:flutter/material.dart';
import '../../../../app/utils/color_utils.dart';
class CustomColorFiltered extends StatefulWidget {
  @override
  _CustomColorFilteredState createState() => _CustomColorFilteredState();
}

class _CustomColorFilteredState extends State<CustomColorFiltered> {
  Color _color = Colors.blue.withAlpha(88);

  @override
  Widget build(BuildContext context) {
    _color = ColorUtils.randomColor();
    return Column(
      children: <Widget>[
        Wrap(spacing: 10, runSpacing: 10, children: [
          _buildRandomColor(),
          ...BlendMode.values
              .map((mode) => Column(
                    children: <Widget>[
                      _buildChild(mode),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        mode.toString().split('.')[1],
                        style: TextStyle(fontSize: 10),
                      )
                    ],
                  ))
              .toList()
        ]),
      ],
    );
    ;
  }

  Widget _buildChild(m) => Container(
        width: 58,
        height: 58,
        child: ColorFiltered(
            child: Image(image: AssetImage("assets/images/icon_head.webp")),
            colorFilter: ColorFilter.mode(_color, m)),
      );

  Widget _buildRandomColor() => GestureDetector(
        onTap: () => setState(() {}),
        child: Container(
          alignment: Alignment.center,
          width: 60,
          height: 60,
          decoration: BoxDecoration(color: _color, shape: BoxShape.circle),
          child: Text('点我'),
        ),
      );
}


name: IntrinsicHeight基本使用
subtitle: 【child】 : 子组件 【Widget】 如示例:左侧高可变动，中间高固定,右侧高取前两者的最高值。
code:
import 'package:flutter/material.dart';
class IntrinsicHeightDemo extends StatefulWidget {
  @override
  _IntrinsicHeightDemoState createState() => _IntrinsicHeightDemoState();
}

class _IntrinsicHeightDemoState extends State<IntrinsicHeightDemo> {
  var _height =120.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          buildChild(_height),
          SizedBox(height: 10),
          _buildSlider()
        ],
      ),
    );
  }

  Widget buildChild(double leftHeight) {
    return IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            height: leftHeight,
            width: 120,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: Text("height:${leftHeight.toStringAsFixed(1)}"),
          ),
          Container(
            color: Colors.blue,
            width: 150,
            height: 80,
            alignment: Alignment.center,
            child: Text("固定高"),
          ),
          Container(
            color: Colors.red,
            width: 60,
            alignment: Alignment.center,
            child: Text("最高"),
          )
        ],
      ),
    );
  }

  Widget _buildSlider() =>Slider(
    value: _height,
    max: 200.0,
    min: 30.0,
    divisions: 17,
    onChanged: (v)=> setState(() => _height= v),
  );
}


name: DecoratedBox底线装饰
subtitle: 通过UnderlineTabIndicator对象可指定底线,
code:
import 'package:flutter/material.dart';
class UnderlineTabIndicatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: UnderlineTabIndicator(
          insets: EdgeInsets.symmetric(horizontal: 5, vertical: -5),
          borderSide: BorderSide(color: Colors.orange, width: 2)),
      child: Icon(
        Icons.ac_unit,
        color: Colors.blue,
        size: 40,
      ),
    );
  }
}


name: DecoratedBox基本使用
subtitle: 【decoration】 : 装饰对象 【Decoration】 【position】 : 前景色(左)/后景色(右) 【DecorationPosition】
code:
import 'package:flutter/material.dart';
class BoxDecorationDemo extends StatelessWidget {
  final rainbow = const <int>[
    0xffff0000,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff00FFFF,
    0xff0000FF,
    0xff8B00FF
  ];

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.background,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              stops: <double>[0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],
              colors: rainbow.map((e) => Color(e)).toList()),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
          boxShadow: [
            const BoxShadow(
                color: Colors.orangeAccent,
                offset: Offset(1, 1),
                blurRadius: 10,
                spreadRadius: 1),
          ]),
      child: Icon(
        Icons.android,
        size: 80,
        color: Colors.black.withAlpha(123),
      ),
    );
  }
}


name: FlutterLogoDecoration装饰
subtitle: 通过FlutterLogoDecoration对象可指定Flutter图标装饰(并没有什么太大的作用),
code:
import 'package:flutter/material.dart';
class FlutterLogoDecorationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: FlutterLogoDecoration(
//          darkColor: Colors.orange,
//          lightColor: Colors.deepPurpleAccent,
          margin: EdgeInsets.all(8),
          style: FlutterLogoStyle.stacked),
      child: SizedBox(
        width: 100,
        height: 100,
      ),
    );
  }
}


name: DecoratedBox形状装饰
subtitle: 通过ShapeDecoration对象可指定边线形状,
code:
import 'package:flutter/material.dart';
class ShapeDecorationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: ShapeDecoration(
          shadows: [
            const BoxShadow(
                color: Colors.orangeAccent,
                offset: Offset(0, 0),
                blurRadius: 2,
                spreadRadius: 1),
          ],
          image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(
                'assets/images/wy_200x300.webp',
              )),
          shape: CircleBorder(
            side: BorderSide(width: 1.0, color: Colors.orangeAccent),
          )),
      child: SizedBox(
        height: 100,
        width: 100,
        child: Icon(
          Icons.ac_unit,
          color: Colors.white,
          size: 40,
        ),
      ),
    );
  }
}


name: DecoratedBox边线装饰
subtitle: 【border】 : 边线 【BoxBorder】,
code:
import 'package:flutter/material.dart';
class BorderDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.foreground,
      decoration: BoxDecoration(
        border: Border(
            bottom: BorderSide(color: Colors.orange, width: 2),
            top: BorderSide(color: Colors.orange, width: 2)),
      ),
      child: SizedBox(
        height: 80,
        width: 100,
        child: Image.asset(
          'assets/images/wy_200x300.webp',
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}


name: DecoratedBox形状和图片装饰
subtitle: 【shape】 : 形状 【BoxShape】 【image】 : 背景图片 【DecorationImage】,
code:
import 'package:flutter/material.dart';
class ShapeImageDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(
                'assets/images/wy_200x300.webp',
              ))),
      child: SizedBox(
        height: 80,
        width: 80,
        child: Icon(
          Icons.ac_unit,
          color: Colors.white,
          size: 40,
        ),
      ),
    );
  }
}


name: BackdropFilter基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【filter】 : 过滤器 【ImageFilter】 ImageFilter.blur可以实现高斯模糊，指定x，y模糊因子。
code:
import 'dart:ui';
import 'package:flutter/material.dart';
class CustomBackdropFilter extends StatefulWidget {
  @override
  _CustomBackdropFilterState createState() => _CustomBackdropFilterState();
}

class _CustomBackdropFilterState extends State<CustomBackdropFilter> {
  double _sigmaX = 1.2;
  double _sigmaY = 1.2;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Stack(
          children: <Widget>[
            _buildImage(),
            Positioned.fill(
              child: ClipRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
                  child: Container(
                    color: Colors.black.withAlpha(0),
                  ),
                ),
              ),
            )
          ],
        ),
        _buildSliders()
      ],
    );
  }

  Widget _buildImage() {
    return Wrap(
      spacing: 20,
      children: <Widget>[
        Container(
          height: 150,
          width: 150,
          child: Image.asset(
            'assets/images/sabar.webp',
            fit: BoxFit.cover,
          ),
        ),
        Container(
          height: 150,
          width: 150,
          child: Image.asset(
            'assets/images/wy_200x300.webp',
            fit: BoxFit.cover,
          ),
        ),
      ],
    );
  }

  Widget _buildSliders() => Column(
        children: <Widget>[
          Slider(
              min: 0,
              max: 4,
              value: _sigmaX,
              divisions: 360,
              label: 'x:' + _sigmaX.toStringAsFixed(1),
              onChanged: (v) {
                setState(() {
                  _sigmaX = v;
                });
              }),
          Slider(
              min: 0,
              max: 4,
              value: _sigmaY,
              divisions: 360,
              label: 'beta:' + _sigmaY.toStringAsFixed(1),
              onChanged: (v) {
                setState(() {
                  _sigmaY = v;
                });
              })
        ],
      );
}


name: Align其他用法
subtitle: 由于Alignment对象可指定在父容器中宽高的分率位置 可以使用Align实现一些复杂的排布需求，比如按指定的数学方程变化位置
code:
import 'dart:math';
import 'package:flutter/material.dart';
class Ball extends StatelessWidget {
  Ball({
    Key key,
    this.radius = 15,
    this.color = Colors.blue,
  }) : super(key: key);
  final double radius; //半径
  final Color color; //颜色

  @override
  Widget build(BuildContext context) {
    return Container(
      width: radius * 2,
      height: radius * 2,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: color,
      ),
    );
  }
}

class SinLayout extends StatefulWidget {
  SinLayout({
    Key key,
  }) : super(key: key);

  @override
  _SinLayoutState createState() => _SinLayoutState();
}

class _SinLayoutState extends State<SinLayout> {
  var _x = 0.0; //Alignment坐标系上的x坐标

  @override
  Widget build(BuildContext context) {
    var item = Container(
      width: 300,
      height: 120,
      color: Colors.black.withAlpha(10),
      child: Align(
        child: Ball(
          color: Colors.orangeAccent,
        ),
        alignment: Alignment(_x, f(_x * pi)),
      ),
    );

    var slider = Slider(
        max: 180,
        min: -180,
        divisions: 360,
        label: "${_x.toStringAsFixed(2)}π",
        value: _x * 180,
        onChanged: (v) => setState(() => _x = v / 180));
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[slider, item],
    );
  }

  double f(x) {
    //映射函数 -- 可随意指定
    double y = sin(x);
    return y;
  }
}


name: Align基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【alignment】 : 对齐方式 【AlignmentGeometry】
code:
import 'package:flutter/material.dart';
class CustomAlign extends StatelessWidget {
  final alignments = [
    Alignment.topLeft,
    Alignment.topCenter,
    Alignment.topRight,
    Alignment.centerLeft,
    Alignment.center,
    Alignment.centerRight,
    Alignment.bottomLeft,
    Alignment.bottomCenter,
    Alignment.bottomRight,
  ];

  final alignmentsInfo = [
    "topLeft",
    "topCenter",
    "topRight",
    "centerLeft",
    "center",
    "centerRight",
    "bottomLeft",
    "bottomCenter",
    "bottomRight",
  ];

  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: alignments
            .toList()
            .map((mode) => Column(children: <Widget>[
                  Container(
                      margin: EdgeInsets.all(5),
                      width: 100,
                      height: 60,
                      color: Colors.grey.withAlpha(88),
                      child: Align(
                          child: Container(
                            width: 30,
                            height: 30,
                            color: Colors.cyanAccent,
                          ),
                          alignment: mode)),
                  Text(alignmentsInfo[alignments.indexOf(mode)])
                ]))
            .toList());
  }
}


name: IntrinsicWidth基本使用
subtitle: 【child】 : 子组件 【Widget】 如示例:上面宽可变动，中间宽固定,下面宽取前两者的最高值。
code:
import 'package:flutter/material.dart';
class IntrinsicWidthDemo extends StatefulWidget {
  @override
  _IntrinsicWidthDemoState createState() => _IntrinsicWidthDemoState();
}

class _IntrinsicWidthDemoState extends State<IntrinsicWidthDemo> {
  var _height =120.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          buildChild(_height),
          SizedBox(height: 10),
          _buildSlider()
        ],
      ),
    );
  }

  Widget buildChild(double leftWidth) {
    return IntrinsicWidth(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            height: 50,
            width: leftWidth,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: Text("width:${leftWidth.toStringAsFixed(1)}"),
          ),
          Container(
            color: Colors.blue,
            width: 150,
            height: 60,
            alignment: Alignment.center,
            child: Text("固定宽"),
          ),
          Container(
            color: Colors.red,
            height: 40,
            alignment: Alignment.center,
            child: Text("最宽"),
          )
        ],
      ),
    );
  }

  Widget _buildSlider() =>Slider(
    value: _height,
    max: 200.0,
    min: 80.0,
    divisions: 17,
    onChanged: (v)=> setState(() => _height= v),
  );
}


name: FractionallySizedBox基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【widthFactor】 : 宽分率   【double】
【heightFactor】 : 高分率   【double】
【alignment】 : 对齐方式   【AlignmentGeometry】

code:
import 'package:flutter/material.dart';
class CustomFractionallySizedBox extends StatefulWidget {
  @override
  _CustomFractionallySizedBoxState createState() =>
      _CustomFractionallySizedBoxState();
}

class _CustomFractionallySizedBoxState
    extends State<CustomFractionallySizedBox> {
  var _hf = 0.5;
  var _wf = 0.4;

  @override
  Widget build(BuildContext context) {
    var box = FractionallySizedBox(
      widthFactor: _wf,
      heightFactor: _hf,
      alignment: Alignment.center,
      child: Container(color: Colors.orange),
    );
    return Column(
      children: <Widget>[
        Container(
            color: Colors.grey.withAlpha(22),
            width: 200,
            height: 100,
            child: box),
        _buildSlider()
      ],
    );
  }

  Widget _buildSlider() => Column(
    children: <Widget>[
      Slider(
          divisions: 20,
          min: 0.0,
          max: 2,
          label: '宽分率:' + _wf.toStringAsFixed(1),
          value: _wf,
          onChanged: (v) => setState(() => _wf = v)),
      Slider(
          divisions: 20,
          min: 0.0,
          max: 2,
          label: '高分率:' + _hf.toStringAsFixed(1),
          value: _hf,
          onChanged: (v) => setState(() => _hf = v)),
    ],
  );
}


name: PhysicalModel基本使用
subtitle:
【clipBehavior】 : 裁剪行为   【Clip】
【borderRadius】 : 圆角   【BorderRadius】
【child】 : 子组件   【Widget】
【elevation】 : 阴影深   【double】
【shadowColor】 : 阴影颜色   【Color】
【shape】 : 形状   【BoxShape】
【color】: 颜色    【Color】

code:
import 'package:flutter/material.dart';
class PhysicalModelDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 150,
          height: 150,
          child: PhysicalModel(
              shadowColor: Colors.orange,
              elevation: 3,
              child: Image.asset(
                'assets/images/caver.webp',
                fit: BoxFit.cover,
              ),
              clipBehavior: Clip.hardEdge,
              shape: BoxShape.circle,
              color: Colors.deepPurpleAccent),
        ),

        Container(
          width: 150,
          height: 150,
          child: PhysicalModel(
              shadowColor: Colors.orange,
              elevation: 3,
              child: Image.asset(
                'assets/images/caver.webp',
                fit: BoxFit.cover,
              ),
              borderRadius: BorderRadius.all(Radius.circular(20)),
              clipBehavior: Clip.hardEdge,
              shape: BoxShape.rectangle,
              color: Colors.deepPurpleAccent),
        ),
      ],
    );
  }

}


name: Opacity基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【opacity】 : 透明度0~1 【double】
code:
import 'package:flutter/material.dart';
class CustomOpacity extends StatefulWidget {
  @override
  _CustomOpacityState createState() => _CustomOpacityState();
}

class _CustomOpacityState extends State<CustomOpacity> {
  var _opacity = 0.2;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[_buildSlider(), _buildOpacity()],
    );
  }
  // 创建Opacity
  Widget _buildOpacity() => Opacity(
        opacity: _opacity,
        child: Image.asset(// 图片
          'assets/images/icon_head.webp',
          width: 100,
        ),
      );
  Widget _buildSlider() => Slider(
      divisions: 20,
      label: _opacity.toString(),
      value: _opacity,
      onChanged: (v) => setState(() => _opacity = v));
}


name: 保存Widget成为图片
subtitle: 通过RenderRepaintBoundary可以获取子组件的Image信息，从而获取字节保存为图片文件。
code:
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:ui' as ui;
import 'node1_base.dart';
class RepaintBoundarySave extends StatelessWidget {
  final GlobalKey _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        RepaintBoundary(
          key: _globalKey,
          child: TempPlayBezier3Page(),
        ),
        Positioned(right: -10, child: _buildButton3(context))
      ],
    );
  }

  Widget _buildButton3(context) => MaterialButton(
      child: Icon(
        Icons.save_alt,
        size: 15,
        color: Colors.white,
      ),
      color: Colors.green,
      shape: CircleBorder(
        side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
      ),
      onPressed: () async {
        var bits = await _widget2Image(_globalKey);
        var dir = await getApplicationSupportDirectory();
        var file = File(dir.path + "/save_img.png");
        var f = await file.writeAsBytes(bits);
        Scaffold.of(context).showSnackBar(SnackBar(
          backgroundColor: Theme.of(context).primaryColor,
          content: Text('保存成功后! 路径为:${f.path}'),
        ));
      });

  Future<Uint8List> _widget2Image(GlobalKey key) async {
    RenderRepaintBoundary boundary = key.currentContext.findRenderObject();
    //获得 ui.image
    ui.Image img = await boundary.toImage();
    //获取图片字节
    var byteData = await img.toByteData(format: ui.ImageByteFormat.png);
    Uint8List bits = byteData.buffer.asUint8List();
    return bits;
  }
}


name: RepaintBoundary基本使用
subtitle:
【child】 : 子组件   【Widget】
比如上面的绘制视图，即使shouldRepaint为false,在滑动中会也会不断执行paint方法,使用RepaintBoundary可以避免不必要的绘制。

code:
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class RepaintBoundaryDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: TempPlayBezier3Page(),
    );
  }
}

class TempPlayBezier3Page extends StatefulWidget {
  @override
  _TempPlayBezier3PageState createState() => _TempPlayBezier3PageState();
}

class _TempPlayBezier3PageState extends State<TempPlayBezier3Page> {
  List<Offset> _pos = <Offset>[];
  int selectPos;

  @override
  void initState() {
    _initPoints();
    super.initState();
  }

  void _initPoints() {
    _pos = List<Offset>();
    _pos.add(Offset(0, 0));
    _pos.add(Offset(60, -60));
    _pos.add(Offset(-90, -90));
    _pos.add(Offset(-120, -40));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: MediaQuery.of(context).size.width,
      child: CustomPaint(
        painter: TempBezierPainter(pos: _pos, selectPos: selectPos),
      ),
    );
  }
}

class TempBezierPainter extends CustomPainter {
  Paint _gridPaint;
  Path _gridPath;

  Paint _mainPaint;
  Path _mainPath;
  int selectPos;
  Paint _helpPaint;

  List<Offset> pos;

  TempBezierPainter({this.pos, this.selectPos}) {
    _gridPaint = Paint()..style = PaintingStyle.stroke;
    _gridPath = Path();

    _mainPaint = Paint()
      ..color = Colors.orange
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    _mainPath = Path();

    _helpPaint = Paint()
      ..color = Colors.purple
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round;
  }

  @override
  void paint(Canvas canvas, Size size) {
    print('----------Paint-------');
    canvas.clipRect(Offset.zero & size);
    canvas.translate(size.width / 2, size.height / 2);
    _drawGrid(canvas, size); //绘制格线
    _drawAxis(canvas, size); //绘制轴线

    _mainPath.moveTo(pos[0].dx, pos[0].dy);
    _mainPath.cubicTo(
        pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);
    canvas.drawPath(_mainPath, _mainPaint);
    _drawHelp(canvas);
    _drawSelectPos(canvas);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;

  void _drawGrid(Canvas canvas, Size size) {
    _gridPaint
      ..color = Colors.grey
      ..strokeWidth = 0.5;
    _gridPath = _buildGridPath(_gridPath, size);
    canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);

    canvas.save();
    canvas.scale(1, -1); //沿x轴镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();

    canvas.save();
    canvas.scale(-1, 1); //沿y轴镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();

    canvas.save();
    canvas.scale(-1, -1); //沿原点镜像
    canvas.drawPath(_gridPath, _gridPaint);
    canvas.restore();
  }

  void _drawAxis(Canvas canvas, Size size) {
    canvas.drawPoints(
        PointMode.lines,
        [
          Offset(-size.width / 2, 0),
          Offset(size.width / 2, 0),
          Offset(0, -size.height / 2),
          Offset(0, size.height / 2),
          Offset(0, size.height / 2),
          Offset(0 - 7.0, size.height / 2 - 10),
          Offset(0, size.height / 2),
          Offset(0 + 7.0, size.height / 2 - 10),
          Offset(size.width / 2, 0),
          Offset(size.width / 2 - 10, 7),
          Offset(size.width / 2, 0),
          Offset(size.width / 2 - 10, -7),
        ],
        _gridPaint
          ..color = Colors.blue
          ..strokeWidth = 1.5);
  }

  Path _buildGridPath(Path path, Size size, {step = 20.0}) {
    for (int i = 0; i < size.height / 2 / step; i++) {
      path.moveTo(0, step * i);
      path.relativeLineTo(size.width / 2, 0);
    }
    for (int i = 0; i < size.width / 2 / step; i++) {
      path.moveTo(step * i, 0);
      path.relativeLineTo(
        0,
        size.height / 2,
      );
    }
    return path;
  }

  void _drawHelp(Canvas canvas) {
    canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);
    canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);
  }

  void _drawSelectPos(Canvas canvas) {
    if (selectPos == null) return;
    canvas.drawCircle(
        pos[selectPos],
        10,
        _helpPaint
          ..color = Colors.green
          ..strokeWidth = 2);
  }
}


name: UnConstrainedBox基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【constrainedAxis】 : 仍受约束的轴*2   【Axis】
【alignment】 : 对齐方式   【AlignmentGeometry】

code:
import 'package:flutter/material.dart';
class CustomUnConstrainedBox extends StatefulWidget {
  @override
  _CustomUnConstrainedBoxState createState() => _CustomUnConstrainedBoxState();
}

class _CustomUnConstrainedBoxState extends State<CustomUnConstrainedBox> {
  var _value = false;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      children: <Widget>[_buildUnconstrainedBox(), _buildConstrainedAxis()],
    );
  }

  Widget _buildUnconstrainedBox() {
    var child = Container(
      color: Colors.cyanAccent,
      width: 60,
      height: 60,
      child: Switch(
        value: _value,
        onChanged: (v) {
          setState(() {
            _value = v;
          });
        },
      ),
    );

    return Column(
      children: <Widget>[
        Container(
          color: Colors.grey.withAlpha(22),
          width: 150,
          height: 100,
          child: _value
              ? UnconstrainedBox(alignment: Alignment.center, child: child)
              : child,
        ),
        Text(_value ? "已解除约束" : "子组件受约束")
      ],
    );
  }

  Widget _buildConstrainedAxis() {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.grey.withAlpha(22),
          width: 150,
          height: 100,
          child: UnconstrainedBox(
              alignment: Alignment.center,
              constrainedAxis: Axis.vertical,
              child: Container(
                color: Colors.cyanAccent,
                width: 60,
                height: 60,
              )),
        ),
        Text("竖直方向仍约束")
      ],
    );
  }
}


name: AnimatedSize基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【alignment】 : 对齐方式   【AlignmentGeometry】
【curve】 : 动画曲线   【Duration】
【vsync】 : vsync   【TickerProvider】

code:
import 'package:flutter/material.dart';
class CustomAnimatedSize extends StatefulWidget {
  @override
  _CustomAnimatedSizeState createState() => _CustomAnimatedSizeState();
}

class _CustomAnimatedSizeState extends State<CustomAnimatedSize>
    with SingleTickerProviderStateMixin {
  final double start = 100;
  final double end = 200;

  double _width;

  @override
  void initState() {
    _width = start;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 200,
          height: 100,
          alignment: Alignment.center,
          child: AnimatedSize(
            vsync: this,
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            alignment: Alignment(0, 0),
            child: Container(
              height: 40,
              width: _width,
              alignment: Alignment.center,
              color: Colors.blue,
              child: Text(
                '张风捷特烈',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSwitch() => Switch(
      value: _width == end,
      onChanged: (v) {
        setState(() {
          _width = v ? end : start;
        });
      });
}


name: FadeTransition基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【opacity】 : 动画 【Animation<double>】
code:
import 'package:flutter/material.dart';
class CustomFadeTransition extends StatefulWidget {
  @override
  _CustomFadeTransitionState createState() => _CustomFadeTransitionState();
}

class _CustomFadeTransitionState extends State<CustomFadeTransition>
    with SingleTickerProviderStateMixin {
  AnimationController _ctrl;

  @override
  void initState() {
    _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _ctrl.forward();
    super.initState();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _ctrl.reset();
          _ctrl.forward();
        });
      },
      child: Container(
        color: Colors.grey.withAlpha(22),
        width: 100,
        height: 100,
        child: FadeTransition(
          opacity: CurvedAnimation(parent: _ctrl, curve: Curves.linear),
          child: Icon(Icons.android, color: Colors.green, size: 60),
        ),
      ),
    );
  }
}


name: CustomSingleChildLayout的偏移使用
subtitle: 可以利用代理的偏移能力，对子组件进行偏移定位。
code:
import 'package:flutter/material.dart';
class OffSetWidgetDemo extends StatelessWidget {
  final data = [
    {
      'offset': Offset(20, 20),
      'direction': Direction.topLeft,
    },
    {
      'offset': Offset(20, -15),
      'direction': Direction.topRight,
    },
    {
      'offset': Offset(-15, 20),
      'direction': Direction.bottomLeft,
    },
    {
      'offset': Offset(-15, 20),
      'direction': Direction.bottomLeft,
    },
    {
      'offset': Offset(15, 20),
      'direction': Direction.bottomLeft,
    },
    {
      'offset': Offset(-15, -15),
      'direction': Direction.topRight,
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 20,
        runSpacing: 20,
        children: data
            .map((e) => Container(
                width: 150,
                height: 100,
                alignment: Alignment.topRight,
                color: Colors.grey.withAlpha(11),
                child: OffSetWidget(
                  offset: e['offset'],
                  direction: e['direction'],
                  child: Icon(
                    Icons.android,
                    size: 30,
                    color: Colors.green,
                  ),
                )))
            .toList());
  }
}

class OffSetWidget extends StatelessWidget {
  final Offset offset;
  final Widget child;
  final Direction direction;

  OffSetWidget(
      {this.offset = Offset.zero,
      this.child,
      this.direction = Direction.topLeft});

  @override
  Widget build(BuildContext context) {
    return CustomSingleChildLayout(
      delegate: _OffSetDelegate(offset: offset, direction: direction),
      child: child,
    );
  }
}

enum Direction { topLeft, topRight, bottomLeft, bottomRight }

class _OffSetDelegate extends SingleChildLayoutDelegate {
  final Offset offset;
  final Direction direction;

  _OffSetDelegate(
      {this.offset = Offset.zero, this.direction = Direction.topLeft});

  @override
  bool shouldRelayout(_OffSetDelegate oldDelegate) =>
      offset != oldDelegate.offset;

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    var w = size.width;
    var h = size.height;
    var wc = childSize.width;
    var hc = childSize.height;

    switch (direction) {
      case Direction.topLeft:
        return offset;
      case Direction.topRight:
        return offset.translate(w - wc - offset.dx * 2, 0);
      case Direction.bottomLeft:
        return offset.translate(0, h - hc - offset.dy * 2);
      case Direction.bottomRight:
        return offset.translate(w - wc - offset.dx * 2, h - hc - offset.dy * 2);
    }
    return offset;
  }
}


name: CustomSingleChildLayout基本使用
subtitle: 【delegate】 : 代理 【SingleChildLayoutDelegate】
code:
import 'package:flutter/material.dart';
class CustomSingleChildLayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('-------CustomSingleChildLayoutDemo------');
    return Container(
      width: 300,
      height: 200,
      color: Colors.grey.withAlpha(11),
      child: CustomSingleChildLayout(
        delegate: _TolySingleChildLayoutDelegate(),
        child: Container(
          color: Colors.orange,
        ),
      ),
    );
  }
}

class _TolySingleChildLayoutDelegate extends SingleChildLayoutDelegate {
  @override
  bool shouldRelayout(SingleChildLayoutDelegate oldDelegate) {
    return true;
  }

  @override
  Size getSize(BoxConstraints constraints) {
    print('----getSize:----constraints:$constraints----');
    return super.getSize(constraints);
  }

  @override
  Offset getPositionForChild(Size size, Size childSize) {
    print('----getPositionForChild: size:$size----childSize:$childSize----');
    return Offset(size.width / 2, 0);
  }

  @override
  BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
    print('----getConstraintsForChild:----constraints:$constraints----');
    return BoxConstraints(
      maxWidth: constraints.maxWidth / 2,
      maxHeight: constraints.maxHeight / 2,
      minHeight: constraints.maxHeight / 4,
      minWidth: constraints.maxWidth / 4,
    );
  }
}


name: Padding单独边距边距
subtitle: EdgeInsets.only用来限定相同的四边边距
code:
import 'package:flutter/material.dart';
class PaddingOnly extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.only(top:10,left: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}


name: Padding方向边距
subtitle: EdgeInsets.symmetric用来限定水平和竖直方向的边距
code:
import 'package:flutter/material.dart';
class PaddingSymmetric extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}


name: Padding四面等边距
subtitle: 【child】 : 孩子组件 【Widget】 【padding】 : 内四边距 【EdgeInsetsGeometry】" EdgeInsets.all用来限定相同的四边边距
code:
import 'package:flutter/material.dart';
class PaddingAll extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey.withAlpha(22),
      width: 200,
      height: 150,
      child: Padding(
        padding: EdgeInsets.all(20),
        child: _buildChild(),
      ),
    );
  }

  Widget _buildChild() {
    return Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 100,
      height: 100,
      child: Text("孩子"),
    );
  }
}


name: ClipOval基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【clipBehavior】 : 裁剪行为   【Clip】
【clipper】 : 裁剪器   【CustomClipper<RRect>】

code:
import 'package:flutter/material.dart';
class CustomClipOval extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 20,
      children: <Widget>[
        ClipOval(

          child: Image.asset(
            "assets/images/wy_300x200.webp",
            width: 150,
            height: 100,
          ),
        ),
        ClipOval(
          child: Image.asset(
            "assets/images/wy_300x200.webp",
            width: 100,
            height: 100,
            fit: BoxFit.cover,
          ),
        ),
      ],
    );
  }
}


name: 基本使用
subtitle: 【child】 : 组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SizeChangedLayoutNotifierDemo extends StatefulWidget {
  @override
  _SizeChangedLayoutNotifierDemoState createState() => _SizeChangedLayoutNotifierDemoState();
}

class _SizeChangedLayoutNotifierDemoState extends State<SizeChangedLayoutNotifierDemo> {
  @override
  Widget build(BuildContext context) {
    return NotificationListener<SizeChangedLayoutNotification>(
      onNotification: _onNotification,
      child: ChangeableBox(),
    );
  }

  bool _onNotification(SizeChangedLayoutNotification notification) {
    print('---------SizeChangedLayoutNotification------');
    return false;
  }
}

class ChangeableBox extends StatefulWidget {
  @override
  _ChangeableBoxState createState() => _ChangeableBoxState();
}

class _ChangeableBoxState extends State<ChangeableBox> {
  double width = 40;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizeChangedLayoutNotifier(
          child: Container(
            width: width,
            height: 100,
            color: Colors.blue,
          ),
        ),
        Slider(
          max: 200,
          min: 20,
          divisions: 10,
          value: width,
          onChanged: _changeWidth,
        )
      ],
    );
  }

  void _changeWidth(double value) {
    setState(() {
      width = value;
    });
  }
}


name: BoxConstraints基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【minWidth】 : 最小宽   【double】
【minHeight】 : 最小高   【double】
【maxHeight】 : 最大高   【double】
【maxWidth】 : 最大宽   【double】

code:
import 'package:flutter/material.dart';
class CustomConstrainedBox extends StatefulWidget {
  @override
  _CustomConstrainedBoxState createState() => _CustomConstrainedBoxState();
}

class _CustomConstrainedBoxState extends State<CustomConstrainedBox> {
  var _text = '';

  @override
  Widget build(BuildContext context) {
    var child = Container(
      alignment: Alignment.center,
      color: Colors.cyanAccent,
      width: 40,
      height: 40,
      child: Text("Static"),
    );

    var box = ConstrainedBox(
      constraints: BoxConstraints(
        minHeight: 50,
        minWidth: 20,
        maxHeight: 80,
        maxWidth: 150,
      ),
      child: Container(color: Colors.orange, child: Text(_text)),
    );
    return Column(
      children: <Widget>[
        Container(
          color: Colors.grey.withAlpha(22),
          width: 300,
          height: 100,
          child: Row(
            children: <Widget>[child, UnconstrainedBox(child: box), child],
          ),
        ),
        _buildInput(),
      ],
    );
  }

  Widget _buildInput() {
    return Padding(
      padding: const EdgeInsets.all(18.0),
      child: TextField(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          hintText: '请输入',
        ),
        onChanged: (v) {
          setState(() {
            _text = v;
          });
        },
      ),
    );
  }
}


name: FractionalTranslation基本使用
subtitle: 【translation】 : 偏移分度值 【Offset】 【child】: 子组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FractionalTranslationDemo extends StatefulWidget {
  @override
  _FractionalTranslationDemoState createState() =>
      _FractionalTranslationDemoState();
}

class _FractionalTranslationDemoState extends State<FractionalTranslationDemo> {
  var dx = 0.0;
  var dy = 0.0;

  @override
  Widget build(BuildContext context) {
    print(dx);
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 200,
          height: 100,
          alignment: Alignment.topLeft,
          color: Colors.grey.withAlpha(33),
          child: FractionalTranslation(
            translation: Offset(dx, dy),
            child: Icon(
              Icons.android,
              color: Colors.green,
            ),
          ),
        ),
        _buildSliderX(),
        _buildSliderY()
      ],
    );
  }

  Widget _buildSliderX() => Slider(
        min: -2.0,
        max: 10.0,
        value: dx,
    divisions: 100,
        label: 'dx:${dx.toStringAsFixed(1)}',
        onChanged: (v) => setState(() => dx = v),
      );


  Widget _buildSliderY() => Slider(
    min: -2.0,
    max: 6.0,
    value: dy,
    divisions: 100,
    label: 'dy:${dy.toStringAsFixed(1)}',
    onChanged: (v) => setState(() => dy = v),
  );
}


name: FittedBox基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【fit】 : 适应模式 【BoxFit】 【alignment】 : 对齐方式 【AlignmentGeometry】
code:
import 'package:flutter/material.dart';
class CustomFittedBox extends StatefulWidget {
  @override
  _CustomFittedBoxState createState() => _CustomFittedBoxState();
}

class _CustomFittedBoxState extends State<CustomFittedBox> {
  double _childW = 20;
  double _childH = 30;

  final  rainbow = <int>[
    0xffff0000,
    0xffFF7F00,
    0xffFFFF00,
    0xff00FF00,
    0xff00FFFF,
    0xff0000FF,
    0xff8B00FF
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Wrap(
            spacing: 10,
            runSpacing: 10,
            children: BoxFit.values
                .map((mode) => Column(
                      children: <Widget>[
                        _buildChild(mode),
                        SizedBox(
                          height: 10,
                        ),
                        Text(mode.toString().split('.')[1])
                      ],
                    ))
                .toList()),
        _buildSlider()
      ],
    );
  }

  Widget _buildChild(BoxFit m) {
    return Container(
      color: Colors.grey.withAlpha(44),
      width: 80,
      height: 60,
      child: FittedBox(
        fit: m,
        child: Container(
          width: _childW,
          height: _childH,
          decoration: BoxDecoration(
            //添加渐变色
            gradient: LinearGradient(
                stops: <double>[0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],
                colors: rainbow.map((e) => Color(e)).toList()),
          ),
        ),
      ),
    );
  }

  Widget _buildSlider() => Column(
        children: <Widget>[
          Slider(
              min: 10,
              max: 150,
              divisions: 100,
              label: '子宽度:' + _childW.toStringAsFixed(1),
              value: _childW,
              onChanged: (v) => setState(() => _childW = v)),
          Slider(
              min: 10,
              max: 150,
              divisions: 100,
              label: '子高度:' + _childH.toStringAsFixed(1),
              value: _childH,
              onChanged: (v) => setState(() => _childH = v)),
        ],
      );
}


name: 平移变换translationValues
subtitle: 平移x由R0C3数控制,入参为数值,表示平移长度 平移y由R1C3数控制,入参为数值,表示平移长度 平移z由R2C3数控制,入参为数值,表示平移长度
code:
import 'package:flutter/material.dart';
import 'matrix4_shower.dart';
class TranslationTransform extends StatefulWidget {
  @override
  _TranslationTransformState createState() => _TranslationTransformState();
}

class _TranslationTransformState extends State<TranslationTransform> {
  Matrix4 _m4;
  double _x = 0;
  double _y = 0;
  double _z = 0;

  @override
  void initState() {
    _m4 = Matrix4.identity();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],
        ),
        _buildSliders()
      ],
    );
  }

  Widget _buildTransform() {
    _m4 = Matrix4.translationValues(_x, _y, _z);
    return Transform(
      transform: _m4,
      child: Container(
          color: Colors.cyanAccent,
          width: 100,
          height: 100,
          child: Image.asset(
            'assets/images/wy_300x200.webp',
            fit: BoxFit.cover,
          )),
    );
  }

  Widget _buildSliders() => Column(
    children: <Widget>[
      Slider(
          min: -100,
          max: 100,
          value: _x,
          divisions: 360,
          label: 'x:${_x.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _x = v;
            });
          }),
      Slider(
          min: -100,
          max: 100,
          value: _y,
          divisions: 360,
          label: 'y:${_y.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _y = v;
            });
          }),
      Slider(
          min: -100,
          max: 100,
          value: _z,
          divisions: 360,
          label: 'z:${_z.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _z = v;
            });
          })
    ],
  );
}


name: 斜切变换skew
subtitle: 斜切x由R0C1数控制,入参为弧度值,表示斜切角度 斜切y由R1C0数控制,入参为弧度值,表示斜切角度
code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'matrix4_shower.dart';
class SkewTransform extends StatefulWidget {
  @override
  _SkewTransformState createState() => _SkewTransformState();
}

class _SkewTransformState extends State<SkewTransform> {
  Matrix4 _m4;
  double _alpha = 0;
  double _beta = 0;

  @override
  void initState() {
    _m4 = Matrix4.identity();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],
        ),
        _buildSliders()
      ],
    );
  }

  Widget _buildTransform() {
    _m4 = Matrix4.skew(_alpha, _beta);
    return Transform(
      transform: _m4,
      child: Container(
          color: Colors.cyanAccent,
          width: 100,
          height: 100,
          child: Image.asset(
            'assets/images/wy_300x200.webp',
            fit: BoxFit.cover,
          )),
    );
  }

  Widget _buildSliders() => Column(
        children: <Widget>[
          Slider(
              min: -pi,
              max: pi,
              value: _alpha,
              divisions: 360,
              label: 'alpha:' + (_alpha * 180 / pi).toStringAsFixed(1) + "°",
              onChanged: (v) {
                setState(() {
                  _alpha = v;
                });
              }),
          Slider(
              min: -pi,
              max: pi,
              value: _beta,
              divisions: 360,
              label: 'beta:' + (_beta * 180 / pi).toStringAsFixed(1) + "°",
              onChanged: (v) {
                setState(() {
                  _beta = v;
                });
              })
        ],
      );
}


name: 透视变换rotation
subtitle: 由R3C1、R3C2、R3C3控制透视
code:
import 'dart:math';
import 'package:flutter/material.dart';
class R3C2 extends StatefulWidget {
  @override
  _R3C2State createState() => _R3C2State();
}

class _R3C2State extends State<R3C2> {
  Matrix4 _m4;
  double _value = 0;
  double _rad = 0;

  @override
  Widget build(BuildContext context) {
    _m4 = Matrix4.identity()
//      ..setEntry(3, 0, _value) // x
//      ..setEntry(3, 1, _value)//   y
      ..setEntry(3, 2, _value) // z
      ..rotateY(_rad)
//      ..rotateX(_rad)
        ;
    return Column(
      children: <Widget>[
        Transform(
          transform: _m4,
          child: Container(
              color: Colors.cyanAccent,
              width: 100,
              height: 100,
              child: Image.asset(
                'assets/images/wy_300x200.webp',
                fit: BoxFit.cover,
              )),
        ),
        _buildSliders()
      ],
    );
  }

  Widget _buildSliders() => Column(
    children: <Widget>[
      Slider(
          min: -0.01,
          max: 0.01,
          value: _value,
          divisions: 360,
          label: 'x:${_value.toStringAsFixed(5)}',
          onChanged: (v) {
            setState(() {
              _value = v;
            });
          }),
      Slider(
          min: -pi,
          max: pi,
          value: _rad,
          divisions: 360,
          label: '角度:' + (_rad * 180 / pi).toStringAsFixed(1) + "°",
          onChanged: (v) {
            setState(() {
              _rad = v;
            });
          }),
    ],
  );
}


name: 旋转变换rotation
subtitle: x旋转由R1C1、R1C2、R2C1、R2C2控制,入参表示弧度 y旋转由R0C0、R0C2、R2C0、R2C2控制,入参表示弧度 z旋转由R0C0、R0C1、R1C0、R1C1控制,
code:
import 'dart:math';
import 'package:flutter/material.dart';
import 'matrix4_shower.dart';
class RotateTransform extends StatefulWidget {
  @override
  _RotateTransformState createState() => _RotateTransformState();
}

class _RotateTransformState extends State<RotateTransform> {
  Matrix4 _m4;
  double _x = 0;
  int _rotateFlag = 1;

  @override
  void initState() {
    _m4 = Matrix4.identity();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],
        ),
        _buildSliders()
      ],
    );
  }

  Widget _buildTransform() {
    if (_rotateFlag == 1) {
      _m4 = Matrix4.rotationX(_x);
    } else if (_rotateFlag == 2) {
      _m4 = Matrix4.rotationY(_x);
    } else {
      _m4 = Matrix4.rotationZ(_x);
    }

    return Transform(
      transform: _m4,
      child: Container(
          color: Colors.cyanAccent,
          width: 100,
          height: 100,
          child: Image.asset(
            'assets/images/wy_300x200.webp',
            fit: BoxFit.cover,
          )),
    );
  }

  final Map<int, String> map = {
    1: 'rotationX',
    2: 'rotationY',
    3: 'rotationZ',
  };

  Widget _buildSliders() => Column(
    children: <Widget>[
      Wrap(
        children: map.keys.map((key) => _buildChild(key)).toList(),
      ),
      Slider(
          min: -pi,
          max: pi,
          value: _x,
          divisions: 360,
          label: 'x:${_x.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _x = v;
            });
          }),
    ],
  );

  Padding _buildChild(int key) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: FilterChip(
        selectedColor: Colors.orange.withAlpha(55),
        selectedShadowColor: Colors.blue,
        shadowColor: Colors.orangeAccent,
        pressElevation: 5,
        elevation: 3,
        avatar: CircleAvatar(child: Text(key.toString())),
        label: Text(map[key]),
        selected: _rotateFlag == key,
        onSelected: (bool value) {
          print(map[key]);
          setState(() {
            _x = 0;
            if (value) {
              _rotateFlag = key;
            }
          });
        },
      ),
    );
  }
}


name: 缩放变换diagonal3Values
subtitle: 缩放x由R0C0数控制,入参为数值,表示缩放分率 缩放y由R1C2数控制,入参为数值,表示缩放分率 缩放z由R2C2数控制,入参为数值,表示缩放分率
code:
import 'package:flutter/material.dart';
import 'matrix4_shower.dart';
class ScaleTransform extends StatefulWidget {
  @override
  _ScaleTransformState createState() => _ScaleTransformState();
}

class _ScaleTransformState extends State<ScaleTransform> {
  Matrix4 _m4;
  double _x = 1.0;
  double _y = 1.0;
  double _z = 1.0;

  @override
  void initState() {
    _m4 = Matrix4.identity();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],
        ),
        _buildSliders()
      ],
    );
  }

  Widget _buildTransform() {
    _m4 = Matrix4.diagonal3Values(_x, _y, _z);
    return Transform(
      transform: _m4,
      child: Container(
          color: Colors.cyanAccent,
          width: 100,
          height: 100,
          child: Image.asset(
            'assets/images/wy_300x200.webp',
            fit: BoxFit.cover,
          )),
    );
  }

  Widget _buildSliders() => Column(
    children: <Widget>[
      Slider(
          min: -2,
          max: 2,
          value: _x,
          divisions: 360,
          label: 'x:${_x.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _x = v;
            });
          }),
      Slider(
          min: -2,
          max: 2,
          value: _y,
          divisions: 360,
          label: 'y:${_y.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _y = v;
            });
          }),
      Slider(
          min: -2,
          max: 2,
          value: _z,
          divisions: 360,
          label: 'z:${_z.toStringAsFixed(1)}',
          onChanged: (v) {
            setState(() {
              _z = v;
            });
          })
    ],
  );
}


name: AbsorbPointer基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【absorbing】 : 是否吸收事件   【bool】
如下,Switch选中时absorbing为true，按钮事件将被吸收，无法点击。

code:
import 'package:flutter/material.dart';
class CustomAbsorbPointer extends StatefulWidget {
  @override
  _CustomAbsorbPointerState createState() => _CustomAbsorbPointerState();
}

class _CustomAbsorbPointerState extends State<CustomAbsorbPointer> {
  bool _absorbing = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          GestureDetector(
            onTap: (){
              print('AbsorbPointer');
            },
            child: AbsorbPointer(
              absorbing: _absorbing,
              child: _buildButton(),
            ),
          ),
          _buildSwitch(),
          Text(!_absorbing ? '允许点击' : '事件已被吸收')
        ],
      ),
    );
  }

  Widget _buildButton() => RaisedButton(
      color: Theme.of(context).primaryColor,
      child: Text(
        'To About',
        style: TextStyle(color: Colors.white),
      ),
      onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));

  _buildSwitch() => Switch(
      value: _absorbing,
      onChanged: (v) {
        setState(() {
          _absorbing = v;
        });
      });
}


name: SizedOverflowBox基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【size】 : 尺寸偏移 【Size】 【alignment】 : 对齐方式 【AlignmentGeometry】
code:
import 'package:flutter/material.dart';
class CustomSizedOverflowBox extends StatefulWidget {

  @override
  _CustomSizedOverflowBoxState createState() => _CustomSizedOverflowBoxState();
}

class _CustomSizedOverflowBoxState extends State<CustomSizedOverflowBox> {
  double _x = 50;
  double _y = 44;

  @override
  Widget build(BuildContext context) {
    var box = SizedOverflowBox(
      alignment: Alignment.bottomRight,
      size: Size(_x, _y),
      child: Container(width: 30, height: 50, color: Colors.orange),
    );
    return Column(
      children: <Widget>[
        Container(
            alignment: Alignment.topLeft,
            color: Colors.grey.withAlpha(88),
            width: 250,
            height: 60,
            child: box),
        _buildSlider()
      ],
    );
  }

  Widget _buildSlider() =>
      Column(
        children: <Widget>[
          Slider(
              divisions: 100,
              min: 0,
              max: 250,
              label: 'x:' + _x.toStringAsFixed(1),
              value: _x,
              onChanged: (v) => setState(() => _x = v)),
          Slider(
              divisions: 100,
              min: 0,
              max: 100,
              label: 'y:' + _y.toStringAsFixed(1),
              value: _y,
              onChanged: (v) => setState(() => _y = v)),

        ],
      );
}


name: AnnotatedRegion改变状态量样式
subtitle: 【value】 : 值 【T】 【sized】 : 是否提供大小 【bool】 【child】 : 子组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class AnnotatedRegionDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: ElevatedButton(
        onPressed: (){
          Navigator.push(context,
            MaterialPageRoute(builder: (context) => AnnotatedRegionTestPage()),
          );
        },
        child: Text("进入 AnnotatedRegion 测试页"),
      ),
    );
  }
}


class AnnotatedRegionTestPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    final SystemUiOverlayStyle overlayStyle = SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.green,
      // 导航栏颜色
      systemNavigationBarDividerColor: Colors.red,
      statusBarColor: Colors.blue,
      systemNavigationBarIconBrightness: Brightness.light,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.light,
    );

    return AnnotatedRegion<SystemUiOverlayStyle>(
        value: overlayStyle,
        child: Scaffold(
          body: Container(
            child: Column(
              children: [
                Container(height: 56+30.0,color: Colors.blue,
                alignment: Alignment(0,0.55),
                child: Row(
                  children: [
                    BackButton(color: Colors.white,),
                    Text("AnnotatedRegion测试",style: TextStyle(color: Colors.white,fontSize: 18),)
                  ],
                ),
                ),
                SizedBox(height: 30,),
                Text(
                  "上面标题栏背景颜色为蓝色\n"
                      "上面标题栏图标为亮调",

                  style: TextStyle(color: Colors.black,fontSize: 18),),
                Spacer(),
                Text(
                      "下面导航栏背景颜色为绿色\n"
                      "下面导航栏图标为亮调",

                  style: TextStyle(color: Colors.black,fontSize: 18),),
                SizedBox(height: 30,),
              ],
            ),
          ),
      ),
    );
  }
}


name: SliverOpacity基本使用
subtitle: 【opacity】 : 透明度 【double】 【sliver】 : 子组件 【Function()】
code:
import 'package:flutter/material.dart';
class SliverOpacityDemo extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[
          _buildSliverAppBar(),
          SliverPadding(
              padding: EdgeInsets.only(top: 10),
              sliver: SliverOpacity(opacity: 0.2, sliver: _buildSliverGrid()))
        ],
      ),
    );
  }

  Widget _buildSliverGrid() => SliverGrid.extent(
        childAspectRatio: 1 / 0.618,
        maxCrossAxisExtent: 180,
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        children: data
            .map((e) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: e,
                  child: Text(
                    colorString(e),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ))
            .toList(),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: CustomScrollView基本使用
subtitle:
      
【slivers】 : 子组件列表   【List<Widget>】
【reverse】 : 是否反向   【bool】
【scrollDirection】 : 滑动方向   【Axis】
【controller】 : 控制器   【ScrollController】

code:
import 'package:flutter/material.dart';
class CustomScrollViewDemo extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        anchor: 0,
        scrollDirection: Axis.vertical,
        reverse: false,
        slivers: <Widget>[_buildSliverAppBar(), _buildSliverFixedExtentList()],
      ),
    );
  }

  Widget _buildSliverFixedExtentList() => SliverFixedExtentList(
        itemExtent: 60,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 50,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: Container(
          margin: EdgeInsets.all(10),
          child: Image.asset('assets/images/icon_head.webp')),
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        title: Text(
          '张风捷特烈',
          style: TextStyle(color: Colors.black, //标题
              shadows: [
                Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2)
              ]),
        ),
        background: Image.asset(
          "assets/images/caver.webp", fit: BoxFit.cover,
        ),
      ),
    );
  }
}


name: 刷新控制器基本使用
subtitle:
      
【refreshIndicatorExtent】 : 加载中指示器高度   【double】
【refreshTriggerPullDistance】 : 触发加载的滑动高度   【double】
【onRefresh】 : 下拉事件   【RefreshCallback】
【builder】 : 指示器构造器   【RefreshControlIndicatorBuilder】

code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoSliverRefreshControlDemo extends StatefulWidget {
  @override
  _CupertinoSliverRefreshControlDemoState createState() =>
      _CupertinoSliverRefreshControlDemoState();
}

class _CupertinoSliverRefreshControlDemoState
    extends State<CupertinoSliverRefreshControlDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  final r = Random();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          _buildSliverAppBar(),
          CupertinoSliverRefreshControl(
            refreshIndicatorExtent: 60,
            refreshTriggerPullDistance: 80,
            onRefresh: _doRefresh,
          ),
          _buildSliverList()
        ],
      ),
    );
  }

  Widget _buildSliverList() => SliverFixedExtentList(
        itemExtent: 50,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 120.0,
      leading: Container(
          margin: EdgeInsets.all(10),
          child: Image.asset('assets/images/icon_head.webp')),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  Color randomColor() => Color.fromARGB(
      r.nextInt(255), r.nextInt(255), r.nextInt(255), r.nextInt(255));

  Future<void> _doRefresh() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      data.insertAll(0, [randomColor()]);
    });
  }
}


name: 导航条基本使用
subtitle:
      
【leading】 : 左侧组件   【Widget】
【middle】 : 中间组件   【Widget】
【trailing】 : 尾部组件   【Widget】
【largeTitle】 : 底部折展组件   【Widget】
【border】 : 边线   【Border】
【backgroundColor】 : 背景色   【Color】
【padding】 : 内边距   【EdgeInsetsDirectional】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CupertinoSliverNavigationBarDemo extends StatelessWidget {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[
          CupertinoSliverNavigationBar(
            trailing: Icon(
              CupertinoIcons.share,
              size: 25,
            ),
            leading: _buildLeading(),
            backgroundColor: Colors.white,
            // middle: Text('张风捷特烈'),
            largeTitle: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  Icons.ac_unit,
                  size: 20,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: Text('张风捷特烈'),
                ),
                Icon(Icons.ac_unit, size: 20),
              ],
            ),
          ),
          _buildSliverList()
        ],
      ),
    );
  }

  Widget _buildSliverList() => SliverPrototypeExtentList(
        prototypeItem: Container(
          height: 40,
        ),
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));


  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverFillRemaining基本使用
subtitle:
      
【hasScrollBody】 : 是否具有滚动主体   【bool】
【fillOverscroll】 : 是否可填充滚动区域   【bool】
【child】 : 子组件   【Widget】

code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SliverFillRemainingDemo extends StatefulWidget {
  @override
  _SliverFillRemainingDemoState createState() =>
      _SliverFillRemainingDemoState();
}

class _SliverFillRemainingDemoState extends State<SliverFillRemainingDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  final r = Random();

  bool hasScrollBody = false;
  bool fillOverscroll = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          _buildSliverAppBar(),
          _buildSliverList(),
          SliverFillRemaining(
            hasScrollBody: hasScrollBody,
            fillOverscroll: fillOverscroll,
            child: Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage("assets/images/sabar_bar.webp"))),
              // // color: Colors.teal[100],
              child: _buildBottomChild(),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBottomChild() => Align(
        alignment: Alignment.bottomCenter,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Wrap(
            spacing: 10,
            children: [
              RaisedButton(
                color: Colors.blue,
                onPressed: () {
                  setState(() {
                    hasScrollBody = !hasScrollBody;
                  });
                },
                child: Text('hasScrollBody:$hasScrollBody',style: TextStyle(color: Colors.white),),
              ),
              RaisedButton(
                color: Colors.blue,

                onPressed: () {
                  setState(() {
                    fillOverscroll = !fillOverscroll;
                  });
                },
                child: Text('fillOverscroll:$fillOverscroll',style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      );

  Widget _buildSliverList() => SliverFixedExtentList(
        itemExtent: 50,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 120.0,
      leading: Container(
          margin: EdgeInsets.all(10),
          child: Image.asset('assets/images/icon_head.webp')),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

}


name: SliverPadding基本使用
subtitle: 【sliver】 : 子组件 【Widget】 【padding】 : 内边距 【EdgeInsetsGeometry】
code:
import 'package:flutter/material.dart';
class SliverPaddingDemo extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[_buildSliverAppBar(), SliverPadding(
            padding: EdgeInsets.only(top: 10),
            sliver
            : _buildSliverGrid())],
      ),
    );
  }

  Widget _buildSliverGrid() => SliverGrid.extent(
    childAspectRatio: 1 / 0.618,
    maxCrossAxisExtent: 180,
    crossAxisSpacing: 5,
    mainAxisSpacing: 5,
    children: data
        .map((e) => Container(
      alignment: Alignment.center,
      width: 100,
      height: 60,
      color: e,
      child: Text(
        colorString(e),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(
              color: Colors.black,
              offset: Offset(.5, .5),
              blurRadius: 2)
        ]),
      ),
    ))
        .toList(),
  );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
    IconButton(
      onPressed: () {},
      icon: Icon(
        Icons.star_border,
        color: Colors.white,
      ),
    )
  ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverList基本使用
subtitle: SliverGrid.count 指定轴向数量构造 SliverGrid.extent 指定轴向长度构造 属性特征同GridView,可详见之
code:
import 'package:flutter/material.dart';
class SliverGirdDemo extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],
      ),
    );
  }

  Widget _buildSliverList() => SliverGrid.extent(
        childAspectRatio: 1 / 0.618,
        maxCrossAxisExtent: 180,
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        children: data
            .map((e) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: e,
                  child: Text(
                    colorString(e),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ))
            .toList(),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverAppBar基本使用
subtitle:
      
【leading】 : 左侧组件   【Widget】
【title】 : 中间组件   【Widget】
【actions】 : 尾部组件列表   【List<Widget>】
【floating】 : 是否浮动   【bool】
【pinned】 : 是否顶部停留   【bool】
【snap】 : 是否半收展   【bool】
【bottom】 : 底部组件   【PreferredSizeWidget】
【expandedHeight】 : 延展高度   【double】
【elevation】 : 影深   【double】
【flexibleSpace】 : 延展空间   【FlexibleSpaceBar】
【backgroundColor】 : 背景色   【Color】
【controller】 : 控制器   【ScrollController】
   snap为true时必需floating为true

code:
import 'package:flutter/material.dart';
class SliverAppBarDemo extends StatefulWidget {
  @override
  _SliverAppBarDemoState createState() => _SliverAppBarDemoState();
}

class _SliverAppBarDemoState extends State<SliverAppBarDemo> {
  bool _floating = false;
  bool _pinned = false;
  bool _snap = false;

  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTool(),
        Container(
          height: 300,
          child: CustomScrollView(
            slivers: <Widget>[
              _buildSliverAppBar(),
              _buildSliverFixedExtentList()
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildSliverAppBar() {
    print(_floating);
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      floating: _floating,
      pinned: _pinned,
      snap: _snap,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(//伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  Widget _buildSliverFixedExtentList() => SliverFixedExtentList(
        itemExtent: 60,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 50,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  Widget _buildTool() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Wrap(
          direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: <Widget>[
            Text('floating'),
            Switch(
                value: _floating,
                onChanged: (v) {
                  if(_snap&&!v){
                    _snap =false;
                  }
                  setState(() => _floating = v);
                }),
          ],
        ),
        Wrap(
          direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: <Widget>[
            Text('pinned'),
            Switch(
                value: _pinned,
                onChanged: (v) => setState(() => _pinned = v)),
          ],
        )       ,Wrap(
          direction: Axis.vertical,
          crossAxisAlignment: WrapCrossAlignment.center,
          children: <Widget>[
            Text('snap'),
            Switch(
                value: _snap,
                onChanged: (v) {
                  if(_floating){
                    setState(() => _snap = v);
                  }

                }),
          ],
        )
      ],
    );
  }
}


name: SliverList基本使用
subtitle: 【delegate】 : 孩子代理 【SliverChildDelegate】
code:
import 'package:flutter/material.dart';
class SliverListDemo extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],
      ),
    );
  }

  Widget _buildSliverList() => SliverList(
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverIgnorePointer基本使用
subtitle: 【sliver】 : sliver组件 【Widget】 【ignoring】 : 是否忽略事件 【bool】,
code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SliverIgnorePointerDemo extends StatefulWidget {
  @override
  _SliverIgnorePointerDemoState createState() =>
      _SliverIgnorePointerDemoState();
}

class _SliverIgnorePointerDemoState extends State<SliverIgnorePointerDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  final r = Random();

  bool hasScrollBody = false;
  bool fillOverscroll = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          _buildSliverAppBar(),
          _buildSliverList(),
          SliverIgnorePointer(
            ignoring: true,
            sliver: SliverFillRemaining(
              hasScrollBody: hasScrollBody,
              fillOverscroll: fillOverscroll,
              child: Container(
                decoration: BoxDecoration(
                    image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage("assets/images/sabar_bar.webp"))),
                // // color: Colors.teal[100],
                child: _buildBottomChild(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBottomChild() => Align(
        alignment: Alignment.bottomCenter,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Wrap(
            spacing: 10,
            children: [
              RaisedButton(
                color: Colors.blue,
                onPressed: () {
                  setState(() {
                    hasScrollBody = !hasScrollBody;
                  });
                },
                child: Text('hasScrollBody:$hasScrollBody',style: TextStyle(color: Colors.white),),
              ),
              RaisedButton(
                color: Colors.blue,

                onPressed: () {
                  setState(() {
                    fillOverscroll = !fillOverscroll;
                  });
                },
                child: Text('fillOverscroll:$fillOverscroll',style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      );

  Widget _buildSliverList() => SliverFixedExtentList(
        itemExtent: 50,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 120.0,
      leading: Container(
          margin: EdgeInsets.all(10),
          child: Image.asset('assets/images/icon_head.webp')),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

}


name: SliverLayoutBuilder基本使用
subtitle: 【builder】 : 组件构造器 【SliverLayoutWidgetBuilder】
code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/rendering/sliver.dart';
class SliverLayoutBuilderDemo extends StatefulWidget {
  @override
  _SliverLayoutBuilderDemoState createState() =>
      _SliverLayoutBuilderDemoState();
}

class _SliverLayoutBuilderDemoState extends State<SliverLayoutBuilderDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
        slivers: <Widget>[
          _buildSliverAppBar(),
          SliverLayoutBuilder(
            builder: _buildSliver,
          ),
          _buildSliverList(),
        ],
      ),
    );
  }

  Widget _buildSliverList() => SliverFixedExtentList(
        itemExtent: 50,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 120.0,
      leading: Container(
          margin: EdgeInsets.all(10),
          child: Image.asset('assets/images/icon_head.webp')),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  Widget _buildSliver(BuildContext context, SliverConstraints constraints) {
    return SliverToBoxAdapter(
      child: Container(
        alignment: Alignment.center,
        height: constraints.remainingPaintExtent / 3,
        color: Colors.red,
        child: Text(
          "SliverLayoutBuilder",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }
}


name: SliverOverlapAbsorber基本使用
subtitle:
      
【sliver】 : 子组件   【Widget】
【handle】 : *处理器   【SliverOverlapAbsorberHandle】
如果不使用SliverOverlapAbsorber和SliverOverlapInjector组件,NestedScrollView的内容会和头部栏重叠。

code:
import 'package:flutter/material.dart';
class SliverOverlapAbsorberDemo extends StatelessWidget {
  final _tabs = ['风神传', '封妖志', "幻将录", "永恒传说"];

  @override
  Widget build(BuildContext context) {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height - 200,
        child: Scaffold(
          body: DefaultTabController(
            length: _tabs.length,
            child: NestedScrollView(
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    sliver: SliverAppBar(
                      title: const Text('旷古奇书'),
                      pinned: true,
                      elevation: 6, //影深
                      expandedHeight: 220.0,
                      forceElevated: innerBoxIsScrolled, //为true时展开有阴影
                      flexibleSpace: FlexibleSpaceBar(
                        background: Image.asset(
                          "assets/images/wy_300x200_filter.webp",
                          fit: BoxFit.cover,
                        ),
                      ),
                      bottom: TabBar(
                        tabs: _tabs
                            .map((String name) => Tab(text: name,))
                            .toList(),
                      ),
                    ),
                  ),
                ];
              },
              body: _buildTabBarView(),
            ),
          ),
        ));
  }

  Widget _buildTabBarView() {
    return TabBarView(
      children: _tabs.map((String name) {
        return SafeArea(
          top: false,
          bottom: false,
          child: Builder(
            builder: (BuildContext context) {
              return CustomScrollView(
                key: PageStorageKey<String>(name),
                slivers: <Widget>[
                  SliverOverlapInjector(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.all(8.0),
                    sliver: SliverFixedExtentList(
                      itemExtent: 48.0,
                      delegate: SliverChildBuilderDelegate(
                            (BuildContext context, int index) {
                          return ListTile(
                            title: Text('《$name》 第 $index章'),
                          );
                        },
                        childCount: 50,
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        );
      }).toList(),
    );
  }
}


name: SliverAnimatedList基本使用
subtitle: 【itemBuilder】 : item构造器 【AnimatedListItemBuilder】 【initialItemCount】 : 初始item个数 【int】
code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SliverAnimatedListDemo extends StatefulWidget {
  @override
  _SliverAnimatedListDemoState createState() =>
      _SliverAnimatedListDemoState();
}

class _SliverAnimatedListDemoState extends State<SliverAnimatedListDemo> {

  final GlobalKey<SliverAnimatedListState> _listKey = GlobalKey<SliverAnimatedListState>();
  ListModel<int> _list;
  int _selectedItem;
  int _nextItem;

  @override
  void initState() {
    super.initState();
    _list = ListModel<int>(
      listKey: _listKey,
      initialItems: <int>[0, 1, 2],
      removedItemBuilder: _buildRemovedItem,
    );
    _nextItem = 3;
  }

  Widget _buildItem(BuildContext context, int index, Animation<double> animation) {
    return CardItem(
      animation: animation,
      item: _list[index],
      selected: _selectedItem == _list[index],
      onTap: () {
        setState(() {
          _selectedItem = _selectedItem == _list[index] ? null : _list[index];
        });
      },
    );
  }

  Widget _buildRemovedItem(int item, BuildContext context, Animation<double> animation) {
    return CardItem(
      animation: animation,
      item: item,
      selected: false,
    );
  }

  void _insert() {
    final int index = _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);
    _list.insert(index, _nextItem++);
  }

  void _remove() {
    if (_selectedItem != null) {
      _list.removeAt(_list.indexOf(_selectedItem));
      setState(() {
        _selectedItem = null;
      });
    } else {
      if(_list.length>0){
        _list.removeAt(0);
        setState(() {
          _selectedItem = null;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return  Container(
      height: 300,
      child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                title: Text(
                  'SliverAnimatedList',
                  style: TextStyle(fontSize: 20),
                ),
                expandedHeight: 60,
                centerTitle: true,
                leading: IconButton(
                  icon: const Icon(Icons.add_circle),
                  onPressed: _insert,
                  tooltip: '插入一个item',
                  iconSize: 32,
                ),
                actions: [
                  IconButton(
                    icon: const Icon(Icons.remove_circle),
                    onPressed: _remove,
                    tooltip: '删除选中的item',
                    iconSize: 32,
                  ),
                ],
              ),
              SliverAnimatedList(
                key: _listKey,
                initialItemCount: _list.length,
                itemBuilder: _buildItem,
              ),
            ],
      ),
    );
  }


}

class ListModel<E> {
  ListModel({
    @required this.listKey,
    @required this.removedItemBuilder,
    Iterable<E> initialItems,
  }) : assert(listKey != null),
        assert(removedItemBuilder != null),
        _items = List<E>.from(initialItems ?? <E>[]);
  final GlobalKey<SliverAnimatedListState> listKey;
  final dynamic removedItemBuilder;
  final List<E> _items;
  SliverAnimatedListState get _animatedList => listKey.currentState;
  void insert(int index, E item) {
    _items.insert(index, item);
    _animatedList.insertItem(index);
  }
  E removeAt(int index) {
    final E removedItem = _items.removeAt(index);
    if (removedItem != null) {
      _animatedList.removeItem(
        index,
            (BuildContext context, Animation<double> animation) => removedItemBuilder(removedItem, context, animation),
      );
    }
    return removedItem;
  }
  int get length => _items.length;
  E operator [](int index) => _items[index];
  int indexOf(E item) => _items.indexOf(item);
}


class CardItem extends StatelessWidget {
  const CardItem({
    Key key,
    @required this.animation,
    @required this.item,
    this.onTap,
    this.selected = false,
  }) : assert(animation != null),
        assert(item != null && item >= 0),
        assert(selected != null),
        super(key: key);
  final Animation<double> animation;
  final VoidCallback onTap;
  final int item;
  final bool selected;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding:
      const EdgeInsets.only(
        left: 2.0,
        right: 2.0,
        top: 2.0,
        bottom: 0.0,
      ),
      child: SizeTransition(
        axis: Axis.vertical,
        sizeFactor: animation,
        child: GestureDetector(
          onTap: onTap,
          child: SizedBox(
            height: 60.0,
            child: Card(
              color: selected
                  ? Colors.black12
                  : Colors.primaries[item % Colors.primaries.length],
              child: Center(
                child: Text(
                  'Item $item',
                  style: TextStyle(color: Colors.white,fontSize: 16),

                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}


name: SliverFixedExtentList基本使用
subtitle: 【itemExtent】 : 主轴方向强迫长度 【double】 【delegate】 : 孩子代理 【SliverChildDelegate】
code:
import 'package:flutter/material.dart';
class SliverFixedExtentListDemo extends StatefulWidget {
  @override
  _SliverFixedExtentListDemoState createState() => _SliverFixedExtentListDemoState();
}

class _SliverFixedExtentListDemoState extends State<SliverFixedExtentListDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],
      ),
    );
  }

  Widget _buildSliverList() => SliverFixedExtentList(
        itemExtent: 50,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverToBoxAdapter基本使用
subtitle: 【child】 : 子组件 【Widget】
code:
import 'package:flutter/material.dart';
class SliverToBoxAdapterDemo extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[
          _buildSliverAppBar(),
          _buildCommonWidget(),
          _buildSliverList()
        ],
      ),
    );
  }

  Widget _buildCommonWidget() => SliverToBoxAdapter(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10),
          color: Colors.grey.withAlpha(22),
          child: ListTile(
            leading: Image.asset("assets/images/icon_head.webp"),
            title: Text("以梦为马"),
            subtitle: Text("海子"),
            selected: true,
            contentPadding: EdgeInsets.all(5),
            trailing: Icon(Icons.more_vert),
          ),
        ),
      );

  Widget _buildSliverList() => SliverList(
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 2,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverOverlapInjector基本使用
subtitle:
      
【sliver】 : 子组件   【Widget】
【handle】 : *处理器   【SliverOverlapAbsorberHandle】
如果不使用SliverOverlapAbsorber和SliverOverlapInjector组件,NestedScrollView的内容会和头部栏重叠。

code:
import 'package:flutter/material.dart';
class SliverOverlapInjectorDemo extends StatelessWidget {
  final _tabs = ['风神传', '封妖志', "幻将录", "永恒传说"];

  @override
  Widget build(BuildContext context) {
    return Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height - 200,
        child: Scaffold(
          body: DefaultTabController(
            length: _tabs.length,
            child: NestedScrollView(
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    sliver: SliverAppBar(
                      title: const Text('旷古奇书'),
                      pinned: true,
                      elevation: 6, //影深
                      expandedHeight: 220.0,
                      forceElevated: innerBoxIsScrolled, //为true时展开有阴影
                      flexibleSpace: FlexibleSpaceBar(
                        background: Image.asset(
                          "assets/images/wy_300x200_filter.webp",
                          fit: BoxFit.cover,
                        ),
                      ),
                      bottom: TabBar(
                        tabs: _tabs
                            .map((String name) => Tab(text: name,))
                            .toList(),
                      ),
                    ),
                  ),
                ];
              },
              body: _buildTabBarView(),
            ),
          ),
        ));
  }

  Widget _buildTabBarView() {
    return TabBarView(
      children: _tabs.map((String name) {
        return SafeArea(
          top: false,
          bottom: false,
          child: Builder(
            builder: (BuildContext context) {
              return CustomScrollView(
                key: PageStorageKey<String>(name),
                slivers: <Widget>[
                  SliverOverlapInjector(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  ),
                  SliverPadding(
                    padding: const EdgeInsets.all(8.0),
                    sliver: SliverFixedExtentList(
                      itemExtent: 48.0,
                      delegate: SliverChildBuilderDelegate(
                            (BuildContext context, int index) {
                          return ListTile(
                            title: Text('《$name》 第 $index章'),
                          );
                        },
                        childCount: 50,
                      ),
                    ),
                  ),
                ],
              );
            },
          ),
        );
      }).toList(),
    );
  }
}


name: SliverFillViewport基本使用
subtitle: 【viewportFraction】 : 视口分率 【double】 【delegate】 : 孩子代理 【SliverChildDelegate】
code:
import 'package:flutter/material.dart';
class SliverFillViewportDemo extends StatefulWidget {
  @override
  _SliverFillViewportDemoState createState() => _SliverFillViewportDemoState();
}

class _SliverFillViewportDemoState extends State<SliverFillViewportDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];
  var _viewportFraction = 0.5;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTool(),
        Container(
          height: 300,
          child: CustomScrollView(
            slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],
          ),
        ),
      ],
    );
  }

  Widget _buildSliverList() => SliverFillViewport(
        viewportFraction: _viewportFraction,
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";

  _buildTool() {
    return Slider(
        value: _viewportFraction,
        min: 0.01,
        divisions: 20,
        label: _viewportFraction.toStringAsFixed(1),
        max: 2.0,
        onChanged: (v) => setState(() => _viewportFraction = v));
  }
}


name: FlexibleSpaceBar基本使用
subtitle:
      
【title】 : 标题组件   【Widget】
【titlePadding】 : 标题间距   【EdgeInsetsGeometry】
【collapseMode】 : 折叠模式   【CollapseMode】
【stretchModes】 : 延伸模式   【List<StretchMode>】
【background】 : 背景组件   【Widget】
【centerTitle】 : 是否居中   【bool】

code:
import 'package:flutter/material.dart';
class FlexibleSpaceBarDemo extends StatelessWidget {

  final data = <Color>[
    Colors.blue[50],
    Colors.blue[100],
    Colors.blue[200],
    Colors.blue[300],
    Colors.blue[400],
    Colors.blue[500],
    Colors.blue[600],
    Colors.blue[700],
    Colors.blue[800],
    Colors.blue[900],
  ];

  @override
  Widget build(BuildContext context) {
    return
        Container(
          height: 300,
          child: CustomScrollView(
            slivers: <Widget>[
              _buildSliverAppBar(),
              _buildSliverFixedExtentList()
            ],
          ),
    );
  }

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      actions: _buildActions(),
      pinned: true,
      backgroundColor: Colors.blue,
      flexibleSpace: FlexibleSpaceBar(//伸展处布局
        centerTitle: false,
        title: Text('张风捷特烈',style: TextStyle(shadows: [
          Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2)
        ]),),
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        stretchModes: [StretchMode.blurBackground,StretchMode.zoomBackground],
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
    IconButton(
      onPressed: () {},
      icon: Icon(
        Icons.star_border,
        color: Colors.white,
      ),
    )
  ];

  Widget _buildSliverFixedExtentList() => SliverFixedExtentList(
    itemExtent: 60,
    delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
          alignment: Alignment.center,
          width: 100,
          height: 50,
          color: data[index],
          child: Text(
            colorString(data[index]),
            style: TextStyle(color: Colors.white, shadows: [
              Shadow(
                  color: Colors.black,
                  offset: Offset(.5, .5),
                  blurRadius: 2)
            ]),
          ),
        ),
        childCount: data.length),
  );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverPrototypeExtentList基本使用
subtitle: 【prototypeItem】 : 主轴方向尺寸组件 【Widget】 【delegate】 : 孩子代理 【SliverChildDelegate】
code:
import 'package:flutter/material.dart';
class SliverPrototypeExtentListDemo extends StatefulWidget {
  @override
  _SliverPrototypeExtentListDemoState createState() =>
      _SliverPrototypeExtentListDemoState();
}

class _SliverPrototypeExtentListDemoState
    extends State<SliverPrototypeExtentListDemo> {
  final data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CustomScrollView(
        slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],
      ),
    );
  }

  Widget _buildSliverList() => SliverPrototypeExtentList(
        prototypeItem: Container(
          height: 80,
        ),
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 60,
                  color: data[index],
                  child: Text(
                    colorString(data[index]),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ),
            childCount: data.length),
      );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 150.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 5,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
        IconButton(
          onPressed: () {},
          icon: Icon(
            Icons.star_border,
            color: Colors.white,
          ),
        )
      ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: SliverPersistentHeader基本使用
subtitle:
      
【delegate】 : 代理   【SliverPersistentHeaderDelegate】
【floating】 : 是否浮动   【bool】
【pinned】 : 是否顶部停留   【bool】

code:
import 'dart:math';
import 'package:flutter/material.dart';
class SliverPersistentHeaderDemo extends StatelessWidget {
  final data = <Color>[
    Colors.purple[50],
    Colors.purple[100],
    Colors.purple[200],
    Colors.purple[300],
    Colors.purple[400],
    Colors.purple[500],
    Colors.purple[600],
    Colors.purple[700],
    Colors.purple[800],
    Colors.purple[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      child: CustomScrollView(
        slivers: <Widget>[
          _buildSliverAppBar(),
          _buildPersistentHeader('袅缈岁月，青丝银发',Color(0xffe7fcc9)),
          _buildCommonWidget(),
          _buildPersistentHeader('以梦为马，不负韶华',Color(0xffcca4ff)),
          _buildSliverList()
        ],
      ),
    );
  }

  Widget _buildCommonWidget() => SliverToBoxAdapter(
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      color: Colors.grey.withAlpha(22),
      child: ListTile(
        leading: Image.asset("assets/images/icon_head.webp"),
        title: Text("以梦为马"),
        subtitle: Text("海子"),
        selected: true,
        contentPadding: EdgeInsets.all(5),
        trailing: Icon(Icons.more_vert),
      ),
    ),
  );
  Widget _buildPersistentHeader(String text,Color color) => SliverPersistentHeader(
    pinned: true,
    delegate: _SliverDelegate(
        minHeight: 40.0,
        maxHeight: 100.0,
        child: Container(
          color: color,
          child: Center(
            child: Text(text, style: TextStyle(
                fontSize: 18,
                shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]),
          ),
        )),
  ));

  Widget _buildSliverList() => SliverList(
    delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
          alignment: Alignment.center,
          width: 100,
          height: 60,
          color: data[index],
          child: Text(
            colorString(data[index]),
            style: TextStyle(color: Colors.white, shadows: [
              Shadow(
                  color: Colors.black,
                  offset: Offset(.5, .5),
                  blurRadius: 2)
            ]),
          ),
        ),
        childCount: data.length),
  );

  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: 190.0,
      leading: _buildLeading(),
      title: Text('张风捷特烈'),
      actions: _buildActions(),
      elevation: 2,
      pinned: true,
      backgroundColor: Colors.orange,
      flexibleSpace: FlexibleSpaceBar(
        //伸展处布局
        titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
        collapseMode: CollapseMode.parallax, //视差效果
        background: Image.asset(
          "assets/images/caver.webp",
          fit: BoxFit.cover,
        ),
      ),
    );
  }

  Widget _buildLeading() => Container(
      margin: EdgeInsets.all(10),
      child: Image.asset('assets/images/icon_head.webp'));

  List<Widget> _buildActions() => <Widget>[
    IconButton(
      onPressed: () {},
      icon: Icon(
        Icons.star_border,
        color: Colors.white,
      ),
    )
  ];

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


class _SliverDelegate extends SliverPersistentHeaderDelegate {
  _SliverDelegate({
    @required this.minHeight,
    @required this.maxHeight,
    @required this.child,
  });

  final double minHeight; //最小高度
  final double maxHeight; //最大高度
  final Widget child; //孩子

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => max(maxHeight, minHeight);

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new SizedBox.expand(child: child);
  }

  @override //是否需要重建
  bool shouldRebuild(_SliverDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }
}


name: PerformanceOverlay基本使用
subtitle: 使用PerformanceOverlay.allEnabled可以开始所有的监测项。
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PerformanceOverlayDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PerformanceOverlay.allEnabled(

    );
  }
}


name: ErrorWidget基本使用
subtitle: 入参 : 显示信息 【Object】
code:
import 'package:flutter/material.dart';
class ErrorWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ErrorWidget(
          'I am Error ErrorWidget\n'
              'But now, there has no error.'
      ),
    );
  }
}


name: Table基本使用
subtitle:
      
【children】 : 组件列表   【List<Widget>】
【columnWidths】 : 列宽   【Map<int, TableColumnWidth>】
【defaultColumnWidth】 : 默认列宽  【TableColumnWidth】
【border】 : 边线   【TableBorder】
【textDirection】 : 文字方向   【TextDirection】
【defaultVerticalAlignment】 : 单元格竖直方向对齐模式   【TableCellVerticalAlignment】

code:
import 'package:flutter/material.dart';
class CustomTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = _ItemBean("单位称", "量纲", "单位", "单位名称", "单位符号");
    var m = _ItemBean("长度", "L", "1m", "米", "m");
    var kg = _ItemBean("质量", "M", "1Kg", "千克", "Kg");
    var s = _ItemBean("时间", "T", "1s", "秒", "s");
    var a = _ItemBean("安培", "Ι", "1A", "安培", "A");
    var k = _ItemBean("热力学温度", "θ", "1K", "开尔文", "K");
    var mol = _ItemBean("物质的量", "N", "1mol", "摩尔", "mol");
    var cd = _ItemBean("发光强度", "J", "1cd", "坎德拉", "cd");

    var data = <_ItemBean>[title, m, kg, s, a, k, mol, cd];

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Table(
        columnWidths: const <int, TableColumnWidth>{
          0: FixedColumnWidth(80.0),
          1: FixedColumnWidth(80.0),
          2: FixedColumnWidth(80.0),
          3: FixedColumnWidth(80.0),
          4: FixedColumnWidth(80.0),
        },
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        border: TableBorder.all(
            color: Colors.orangeAccent, width: 1.0, style: BorderStyle.solid),
        children: data
            .map((item) => TableRow(children: <Widget>[
                  Center(
                      child: Text(
                    item.name,
                    style: TextStyle(color: Colors.blue),
                  )),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: Text(item.symbol)),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: Text(item.unitSymbol)),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: Text(item.unitName)),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: Text(item.unit)),
                  ),
                ]))
            .toList(),
      ),
    );
  }
}

class _ItemBean {
  String name;
  String symbol;
  String unit;
  String unitName;
  String unitSymbol;

  _ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);
}


name: RawImage基本使用
subtitle:
【image】 : 图片   【ui.Image】
【width】 : 宽   【int】
【height】: 高   【int】
【isAntiAlias】: 是否抗锯齿   【bool】
【filterQuality】: 过滤质量   【FilterQuality】
很多属性同Image,详见之.

code:
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
class RawImageDemo extends StatefulWidget {
  @override
  _RawImageDemoState createState() => _RawImageDemoState();
}

class _RawImageDemoState extends State<RawImageDemo> {
  ui.Image _image;

  @override
  void initState() {
    super.initState();
    _loadImageFromAssets('assets/images/icon_head.webp');
  }

  @override
  Widget build(BuildContext context) {
    if (_image == null)
      return Container(
        width: 80,
        height: 80,
      );

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RawImage(
              image: _image,
              width: 150,
              height: 150,
              isAntiAlias: true,
              filterQuality: FilterQuality.high,
            ),
            Text('isAntiAlias: true'),
            Text('FilterQuality.high')
          ],
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RawImage(
              image: _image,
              width: 150,
              height: 150,
              isAntiAlias: false,
            ),
            Text('isAntiAlias: false'),
            Text('FilterQuality.low')
          ],
        ),
      ],
    );
  }

  void _loadImageFromAssets(String name) async {
    _image = await loadImageByProvider(AssetImage(name));

    setState(() {});
  }

  //通过ImageProvider读取Image
  Future<ui.Image> loadImageByProvider(
    ImageProvider provider, {
    ImageConfiguration config = ImageConfiguration.empty,
  }) async {
    Completer<ui.Image> completer = Completer<ui.Image>(); //完成的回调
    ImageStreamListener listener;
    ImageStream stream = provider.resolve(config); //获取图片流
    listener = ImageStreamListener((ImageInfo frame, bool sync) {
      //监听
      final ui.Image image = frame.image;
      completer.complete(image); //完成
      stream.removeListener(listener); //移除监听
    });
    stream.addListener(listener); //添加监听
    return completer.future; //返回
  }
}


name: ButtonBarTheme基本使用
subtitle:
可指定ButtonBarThemeData数据属性为【后代】的ButtonBar组件设置默认样式，如对齐方式、样式、边距等。也可以用ButtonBarTheme.of获取ButtonBar的主题属性。

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ButtonBarThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonBarTheme(
        child: TempButtonBar(),
        data: ButtonBarTheme.of(context).copyWith(
            alignment: MainAxisAlignment.center,
            buttonPadding: EdgeInsets.symmetric(horizontal: 6),
            overflowDirection: VerticalDirection.up,
            buttonMinWidth: 150,
            buttonHeight: 30,
            buttonTextTheme: ButtonTextTheme.primary));
  }
}

class TempButtonBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      alignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            color: Colors.blue, child: Text("1.Raised"), onPressed: () {}),
        OutlineButton(child: Text("2.Outline"), onPressed: () {}),
        FlatButton(
          color: Colors.blue,
          onPressed: () {},
          child: Text("3.Flat"),
        )
      ],
    );
  }
}


name: DividerTheme使用
subtitle: 属性参数与Divider类似，可以通过DividerTheme.of获取分割线主题数据，" 也可以为DividerTheme【后代】的分割线设置默认样式，包括颜色、粗细、高度等。
code:
import 'package:flutter/material.dart';
class DividerThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DividerTheme(
      data: DividerThemeData(
        color: Colors.orange,
        thickness: 2,
        space: 10,
        indent: 10,
        endIndent: 10,

      ),
      child: Wrap(
        spacing: 10,
        children: <Widget>[
         Divider(),
         Divider(),
         Divider(),
         Divider(),
         Divider(),
          Container(
            height: 100,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                VerticalDivider(),
                VerticalDivider(),
                VerticalDivider(),
                VerticalDivider(),
                VerticalDivider(),
              ],
            ),
          )
        ],
      ),
    );
  }
}


name: ListTileTheme基本使用
subtitle: 可指定ListTileThemeData数据属性为【后代】的ListTile组件设置默认样式，如样式、颜色、装饰、边距等。也可以用ListTileTheme.of获取ListTile的主题属性。
code:
import 'package:flutter/material.dart';
class ListTileThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListTileTheme(
      dense: false,
      style: ListTileStyle.list,
      selectedColor: Colors.blue,
      contentPadding: EdgeInsets.only(left: 15,right: 15,top: 5,bottom: 5),
      iconColor: Colors.purple,
      textColor: Colors.orange,
      child: _ListTileSimple(),
    );
  }
}

class _ListTileSimple extends StatefulWidget {
  @override
  _ListTileSimpleState createState() => _ListTileSimpleState();
}

class _ListTileSimpleState extends State<_ListTileSimple> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      color: Colors.grey.withAlpha(22),
      child: ListTile(
        leading: Image.asset("assets/images/icon_head.webp"),
        selected: _selected,
        title: Text("以梦为马"),
        subtitle: Text("海子"),
        trailing: Icon(Icons.more_vert),
        onTap: () => setState(() => _selected = !_selected),
      ),
    );
  }
}


name: Expanded基本使用
subtitle: 【child】 : 孩子 【Widget】 【flex】 : 剩余空间分配占比 【int】
code:
import 'package:flutter/material.dart';
import '../../../../app/utils/color_utils.dart';
class CustomExpended extends StatefulWidget {
  @override
  _CustomExpendedState createState() => _CustomExpendedState();
}

class _CustomExpendedState extends State<CustomExpended> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          buildRow([0, 0, 0]),
          SizedBox(height: 10,),
          buildRow([0, 0, 1]),
          SizedBox(height: 10,),
          buildRow([1, 1, 1]),
          SizedBox(height: 10,),
          buildRow([2, 3, 3]),
        ],
      ),
    );
  }

  Widget buildRow(List<int> num) {
    return Row(
        children: num.map((e) => Expanded(
              flex: e,
              child: Container(
                alignment: Alignment.center,
                width: 50,
                height: 50,
                color: ColorUtils.randomColor(),
                child: Text(
                  'flex=$e',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )).toList());
  }
}


name: DropDownButtonHideUnderline使用
subtitle: 【child】 : 子组件 【Widget】,
code:
import 'package:flutter/material.dart';
class CustomDropDownButtonHideUnderline extends StatefulWidget {
  @override
  _CustomDropDownButtonHideUnderlineState createState() =>
      _CustomDropDownButtonHideUnderlineState();
}

class _CustomDropDownButtonHideUnderlineState
    extends State<CustomDropDownButtonHideUnderline> {
  Color _color = Colors.red;
  final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
  final _info = ["红色", "黄色", "蓝色", "绿色"];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(horizontal: 20),
          width: 50,
          height: 50,
          color: _color,
        ),
        DropdownButtonHideUnderline(
          child: DropdownButton<Color>(
              value: _color,
              elevation: 1,
              icon: Icon(
                Icons.expand_more,
                size: 20,
                color: _color,
              ),
              items: _buildItems(),
              onChanged: (v) => setState(() => _color = v)),
        ),
      ],
    );
  }

  List<DropdownMenuItem<Color>> _buildItems() => _colors
      .map((e) => DropdownMenuItem<Color>(
          value: e,
          child: Text(
            _info[_colors.indexOf(e)],
            style: TextStyle(color: e),
          )))
      .toList();
}


name: SliderTheme使用
subtitle:
      
可通过SliderTheme.of获取Slider主题数据对象，其中包含大量属性用于对Slider的设定。"
可以为ButtonTheme【后代】的按钮组件设置默认样式，包括颜色、形状、尺寸等。

code:
import 'dart:math';
import 'package:flutter/material.dart';
class SliderThemeDemo extends StatefulWidget {
  @override
  _SliderThemeDemoState createState() => _SliderThemeDemoState();
}

class _SliderThemeDemoState extends State<SliderThemeDemo> {
  var _bliss = 0.5;

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(activeTrackColor: Colors.orange),
      child: Slider(
        min: 0.0,
        max: 200.0,
        divisions: 10,
        label: "${_bliss.toStringAsFixed(1)}",
        onChanged: (double value) {
          setState(() {
            _bliss = value;
          });
        },
        value: _bliss,
      ),
    );
  }
}


name: SliderTheme对Slider的样式定制
subtitle: 通过thumbShape和valueIndicatorShape可以对Slider进行样式定制。" 注: 本例参考flutter-gallery中的SlideDemo
code:
import 'dart:math';
import 'package:flutter/material.dart';
class DIYSliderTheme extends StatefulWidget {
  @override
  _DIYSliderThemeState createState() => _DIYSliderThemeState();
}

class _DIYSliderThemeState extends State<DIYSliderTheme> {
  var _bliss = 0.5;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return SliderTheme(
      data: theme.sliderTheme.copyWith(
        activeTrackColor: Colors.deepPurple,
        inactiveTrackColor: Colors.blue.withAlpha(55),
        activeTickMarkColor: theme.colorScheme.onSurface.withOpacity(0.7),
        inactiveTickMarkColor: theme.colorScheme.surface.withOpacity(0.7),
        overlayColor: theme.colorScheme.onSurface.withOpacity(0.12),
        thumbColor: Colors.deepPurple,
        valueIndicatorColor: Colors.deepPurpleAccent,
        thumbShape: _CustomThumbShape(),
        valueIndicatorShape: _CustomValueIndicatorShape(),
        valueIndicatorTextStyle: theme.accentTextTheme.body2
            .copyWith(color: theme.colorScheme.onSurface),
      ),
      child: Slider(
        min: 0.0,
        max: 200.0,
        divisions: 10,
        label: "${_bliss.toStringAsFixed(1)}",
        onChanged: (double value) {
          setState(() {
            _bliss = value;
          });
        },
        value: _bliss,
      ),
    );
  }
}

class _CustomThumbShape extends SliderComponentShape {
  static const double _thumbSize = 4.0;
  static const double _disabledThumbSize = 3.0;

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return isEnabled
        ? const Size.fromRadius(_thumbSize)
        : const Size.fromRadius(_disabledThumbSize);
  }

  static final Animatable<double> sizeTween = Tween<double>(
    begin: _disabledThumbSize,
    end: _thumbSize,
  );

  @override
  void paint(PaintingContext context, Offset center,
      {Animation<double> activationAnimation,
      Animation<double> enableAnimation,
      bool isDiscrete,
      TextPainter labelPainter,
      RenderBox parentBox,
      SliderThemeData sliderTheme,
      TextDirection textDirection,
      double value,
      double textScaleFactor,
      Size sizeWithOverflow}) {
    final Canvas canvas = context.canvas;
    final ColorTween colorTween = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.thumbColor,
    );
    final double size = _thumbSize * sizeTween.evaluate(enableAnimation);
    final Path thumbPath = _downTriangle(size, center);
    canvas.drawPath(
        thumbPath, Paint()..color = colorTween.evaluate(enableAnimation));
  }
}

Path _upTriangle(double size, Offset thumbCenter) =>
    _downTriangle(size, thumbCenter, invert: true);

Path _downTriangle(double size, Offset thumbCenter, {bool invert = false}) {
  final Path thumbPath = Path();
  final double height = sqrt(3.0) / 2.0;
  final double centerHeight = size * height / 3.0;
  final double halfSize = size / 2.0;
  final double sign = invert ? -1.0 : 1.0;
  thumbPath.moveTo(
      thumbCenter.dx - halfSize, thumbCenter.dy + sign * centerHeight);
  thumbPath.lineTo(thumbCenter.dx, thumbCenter.dy - 2.0 * sign * centerHeight);
  thumbPath.lineTo(
      thumbCenter.dx + halfSize, thumbCenter.dy + sign * centerHeight);
  thumbPath.close();
  return thumbPath;
}

class _CustomValueIndicatorShape extends SliderComponentShape {
  static const double _indicatorSize = 4.0;
  static const double _disabledIndicatorSize = 3.0;
  static const double _slideUpHeight = 30.0;

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(isEnabled ? _indicatorSize : _disabledIndicatorSize);
  }

  static final Animatable<double> sizeTween = Tween<double>(
    begin: _disabledIndicatorSize,
    end: _indicatorSize,
  );

  @override
  void paint(PaintingContext context, Offset center,
      {Animation<double> activationAnimation,
      Animation<double> enableAnimation,
      bool isDiscrete,
      TextPainter labelPainter,
      RenderBox parentBox,
      SliderThemeData sliderTheme,
      TextDirection textDirection,
      double value,
      double textScaleFactor,
      Size sizeWithOverflow}) {
    final Canvas canvas = context.canvas;
    final ColorTween enableColor = ColorTween(
      begin: sliderTheme.disabledThumbColor,
      end: sliderTheme.valueIndicatorColor,
    );
    final Tween<double> slideUpTween = Tween<double>(
      begin: 0.0,
      end: _slideUpHeight,
    );
    final double size = _indicatorSize * sizeTween.evaluate(enableAnimation);
    final Offset slideUpOffset =
        Offset(0.0, -slideUpTween.evaluate(activationAnimation));
    final Path thumbPath = _upTriangle(size, center + slideUpOffset);
    final Color paintColor = enableColor
        .evaluate(enableAnimation)
        .withAlpha((255.0 * activationAnimation.value).round());
    canvas.drawPath(
      thumbPath,
      Paint()..color = paintColor,
    );
    canvas.drawLine(
        center,
        center + slideUpOffset,
        Paint()
          ..color = paintColor
          ..style = PaintingStyle.stroke
          ..strokeWidth = 2.0);
    labelPainter.paint(
        canvas,
        center +
            slideUpOffset +
            Offset(-labelPainter.width / 2.0, -labelPainter.height - 4.0));
  }
}


name: TooltipTheme基本使用
subtitle: 可指定TooltipThemeData数据属性为【后代】的Tooltip组件设置默认样式，如装饰、文字样式、显示时长、边距等。也可以用TooltipTheme.of获取Tooltip的主题属性。
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TooltipThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TooltipTheme(
        child: TempTooltip(),
        data: TooltipTheme.of(context).copyWith(
            preferBelow: false,
            padding: EdgeInsets.all(5),
            verticalOffset: 20,
            margin: EdgeInsets.all(2),
            textStyle:  TextStyle(
                color: Colors.red,
                shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]),
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                  color: Colors.orangeAccent,
                  offset: Offset(1, 1),
                  blurRadius: 8)
            ])));
  }
}

class TempTooltip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Tooltip(
            message: "天王盖地虎",
            child: Icon(Icons.info_outline)),
        Tooltip(
            message: "宝塔镇河妖",
            child: Icon(Icons.info_outline)),
      ],
    );
  }
}


name: Directionality基本使用
subtitle: 【textDirection】 : 文字排列方向 【TextDirection】 【child】 : 子组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class DirectionalityDemo extends StatefulWidget {
  @override
  _DirectionalityDemoState createState() => _DirectionalityDemoState();
}

class _DirectionalityDemoState extends State<DirectionalityDemo> {
  TextDirection _textDirection = TextDirection.rtl;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: _textDirection,
      child: Container(
        padding: EdgeInsets.all(8),
        width: 250,
        color: Colors.grey.withAlpha(33),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
                'A widget that determines the ambient directionality of text and text direction sensitive render objects.'),
            _buildSwitch(),
            Text(
                'The text direction from the closest instance of this class that encloses the given context.'),
          ],
        ),
      ),
    );
  }

  Widget _buildSwitch() {
    return Row(
            children: [
              Switch(
                value: _textDirection == TextDirection.rtl,
                onChanged: (v) {
                  setState(() {
                    _textDirection =
                        v ? TextDirection.rtl : TextDirection.ltr;
                  });
                },
              ),
              Text(
                _textDirection.toString(),
                style: TextStyle(color: Colors.blue, fontSize: 18),
              )
            ],
          );
  }
}


name: ChipTheme基本使用
subtitle:
可指定ChipThemeData数据属性为【后代】的Chip类型组件设置默认样式，属性和Chip属性类似，如阴影、颜色、边距、形状、文字样式等。也可以用ChipTheme.of获取Chip的主题数据。

code:
import 'package:flutter/material.dart';
class ChipThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChipTheme(
      data: ChipTheme.of(context).copyWith(
        selectedColor: Colors.orange.withAlpha(55),
        selectedShadowColor: Colors.blue,
        shadowColor: Colors.orangeAccent,
        pressElevation: 5,
        elevation: 3,
      ),
      child: CustomFilterChip(),
    );
  }
}

class CustomFilterChip extends StatefulWidget {
  @override
  _CustomFilterChipState createState() => _CustomFilterChipState();
}

class _CustomFilterChipState extends State<CustomFilterChip> {
  final Map<String, String> map = {
    'A': 'Ant',
    'B': 'Bug',
    'C': 'Cat',
    'D': 'Dog',
  };
  List<String> _selected = <String>[];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Wrap(
          children: map.keys.map((key) => _buildChild(key)).toList(),
        ),
        Container(
            padding: EdgeInsets.all(10),
            child: Text('您已选择: ${_selected.join(', ')}')),
      ],
    );
  }

  Padding _buildChild(String key) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: FilterChip(
        avatar: CircleAvatar(child: Text(key)),
        label: Text(map[key]),
        selected: _selected.contains(map[key]),
        onSelected: (bool value) {
          setState(() {
            if (value) {
              _selected.add(map[key]);
            } else {
              _selected.removeWhere((name) => name == map[key]);
            }
          });
        },
      ),
    );
  }
}


name: TableCell基本使用
subtitle: 【child】 : 组件 【Widget】 【verticalAlignment】 : 竖直对齐方式 【TableCellVerticalAlignment】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TableCellDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = _ItemBean("单位称", "量纲", "单位", "单位名称", "单位符号");
    var m = _ItemBean("长度", "L", "1m", "米", "m");
    var kg = _ItemBean("质量", "M", "1Kg", "千克", "Kg");
    var s = _ItemBean("时间", "T", "1s", "秒", "s");
    var a = _ItemBean("安培", "Ι", "1A", "安培", "A");
    var k = _ItemBean("热力学温度", "θ", "1K", "开尔文", "K");
    var mol = _ItemBean("物质的量", "N", "1mol", "摩尔", "mol");
    var cd = _ItemBean("发光强度", "J", "1cd", "坎德拉", "cd");

    var data = <_ItemBean>[title, m, kg, s, a, k, mol, cd];

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Table(
        columnWidths: const <int, TableColumnWidth>{
          0: FixedColumnWidth(80.0),
          1: FixedColumnWidth(80.0),
          2: FixedColumnWidth(80.0),
          3: FixedColumnWidth(80.0),
          4: FixedColumnWidth(80.0),
        },
        defaultVerticalAlignment: TableCellVerticalAlignment.middle,
        border: TableBorder.all(
            color: Colors.orangeAccent, width: 1.0, style: BorderStyle.solid),
        children: data
            .map((item) => TableRow(children: <Widget>[
                  TableCell(
                      verticalAlignment: TableCellVerticalAlignment.bottom,
                      child: Text(
                        item.name,
                        style: TextStyle(color: Colors.blue),
                      )),
                  TableCell(
                      verticalAlignment: TableCellVerticalAlignment.baseline,
                      child: Text(item.symbol)),
                  TableCell(
                      verticalAlignment: TableCellVerticalAlignment.top,
                      child: Text(item.unitSymbol)),
                  TableCell(
                      verticalAlignment: TableCellVerticalAlignment.fill,
                      child: Text(item.unitName)),
                  TableCell(
                    verticalAlignment: TableCellVerticalAlignment.middle,
                    child: Container(height: 30, child: Text(item.unit)),
                  ),
                ]))
            .toList(),
      ),
    );
  }
}

class _ItemBean {
  String name;
  String symbol;
  String unit;
  String unitName;
  String unitSymbol;

  _ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);
}


name: MaterialBannerTheme基本使用
subtitle:
可指定MaterialBannerThemeData数据属性为【后代】的MaterialBanner组件设置默认样式，如背景色、边距、文字样式等。也可以用MaterialBannerTheme.of获取MaterialBanner的主题数据。

code:
import 'package:flutter/material.dart';
class MaterialBannerThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialBannerTheme(
      data: MaterialBannerTheme.of(context).copyWith(
        backgroundColor: Colors.purple,
        padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2),
        leadingPadding:EdgeInsetsDirectional.only(end: 16.0) ,
        contentTextStyle:  TextStyle(color: Colors.white),
      ),
      child: _MaterialBannerDemo(),
    );
  }
}


class _MaterialBannerDemo extends StatelessWidget {
  final info =
      'A banner displays an important, succinct message, and provides actions for users to address. '
      'A user action is required for itto be dismissed.';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[MaterialBanner(
        content: Text(info),
        leading: Icon(Icons.warning, color: Colors.yellow),
        actions: <Widget>[
          RaisedButton(
            color: Colors.white,
            onPressed: () {},
            child: Text(
              'I KNOW',
              style: TextStyle(
                  color: Colors.purple,
                  fontWeight: FontWeight.bold,
                  fontSize: 14),
            ),
          ),

          RaisedButton(
            color: Colors.white,
            onPressed: () {},
            child: Text(
              'I IGNORE',
              style: TextStyle(
                  color: Colors.purple,
                  fontWeight: FontWeight.bold,
                  fontSize: 14),
            ),
          ),
        ],
      )],
    );
  }
}


name: LayoutId使用场景
subtitle: 【id】 : 标识id 【Object】 【child】 : 子组件 【Widget】
code:
import 'dart:io';
import 'package:flutter/material.dart';
class LayoutIdDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 150,
      color: Colors.grey.withAlpha(33),
      child: CustomMultiChildLayout(
        delegate: CornerCustomMultiChildLayout(
          padding:EdgeInsets.only(left: 10,top: 5,right: 10,bottom: 5),
        ),
        children: [
           LayoutId(id: CornerType.topLeft, child: Box50(Colors.red)),
           LayoutId(id: CornerType.topRight, child: Box50(Colors.yellow)),
           LayoutId(id: CornerType.bottomLeft, child: Box50(Colors.blue)),
           LayoutId(id: CornerType.bottomRight, child: Box50(Colors.green)),
        ],
      ),
    );
  }
}

// 50 颜射盒
class Box50 extends StatelessWidget {
  final Color color;
  Box50(this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: color,
    );
  }
}


enum CornerType{
  topLeft,
  topRight,
  bottomLeft,
  bottomRight
}


class CornerCustomMultiChildLayout extends MultiChildLayoutDelegate{
  final EdgeInsets padding;
  
  CornerCustomMultiChildLayout({this.padding = EdgeInsets.zero});

  @override
  void performLayout(Size size) {
    if (hasChild(CornerType.topLeft)) {
      layoutChild(CornerType.topLeft, BoxConstraints.loose(size));
      positionChild(CornerType.topLeft, Offset.zero.translate(padding.left, padding.top));
    }
    if (hasChild(CornerType.topRight)) {
      var childSize = layoutChild(CornerType.topRight, BoxConstraints.loose(size));
      positionChild(CornerType.topRight, Offset(size.width-childSize.width,0).translate(-padding.right, padding.top));
    }
    if (hasChild(CornerType.bottomLeft)) {
      var childSize = layoutChild(CornerType.bottomLeft, BoxConstraints.loose(size));
      positionChild(CornerType.bottomLeft, Offset(0,size.height-childSize.height).translate(padding.left, -padding.bottom));
    }
    if (hasChild(CornerType.bottomRight)) {
      var childSize = layoutChild(CornerType.bottomRight, BoxConstraints.loose(size));
      positionChild(CornerType.bottomRight, Offset(size.width-childSize.width,size.height-childSize.height).translate(-padding.right, -padding.bottom));
    }
  }

  @override
  bool shouldRelayout(CornerCustomMultiChildLayout oldDelegate) => oldDelegate.padding!=padding;
  
}


name: Flexible基本使用
subtitle: 【child】 : 孩子 【Widget】 【fit】 : 适应模式*2 【FlexFit】 【flex】 : 剩余空间分配占比 【int】
code:
import 'package:flutter/material.dart';
class CustomFlexible extends StatefulWidget {
  @override
  _CustomFlexibleState createState() => _CustomFlexibleState();
}

class _CustomFlexibleState extends State<CustomFlexible> {
  double _width = 300.0;
  bool _loose = false;

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Container(
          color: Colors.grey.withAlpha(33),
          width: _width,
          padding: EdgeInsets.all(8.0),
          child: Row(
            children: <Widget>[
              Flexible(
                flex: 2,
                child: Container(
                  alignment: Alignment.center,
                  height: 50,
                  color: Colors.red,
                  child: Text(
                    'flex=2',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              Flexible(
                flex: 3,
                child: Container(
                  alignment: Alignment.center,
                  height: 50,
                  color: Colors.blue,
                  child: Text(
                    'flex=3',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              Flexible(
                flex: 4,
                fit: _loose?FlexFit.loose:FlexFit.tight,
                child: Container(
                  constraints: BoxConstraints(maxWidth: 60),
                  alignment: Alignment.center,
                  height: 50,
                  color: Colors.green,
                  child: Text(
                    'flex=4 \nfit:${_loose?'loose':'tight'}',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              )
            ],
          )),
      _buildOp()
    ]);
  }

  Widget _buildOp() {
    return Row(
      children: <Widget>[
        Switch(
            value: _loose,
            onChanged: (v) => setState(() => _loose = v)),
        Expanded(
          child: Slider(
            divisions: 10,
              min: 100,
              max: 350,
              value: _width,
              onChanged: (v) => setState(() => _width = v)),
        ),
      ],
    );
  }
}


name: Positioned基本使用
subtitle:
      
【child】 : 组件   【Widget】
【top】 : 到父顶距离   【double】
【right】 : 到父右距离   【double】
【left】 : 到父左距离   【double】
【bottom】 : 到父底距离   【double】

code:
import 'package:flutter/material.dart';
class CustomPositioned extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
        width: 200,
        height: 120,
        color: Colors.grey.withAlpha(33),
        child: Stack(
          children: <Widget>[
            yellowBox,
            redBox,
            Positioned(top: 20, left: 20, child: greenBox),
            Positioned(
              child: cyanBox,
              bottom: 10,
              right: 10,
            )
          ],
        ));
  }
}


name: ScrollConfiguration基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【behavior】 : 滑动行为  【ScrollBehavior】
    可以使用ScrollConfiguration让ListView无蓝色阴影

code:
import 'package:flutter/material.dart';
class CustomScrollConfiguration extends StatelessWidget {
  final data = <Color>[
    Colors.cyan[50],
    Colors.cyan[100],
    Colors.cyan[200],
    Colors.cyan[300],
    Colors.cyan[400],
    Colors.cyan[500],
    Colors.cyan[600],
    Colors.cyan[700],
    Colors.cyan[800],
    Colors.cyan[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ScrollConfiguration(
          behavior: NoScrollBehavior(), child: _buildListView()),
    );
  }

  Widget _buildListView() => ListView(
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: data
            .map((color) => Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 50,
                  color: color,
                  child: Text(
                    colorString(color),
                    style: TextStyle(color: Colors.white, shadows: [
                      Shadow(
                          color: Colors.black,
                          offset: Offset(.5, .5),
                          blurRadius: 2)
                    ]),
                  ),
                ))
            .toList(),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

class NoScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(
          BuildContext context, Widget child, AxisDirection axisDirection) =>
      child;
}


name: ToggleButtonsTheme基本使用
subtitle:
可指定ToggleButtonsThemeData数据属性为【后代】的ToggleButtons组件设置默认样式，如边框样式、颜色、装饰等。也可以用ToggleButtonsTheme.of获取ToggleButtons的主题数据。

code:
import 'package:flutter/material.dart';
class ToggleButtonsThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ToggleButtonsTheme(
      data: ToggleButtonsTheme.of(context).copyWith(
        borderWidth: 1,
        borderColor: Colors.orangeAccent,
        selectedBorderColor: Colors.blue,
        splashColor: Colors.purple.withAlpha(66),
        borderRadius: BorderRadius.circular(10),
        selectedColor: Colors.red,
        fillColor: Colors.green.withAlpha(11),
      ),
      child: _ToggleButtonsSimple(),
    );
  }
}


class _ToggleButtonsSimple extends StatefulWidget {
  @override
  _ToggleButtonsSimpleState createState() => _ToggleButtonsSimpleState();
}

class _ToggleButtonsSimpleState extends State<_ToggleButtonsSimple> {
  var _isSelected = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      children: <Widget>[
        Icon(Icons.skip_previous),
        Icon(Icons.pause),
        Icon(Icons.skip_next),
      ],
      isSelected: _isSelected,
      onPressed: (value) => setState(() {
        _isSelected = _isSelected.map((e) => false).toList();
        _isSelected[value] = true;
      }),
    );
  }
}


name: MediaQuery获取数据信息
subtitle: MediaQuery.of(context)可以获取MediaQueryData
code:
import 'package:flutter/material.dart';
class CustomMediaQuery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var queryData = MediaQuery.of(context);
    var data = {
      "size": queryData.size,
      "devicePixelRatio": queryData.devicePixelRatio.toStringAsFixed(1),
      "textScaleFactor": queryData.textScaleFactor.toStringAsFixed(1),
      "platformBrightness": queryData.platformBrightness,
      "padding": queryData.padding,
      "viewInsets": queryData.viewInsets,
      "systemGestureInsets": queryData.padding,
      "viewPadding": queryData.padding,
      "physicalDepth": queryData.padding,
      "alwaysUse24HourFormat": queryData.padding,
      "accessibleNavigation": queryData.alwaysUse24HourFormat,
      "invertColors": queryData.invertColors,
      "highContrast": queryData.highContrast,
      "disableAnimations": queryData.disableAnimations,
      "boldText": queryData.boldText,
    };

    return Container(
      height: 200,
      color: Colors.grey.withAlpha(11),
      child:ListView(
          children: data.keys.map((e) => buildItem(e, data)).toList(),
      ),
    );
  }

  Widget buildItem(String e, Map<String, Object> data) => Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  e,
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
                Text(
                  data[e].toString(),
                  style: TextStyle(fontSize: 16, color: Colors.orange),
                )
              ],
            ),
          ),
          Divider(
            height: 1,
          )
        ],
      );
}


name: IconTheme使用
subtitle: 可以通过IconTheme.of获取图标主题数据，也可以为IconTheme【后代】的图标组件设置默认样式，包括颜色、透明度、尺寸。
code:
import 'package:flutter/material.dart';
class IconThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconTheme(
      data: IconThemeData(
          color: Colors.purple,
          opacity: 1.0,
          size: 30
      ),
      child: Wrap(
        spacing: 10,
        children: <Widget>[
          Icon(Icons.add),
          Icon(Icons.ac_unit),
          Icon(Icons.g_translate),
          Icon(Icons.remove)
        ],
      ),
    );
  }
}


name: DefaultTextStyle使用
subtitle: 各属性同Text，详见之。 其功能是: 设置默认的文字样式应用于【后代组件】,注意后代组件也可以指定自身的样式
code:
import 'package:flutter/material.dart';
class DefaultTextStyleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      style: TextStyle(
          fontSize: 18,
          color: Colors.blue,
          decoration: TextDecoration.underline),
      child: Wrap(
        spacing: 5,
        children: <Widget>[
          Text("Hello,",),
          FlutterLogo(),
          Text("Flutter",style: TextStyle(color: Colors.red),),
          Text("Unit."),
        ],
      ),
    );
  }
}


name: PopupMenuTheme基本使用
subtitle:
可指定PopupMenuThemeData数据属性为【后代】的PopupMenuButton组件设置默认样式，如形状、影深、颜色、文字样式等。也可以用PopupMenuTheme.of获取PopupMenu的主题数据。

code:
import 'package:flutter/material.dart';
class PopupMenuThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuTheme(
      data: PopupMenuTheme.of(context).copyWith(
        color: Colors.orangeAccent,
        elevation: 1,
        textStyle:  TextStyle(color: Colors.white),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(5),
              bottomLeft: Radius.circular(5),
            )),
      ),
      child: _PopupMenuButtonSimple(),
    );
  }
}

class _PopupMenuButtonSimple extends StatefulWidget {
  @override
  _PopupMenuButtonSimpleState createState() => _PopupMenuButtonSimpleState();
}

class _PopupMenuButtonSimpleState extends State<_PopupMenuButtonSimple> {
  final map = {
    "关于": Icons.info_outline,
    "帮助": Icons.help_outline,
    "反馈": Icons.add_comment,
  };

  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      itemBuilder: (context) => buildItems(),
      offset: Offset(0, 50),
      onSelected: print,
      onCanceled: () => print('onCanceled'),
    );
  }

  List<PopupMenuItem<String>> buildItems() {
    return map.keys
        .toList()
        .map((e) => PopupMenuItem<String>(
        value: e,
        child: Wrap(
          spacing: 6,
          children: <Widget>[
            Icon(
              map[e],
            ),
            Text(e),
          ],
        )))
        .toList();
  }
}


name: ButtonTheme使用
subtitle: 属性参数同MaterialButton，可以通过ButtonTheme.of获取按钮主题数据，" 也可以为ButtonTheme【后代】的按钮组件设置默认样式，包括颜色、形状、尺寸等。
code:
import 'package:flutter/material.dart';
class ButtonThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
      buttonColor: Colors.orange,
      splashColor: Colors.blue,
      minWidth: 40,
      shape: CircleBorder(
        side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
      ),
      child: Wrap(
        spacing: 10,
        children: <Widget>[
          RaisedButton(onPressed: (){},child: Icon(Icons.add)),
          FlatButton(onPressed: (){},child: Icon(Icons.add)),
          OutlineButton(onPressed: (){},child: Icon(Icons.add)),
          MaterialButton(onPressed: (){},child: Icon(Icons.add)),
        ],
      ),
    );
  }
}


name: IndexedStack基本使用
subtitle:
      
【children】 : 子组件列表   【Lis<Widget>】
【alignment】 : 对齐方式   【AlignmentGeometry】
【index】 : 当前显示组件  【int】

code:
import 'package:flutter/material.dart';
class CustomIndexedStack extends StatefulWidget {
  @override
  _CustomIndexedStackState createState() => _CustomIndexedStackState();
}

class _CustomIndexedStackState extends State<CustomIndexedStack> {
  var _index = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          width: 200,
          height: 100,
          color: Colors.grey.withAlpha(33),
          child: IndexedStack(
            index: _index,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: 80,
                height: 80,
              ),
              Positioned(
                bottom: 10,
                right: 10,
                child: Container(
                  color: Colors.blue,
                  width: 80,
                  height: 80,
                ),
              )
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildSwitch() => Switch(
        value: _index == 0,
        onChanged: (v) => setState(() => _index = v ? 0 : 1),
      );
}


name: Viewport的基本使用
subtitle:
【offset】 : *视口偏移量   【ViewportOffset】
【cacheExtentStyle】: 预加载类型   【CacheExtentStyle】
【cacheExtent】: 预加载量   【double】
【axisDirection】: 滑动方向   【AxisDirection】
【slivers】: 子Sliver组件集   【List<Widget>】
【anchor】: 锚点    【double】
可以运行这些代码，查看ColorItem的构建情况，128个色条并非一次性全部构建。

code:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class ViewportDemo extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      child: Scrollable(
        axisDirection: AxisDirection.down,
        physics: BouncingScrollPhysics(),
        dragStartBehavior: DragStartBehavior.start,
        viewportBuilder: (ctx, position) => Viewport(
          axisDirection: AxisDirection.down,
          cacheExtent: 200,
          anchor: 0,
          cacheExtentStyle: CacheExtentStyle.pixel,
          offset: position,
          slivers: <Widget>[_buildSliverList()],
        ),
      ),
    );
  }

  Widget _buildSliverList() => SliverList(
        delegate: SliverChildBuilderDelegate(
            (_, int index) =>ColorItem(color: data[index],),
            childCount: data.length),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

class ColorItem extends StatefulWidget {
  final Color color;

  ColorItem({Key key,this.color}) : super(key: key);
  @override
  _ColorItemState createState() => _ColorItemState();
}

class _ColorItemState extends State<ColorItem> {

  @override
  void initState() {
    super.initState();
    print('-----initState----${colorString(widget.color)}-----------');
  }

  @override
  Widget build(BuildContext context) {
    return  Container(
      margin: EdgeInsets.only(top: 1),
      alignment: Alignment.center,
      width: 100,
      height: 60,
      color: widget.color,
      child: Text(
        colorString(widget.color),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(
              color: Colors.black,
              offset: Offset(.5, .5),
              blurRadius: 2)
        ]),
      ),
    );
  }
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: CustomMultiChildLayout基本使用
subtitle: 【children】 : 子组件集 【List<Widget>】 【delegate】 : 布局代理 【MultiChildLayoutDelegate】
code:
import 'dart:io';
import 'package:flutter/material.dart';
class CustomMultiChildLayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 150,
      color: Colors.grey.withAlpha(33),
      child: CustomMultiChildLayout(
        delegate: CornerCustomMultiChildLayout(
          padding:EdgeInsets.only(left: 10,top: 5,right: 10,bottom: 5),
        ),
        children: [
           LayoutId(id: CornerType.topLeft, child: Box50(Colors.red)),
           LayoutId(id: CornerType.topRight, child: Box50(Colors.yellow)),
           LayoutId(id: CornerType.bottomLeft, child: Box50(Colors.blue)),
           LayoutId(id: CornerType.bottomRight, child: Box50(Colors.green)),
        ],
      ),
    );
  }
}

// 50 颜射盒
class Box50 extends StatelessWidget {
  final Color color;
  Box50(this.color);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      color: color,
    );
  }
}


enum CornerType{
  topLeft,
  topRight,
  bottomLeft,
  bottomRight
}


class CornerCustomMultiChildLayout extends MultiChildLayoutDelegate{
  final EdgeInsets padding;
  
  CornerCustomMultiChildLayout({this.padding = EdgeInsets.zero});

  @override
  void performLayout(Size size) {
    if (hasChild(CornerType.topLeft)) {
      layoutChild(CornerType.topLeft, BoxConstraints.loose(size));
      positionChild(CornerType.topLeft, Offset.zero.translate(padding.left, padding.top));
    }
    if (hasChild(CornerType.topRight)) {
      var childSize = layoutChild(CornerType.topRight, BoxConstraints.loose(size));
      positionChild(CornerType.topRight, Offset(size.width-childSize.width,0).translate(-padding.right, padding.top));
    }
    if (hasChild(CornerType.bottomLeft)) {
      var childSize = layoutChild(CornerType.bottomLeft, BoxConstraints.loose(size));
      positionChild(CornerType.bottomLeft, Offset(0,size.height-childSize.height).translate(padding.left, -padding.bottom));
    }
    if (hasChild(CornerType.bottomRight)) {
      var childSize = layoutChild(CornerType.bottomRight, BoxConstraints.loose(size));
      positionChild(CornerType.bottomRight, Offset(size.width-childSize.width,size.height-childSize.height).translate(-padding.right, -padding.bottom));
    }
  }

  @override
  bool shouldRelayout(CornerCustomMultiChildLayout oldDelegate) => oldDelegate.padding!=padding;
  
}


name: Column基本使用
subtitle:
      
【children】 : 组件列表   【List<Widget>】
【mainAxisAlignment】 : 主轴对齐   【MainAxisAlignment】
【crossAxisAlignment】 : 交叉轴对齐   【CrossAxisAlignment】
【textBaseline】 : 文字基线   【TextBaseline】
【verticalDirection】 : 竖直方向   【VerticalDirection】
【mainAxisSize】 : 主轴尺寸   【MainAxisSize】

code:
import 'package:flutter/material.dart';
class CustomColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildTitle(),
        _buildContent(context),
      ],
    );
  }

  Widget _buildTitle() {
    return Container(
        height: 70,
        color: Color(0x4484FFFF),
        child: Row(
          children: <Widget>[
            Padding(
              child: Icon(
                Icons.add_location,
                size: 30,
                color: Colors.pink,
              ),
              padding: EdgeInsets.only(left: 25, right: 20),
            ),
            Expanded(
              child: Text(
                "附近",
                style: TextStyle(fontSize: 18),
              ),
            ),
            Padding(
              child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
              padding: EdgeInsets.only(right: 25),
            ),
          ],
        ));
  }

  Widget _buildContent(ctx) => Container(
        width: MediaQuery.of(ctx).size.width,
        color: Colors.orangeAccent,
        height: 100,
        child: Icon(
          Icons.android,
          size: 50,
          color: Colors.white,
        ),
      );
}


name: ListView的基本使用
subtitle: 【mainAxis】 : 主轴方向 【Axis】 【reverse】: 是否反向 【bool】 【children】: 子组件集 【List<Widget>】
code:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class ListBodyDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: ListView(
          children: <Widget>[
            ListBody(
              mainAxis: Axis.vertical,
              reverse: false,
              children: <Widget>[
                Container(color: Colors.red,  height: 50.0,),
                Container(color: Colors.orange, height: 50.0,),
                Container(color: Colors.yellow,  height: 50.0,),
              ],
            ),
            Container(color: Colors.green,  height: 80.0,),
            ListBody(
              mainAxis: Axis.vertical,
              reverse: false,
              children: <Widget>[
                Container(color: Colors.blue, height: 50.0,),
                Container(color: Colors.indigo,  height: 50.0,),
                Container(color: Colors.purple, height: 50.0,),
              ],
            )
          ]
      ),
    );
  }
}


name: Row基本使用
subtitle:
      
【children】 : 组件列表   【List<Widget>】
【mainAxisAlignment】 : 主轴对齐   【MainAxisAlignment】
【crossAxisAlignment】 : 交叉轴对齐   【CrossAxisAlignment】
【textBaseline】 : 文字基线   【TextBaseline】
【verticalDirection】 : 竖直方向   【VerticalDirection】
【mainAxisSize】 : 主轴尺寸   【MainAxisSize】

code:
import 'package:flutter/material.dart';
class CustomRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 70,
        color: Color(0x4484FFFF),
        child: Row(
          children: <Widget>[
            Padding(
              child: Icon(
                Icons.add_location,
                size: 30,
                color: Colors.pink,
              ),
              padding: EdgeInsets.only(left: 25, right: 20),
            ),
            Expanded(
              child: Text(
                "附近",
                style: TextStyle(fontSize: 18),
              ),
            ),
            Padding(
              child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),
              padding: EdgeInsets.only(right: 25),
            ),
          ],
        ));
  }
}


name: Wrap的基础用法
subtitle:
      
【children】 : 组件列表   【List<Widget>】
【spacing】 : 主轴条目间距   【double】
【runSpacing】 : 交叉轴条目间距   【double】
【direction】 : 主轴对齐   【Axis】

code:
import 'package:flutter/material.dart';
class DirectionWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: Axis.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 100,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }
  final yellowBox = Container(
    color: Colors.yellow,
    height: 30,
    width: 50,
  );

  final redBox = Container(
    color: Colors.red,
    height: 40,
    width: 40,
  );
  final greenBox = Container(
    color: Colors.green,
    height: 40,
    width: 20,
  );
  final blackBox = Container(
    color: Colors.black,
    height: 10,
    width: 10,
  );
  final purpleBox = Container(
    color: Colors.purple,
    height: 20,
    width: 20,
  );
  final orangeBox = Container(
    color: Colors.orange,
    height: 80,
    width: 20,
  );
  final cyanBox = Container(
    color: Colors.cyanAccent,
    height: 10,
    width: 20,
  );

  _buildItem(mode) => Wrap(
    direction: mode,
    runSpacing: 10,
    spacing: 10,
    children: <Widget>[
      yellowBox, redBox, greenBox, cyanBox,
      blackBox, purpleBox, orangeBox,
    ],
  );
}


name: Wrap的textDirection属性
subtitle: 【textDirection】 : 文字方向 【TextDirection】
code:
import 'package:flutter/material.dart';
class TextDirectionWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: TextDirection.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 100,
              color: Colors.grey.withAlpha(88),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  final yellowBox = Container(
    color: Colors.yellow,
    height: 30,
    width: 50,
  );

  final redBox = Container(
    color: Colors.red,
    height: 40,
    width: 40,
  );
  final greenBox = Container(
    color: Colors.green,
    height: 40,
    width: 20,
  );
  final blackBox = Container(
    color: Colors.black,
    height: 10,
    width: 10,
  );
  final purpleBox = Container(
    color: Colors.purple,
    height: 20,
    width: 20,
  );
  final orangeBox = Container(
    color: Colors.orange,
    height: 80,
    width: 20,
  );
  final cyanBox = Container(
    color: Colors.cyanAccent,
    height: 10,
    width: 20,
  );

  _buildItem(mode) => Wrap(
    textDirection: mode,
    runSpacing: 10,
    spacing: 10,
    children: <Widget>[
      yellowBox, redBox, greenBox, cyanBox,
      blackBox, purpleBox, orangeBox,
    ],
  );
}


name: Wrap的verticalDirection属性
subtitle: 【verticalDirection】 : 竖直方向 【VerticalDirection】
code:
import 'package:flutter/material.dart';
class VerticalDirectionWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: VerticalDirection.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 100,
              color: Colors.grey.withAlpha(88),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  final yellowBox = Container(
    color: Colors.yellow,
    height: 30,
    width: 50,
  );

  final redBox = Container(
    color: Colors.red,
    height: 40,
    width: 40,
  );
  final greenBox = Container(
    color: Colors.green,
    height: 40,
    width: 20,
  );
  final blackBox = Container(
    color: Colors.black,
    height: 10,
    width: 10,
  );
  final purpleBox = Container(
    color: Colors.purple,
    height: 20,
    width: 20,
  );
  final orangeBox = Container(
    color: Colors.orange,
    height: 80,
    width: 20,
  );
  final cyanBox = Container(
    color: Colors.cyanAccent,
    height: 10,
    width: 20,
  );

  _buildItem(mode) => Wrap(
    verticalDirection: mode,
    direction: Axis.vertical,
    runSpacing: 10,
    spacing: 10,
    children: <Widget>[
      yellowBox, redBox, greenBox, cyanBox,
      blackBox, purpleBox, orangeBox,
    ],
  );
}


name: Wrap的alignment属性
subtitle: 【alignment】 : 主轴对齐 【WrapAlignment】
code:
import 'package:flutter/material.dart';
class WrapAlignmentWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: WrapAlignment.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 100,
              color: Colors.grey.withAlpha(88),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  final yellowBox = Container(
    color: Colors.yellow,
    height: 30,
    width: 50,
  );

  final redBox = Container(
    color: Colors.red,
    height: 40,
    width: 40,
  );
  final greenBox = Container(
    color: Colors.green,
    height: 40,
    width: 20,
  );
  final blackBox = Container(
    color: Colors.black,
    height: 10,
    width: 10,
  );
  final purpleBox = Container(
    color: Colors.purple,
    height: 20,
    width: 20,
  );
  final orangeBox = Container(
    color: Colors.orange,
    height: 80,
    width: 20,
  );
  final cyanBox = Container(
    color: Colors.cyanAccent,
    height: 10,
    width: 20,
  );

  _buildItem(mode) => Wrap(
    alignment: mode,
    runSpacing: 10,
    spacing: 10,
    children: <Widget>[
      yellowBox, redBox,
      greenBox, cyanBox,
      blackBox, purpleBox,
      orangeBox,
    ],
  );
}


name: Wrap的crossAxisAlignment属性
subtitle: 【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】
code:
import 'package:flutter/material.dart';
class CrossAxisAlignmentWrap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: WrapCrossAlignment.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 100,
              color: Colors.grey.withAlpha(88),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  final yellowBox = Container(
    color: Colors.yellow,
    height: 30,
    width: 50,
  );

  final redBox = Container(
    color: Colors.red,
    height: 40,
    width: 40,
  );
  final greenBox = Container(
    color: Colors.green,
    height: 40,
    width: 20,
  );
  final blackBox = Container(
    color: Colors.black,
    height: 10,
    width: 10,
  );
  final purpleBox = Container(
    color: Colors.purple,
    height: 20,
    width: 20,
  );
  final orangeBox = Container(
    color: Colors.orange,
    height: 80,
    width: 20,
  );
  final cyanBox = Container(
    color: Colors.cyanAccent,
    height: 10,
    width: 20,
  );

  _buildItem(mode) => Wrap(
    crossAxisAlignment: mode,
    runSpacing: 10,
    spacing: 10,
    children: <Widget>[
      yellowBox, redBox,
      greenBox, cyanBox,
      blackBox, purpleBox,
      orangeBox,
    ],
  );
}


name: RichText基本使用
subtitle: 【text】 : 文字 【TextSpan】 其他属性与Text相同,详见之。
code:
import 'package:flutter/material.dart';
import '../../../../app/utils/color_utils.dart';
class CustomRichText extends StatelessWidget {
  final str = "        发光强度简称光强，国际单位是（坎德拉）简写cd。"
      "1cd是指光源在指定方向的单位立体角内发出的光通量。"
      "光源辐射是均匀时，则光强为I=F/Ω，Ω为立体角，单位为球面度（sr）,F为光通量，"
      "单位是流明，对于点光源由I=F/4π 。光亮度是表示发光面明亮程度的，"
      "指发光表面在指定方向的发光强度与垂直且指定方向的发光面的面积之比，"
      "单位是坎德拉/平方米。对于一个漫散射面，尽管各个方向的光强和光通量不同，"
      "但各个方向的亮度都是相等的。电视机的荧光屏就是近似于这样的漫散射面，"
      "所以从各个方向上观看图像，都有相同的亮度感。";

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        left: 10.0,
        right: 10,
      ),
      child: RichText(
          text: TextSpan(
              children: str
                  .split("")
                  .map((str) => TextSpan(
                      text: str,
                      style: TextStyle(
                          fontSize: 14, color: ColorUtils.randomColor())))
                  .toList())),
    );
  }
}


name: RichText包含其他组件
subtitle: 使用WidgetSpan来承载普通组件，作为RichText的内容
code:
import 'package:flutter/material.dart';
class RichTextWithWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      text: TextSpan(
        text: 'hello ',
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: <InlineSpan>[
          WidgetSpan(
              child: Image.asset(
                'assets/images/icon_head.webp',
                width: 30,
              ),
              alignment: PlaceholderAlignment.baseline,
              baseline: TextBaseline.ideographic),
          TextSpan(
            text: ' , welcome to ',
            style: TextStyle(color: Colors.blue, fontSize: 18),
          ),
          WidgetSpan(
              child: FlutterLogo(),
              alignment: PlaceholderAlignment.baseline,
              baseline: TextBaseline.ideographic),
          TextSpan(
            text: ' .\n',
          ),
          TextSpan(
            text: 'focus me on ',
            style: TextStyle(color: Colors.orange, fontSize: 16),
          ),
          TextSpan(
            text: 'https://github.com/toly1994328',
            style: TextStyle(
                color: Colors.blue,
                fontSize: 18,
                decoration: TextDecoration.underline),
          ),
          TextSpan(
            text: ' .\n',
          ),
        ],
      ),
    );
  }
}


name: Stack基本使用
subtitle:
      
【children】 : 组件列表   【List<Widget>】
【textDirection】 : 孩子排布方向   【MainAxisAlignment】
【alignment】 : 对齐方式   【AlignmentGeometry】
【overflow】 : 溢出模式   【Overflow】
【fit】 : 适应模式   【StackFit】

code:
import 'package:flutter/material.dart';
class CustomStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
      width: 200,
      height: 120,
      color: Colors.grey.withAlpha(33),
      child: Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.topRight,
        // overflow: Overflow.clip, // 1.22.0 被去除
        children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
      ),
    );
  }
}


name: Stack和Positioned结合使用
subtitle: Positioned组件只能用与Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。
code:
import 'package:flutter/material.dart';
class PositionedStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    var cyanBox = Container(
      color: Colors.cyanAccent,
      height: 70,
      width: 70,
    );

    return Container(
        width: 200,
        height: 120,
        color: Colors.grey.withAlpha(33),
        child: Stack(
          children: <Widget>[yellowBox, redBox, greenBox,
            Positioned(
              child: cyanBox,
              bottom: 10,
              right: 10,
            )
          ],
        ));
  }
}


name: Flex垂直方向顺序
subtitle: 【verticalDirection】 : 垂直方向顺序 【VerticalDirection】
code:
import 'package:flutter/material.dart';
class VerticalDirectionFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: VerticalDirection.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.vertical,
    verticalDirection: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}


name: Flex主轴对齐方式
subtitle: 【mainAxisAlignment】 : 主轴对齐 【MainAxisAlignment】
code:
import 'package:flutter/material.dart';
class MainAxisAlignmentFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: MainAxisAlignment.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.horizontal,
    mainAxisAlignment: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}


name: Flex水平方向顺序
subtitle: 【textDirection】 : 水平方向顺序 【TextDirection】
code:
import 'package:flutter/material.dart';
class TextDirectionFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: TextDirection.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.horizontal,
    textDirection: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}


name: Flex的排布方向
subtitle: 【children】 : 组件列表 【List<Widget>】 【direction】 : 方向 【Axis】
code:
import 'package:flutter/material.dart';
class DirectionFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        children: Axis.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: mode,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}


name: Flex交叉轴对齐方式
subtitle: 【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】
code:
import 'package:flutter/material.dart';
class CrossAxisAlignmentFlex extends StatelessWidget {

  final  redBox= Container(
    color: Colors.red,
    height: 30,
    width: 40,
  );

  final blueBox= Container(
    color: Colors.blue,
    height: 20,
    width: 30,
  );

  final greenBox= Container(
    color: Colors.green,
    height: 20,
    width: 20,
  );

  @override
  Widget build(BuildContext context) {
    return Wrap(
        runSpacing: 5,
        children: CrossAxisAlignment.values
            .map((mode) => Column(children: <Widget>[
          Container(
              margin: EdgeInsets.all(5),
              width: 160,
              height: 80,
              color: Colors.grey.withAlpha(33),
              child: _buildItem(mode)),
          Text(mode.toString().split('.')[1])
        ]))
            .toList());
  }

  _buildItem(mode) => Flex(
    direction: Axis.horizontal,
    crossAxisAlignment: mode,
    textBaseline: TextBaseline.alphabetic,
    children: <Widget>[
      blueBox, redBox, greenBox
    ],
  );
}


name: Flow圆形排布
subtitle: 【children】 : 组件列表 【List<Widget>】 【delegate】 : 代理 【FlowDelegate】
code:
import 'dart:math';
import 'package:flutter/material.dart';
class CircleFlow extends StatelessWidget {
  final data = List.generate(
      16,
      (index) => index.isEven
          ? "assets/images/icon_head.webp"
          : "assets/images/wy_300x200.webp");

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 300,
      alignment: Alignment.center,
      child: Flow(
        delegate: _CircleFlowDelegate(),
        children: data
            .map((e) => CircleAvatar(backgroundImage: AssetImage(e)))
            .toList(),
      ),
    );
  }
}

class _CircleFlowDelegate extends FlowDelegate {
  @override //绘制孩子的方法
  void paintChildren(FlowPaintingContext context) {
    double radius = context.size.shortestSide / 2;
    print(context.getChildSize(0));
    var count = context.childCount;
    var perRad = 2 * pi / count;
    for (int i = 0; i < count; i++) {
      var cSizeX = context.getChildSize(i).width / 2;
      var cSizeY = context.getChildSize(i).height / 2;

      var offsetX = (radius - cSizeX) * cos(i * perRad) + radius;
      var offsetY = (radius - cSizeY) * sin(i * perRad) + radius;
      context.paintChild(i,
          transform: Matrix4.translationValues(
              offsetX - cSizeX, offsetY - cSizeY, 0.0));
    }
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return true;
  }
}


name: Flow圆形与动画结合
subtitle: 通过动画来更改周围组件的位置实现效果
code:
import 'dart:math';
import 'package:flutter/material.dart';
class BurstFlow extends StatefulWidget {
  static final data = List.generate(
      16,
      (index) => index.isEven
          ? "assets/images/icon_head.webp"
          : "assets/images/wy_300x200.webp");
  static final show = Container(
      width: 300,
      height: 300,
      alignment: Alignment.center,
      child: BurstFlow(
          children: data
              .map((e) => CircleAvatar(backgroundImage: AssetImage(e)))
              .toList(),
          menu: CircleAvatar(
            backgroundImage: AssetImage('assets/images/icon_head.webp'),
          )));

  final List<Widget> children;
  final Widget menu;

  BurstFlow({@required this.children, @required this.menu});

  @override
  _BurstFlowState createState() => _BurstFlowState();
}

class _BurstFlowState extends State<BurstFlow>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  double _rad = 0.0;
  bool _closed = true;

  @override
  void initState() {
    _controller = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this)
      ..addListener(() => setState(
          () => _rad = (_closed ? (_controller.value) : 1 - _controller.value)))
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _closed = !_closed;
        }
      });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Flow(
      delegate: _BurstFlowDelegate(_rad),
      children: [
        ...widget.children,
        InkWell(
            onTap: () {
              _controller.reset();
              _controller.forward();
            },
            child: widget.menu)
      ],
    );
  }
}

class _BurstFlowDelegate extends FlowDelegate {
  final double rad;

  _BurstFlowDelegate(this.rad);

  @override //绘制孩子的方法
  void paintChildren(FlowPaintingContext context) {
    double radius = context.size.shortestSide / 2;
    var count = context.childCount - 1;
    var perRad = 2 * pi / count;
    for (int i = 0; i < count; i++) {
      print(i);
      var cSizeX = context.getChildSize(i).width / 2;
      var cSizeY = context.getChildSize(i).height / 2;
      var offsetX = rad * (radius - cSizeX) * cos(i * perRad) + radius;
      var offsetY = rad * (radius - cSizeY) * sin(i * perRad) + radius;
      context.paintChild(i,
          transform: Matrix4.translationValues(
              offsetX - cSizeX, offsetY - cSizeY, 0.0));
    }
    context.paintChild(context.childCount - 1,
        transform: Matrix4.translationValues(
            radius - context.getChildSize(context.childCount - 1).width / 2,
            radius - context.getChildSize(context.childCount - 1).height / 2,
            0.0));
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) {
    return true;
  }
}


name: ListWheelScrollView基本使用
subtitle:
      
【children】 : 子组件列表   【List<Widget>】
【perspective】 : 透视度   【double】
【itemExtent】 : item高   【EdgeInsets】
【onSelectedItemChanged】 : 选中回调  【ValueChanged<int> 】

code:
import 'package:flutter/material.dart';
class CustomListWheelScrollView extends StatefulWidget {
  @override
  _CustomListWheelScrollViewState createState() => _CustomListWheelScrollViewState();
}

class _CustomListWheelScrollViewState extends State<CustomListWheelScrollView> {
  var data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildCircle(),
        Container(
          height: 150,
          width: 300,
          child: ListWheelScrollView(
            perspective: 0.006,
            itemExtent: 50,
            onSelectedItemChanged: (index){
              print('onSelectedItemChanged:$index');
              setState(() => _color=data[index]);
            },
            children: data.map((color) => _buildItem(color)).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildCircle() => Container(
        margin: EdgeInsets.only(bottom: 5),
        width: 30,
        height: 30,
        decoration: BoxDecoration(
          color: _color,
          shape: BoxShape.circle
        ),
      );

  Widget _buildItem(Color color) {
    return Container(
      key: ValueKey(color)  ,
      alignment: Alignment.center,
      height: 50,
      color: color,
      child: Text(
        colorString(color),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
        ]),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


name: DragTarget基本使用
subtitle:
      
【builder】 : 组件构造器   【DragTargetBuilder<T>】
【onWillAccept】 : 拖入时   【Function(T)】
【onAccept】 : 拖拽成功   【Function(T)】
【onLeave】 : 拖入再脱出   【Function(T)】

code:
import 'package:flutter/material.dart';
class CustomDragTarget extends StatefulWidget {
  @override
  _CustomDragTargetState createState() => _CustomDragTargetState();
}

class _CustomDragTargetState extends State<CustomDragTarget> {
  Color _color = Colors.grey;
  String _info = 'DragTarget';

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Wrap(
            children: _buildColors(),
            spacing: 10,
          ),
          SizedBox(height: 20,),
          _buildDragTarget()
        ],
      ),
    );
  }

  List<Widget> _buildColors() {
    var colors = [
      Colors.red,
      Colors.yellow,
      Colors.blue,
      Colors.green,
      Colors.orange,
      Colors.purple,
      Colors.cyanAccent
    ];
    return colors
        .map(
          (e) => Draggable<Color>(
          child: Container(
            width: 30,
            height: 30,
            alignment: Alignment.center,
            child: Text(
              colors.indexOf(e).toString(),
              style: TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
            ),
            decoration: BoxDecoration(color: e, shape: BoxShape.circle),
          ),
          data: e,
          feedback: Container(
            width: 25,
            height: 25,
            decoration: BoxDecoration(color: e, shape: BoxShape.circle),
          )),
    )
        .toList();
  }

  Widget _buildDragTarget() {
    return DragTarget<Color>(
        onLeave: (data) => setState(() => _info='onLeave'),
        onAccept: (data) => setState(() {
            _info='onAccept';
            _color = data;
          }),
        onWillAccept: (data) {
          setState(() {
            _info='onWillAccept';
          });
          print("onWillAccept: data = $data ");
          return data != null;
        },
        builder: (context, candidateData, rejectedData) => Container(
            width: 150.0,
            height: 50.0,
            color: _color,
            child: Center(
              child: Text(
                _info,
                style: TextStyle(color: Colors.white),
              ),
            )));
  }
}


name: StreamBuilder基本使用
subtitle:
      
【stream】 : 子组件   【Stream<T>】
【initialData】 : 初始数据   【T】
【builder】 : 点击事件  【AsyncWidgetBuilder<T>】

code:
import 'dart:async';
import 'package:flutter/material.dart';
class CustomStreamBuilder extends StatefulWidget {
  @override
  _CustomStreamBuilderState createState() => _CustomStreamBuilderState();
}

class _CustomStreamBuilderState extends State<CustomStreamBuilder> {
  CountGenerator _generator = CountGenerator()..increment();

  @override
  void dispose() {
    _generator.dispose(); //关闭控制器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          FlatButton(
            color: Colors.blue,
            shape: CircleBorder(
              side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
            ),
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
            onPressed: () async {
              await _generator.increment();
            },
          ),
          _buildStreamBuilder(),
          FlatButton(
            color: Colors.blue,
            shape: CircleBorder(
              side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
            ),
            child: Icon(
              Icons.remove,
              color: Colors.white,
            ),
            onPressed: () async {
              await _generator.minus();
            },
          ),
        ],
      ),
    );
  }

  Widget _buildStreamBuilder() => StreamBuilder<int>(
      stream: _generator.state,
      builder: (BuildContext context, AsyncSnapshot snap) {
        print(snap);
        if (snap.connectionState == ConnectionState.done) {
          return Text('Done');
        }
        if (snap.connectionState == ConnectionState.active) {
          return Text(
            snap.data.toString(),
            style: Theme.of(context).textTheme.display1,
          );
        }
        if (snap.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }
        if (snap.hasError) {
          return Text('Error');
        }
        return Container();
      });
}

class CountGenerator {
  int _count = 0; //计数器数据
  final StreamController<int> _controller = StreamController(); //控制器

  Stream<int> get state => _controller.stream; //获取状态流
  int get count => _count; //获取计数器数据

  void dispose() {//关闭控制器
    _controller.close();
  }

  Future<void> increment() async {//增加记数方法
    _controller.add(++_count);
  }

  Future<void> minus() async {//增加记数方法
    _controller.add(--_count);
  }
}


name: OutlinedButton样式
subtitle:
      
【style】 : 按钮样式   【ButtonStyle】
【focusNode】 : 焦点   【FocusNode】
【clipBehavior】 : 裁剪行为   【Clip】
【autofocus】 : 自动聚焦   【bool】

code:
import 'package:flutter/material.dart';
class OutlinedButtonStyleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Wrap(
        spacing: 10,
        children: [
          OutlinedButton(
            style: TextButton.styleFrom(
                backgroundColor: Colors.orange,
                primary: Colors.white,
                elevation: 2,
                shadowColor: Colors.orangeAccent),
            child: Text('ElevatedButton样式'),
            onPressed: _onPressed,
            onLongPress: _onLongPress,
          ),
          OutlinedButton(
            style: TextButton.styleFrom(
                backgroundColor: Colors.white,
                primary: Colors.black,
                side: BorderSide(color: Colors.blue,width: 1),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))
                ),
                // elevation: 2,
                shadowColor: Colors.orangeAccent),
            child: Text('ElevatedButton边线'),
            autofocus: false,
            onPressed: _onPressed,
            onLongPress: _onLongPress,
          ),
        ],
      ),
    );
  }

  _onPressed() {}

  _onLongPress() {}
}


name: OutlinedButton基本使用
subtitle:
      
【child】 : 是否具有滚动主体   【Widget】
【onPressed】 : 点击事件   【VoidCallback】
【onLongPress】 : 长按事件   【VoidCallback】

code:
import 'package:flutter/material.dart';
class OutlinedButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        height: 60,
        child: Wrap(
          spacing: 20,
          children: [
            OutlinedButton(
              child: Text('OutlinedButton'),
              onPressed: _onPressed,
              onLongPress: _onLongPress,
            ),
            OutlinedButton(
              child: Text('禁用按钮'),
              onPressed: null,
              onLongPress: null,
            ),
          ],
        ));
  }

  _onPressed() {}

  _onLongPress() {}
}


name: AppBar基本使用
subtitle:
      
【leading】 : 左侧组件   【Widget】
【title】 : 中间组件   【Widget】
【actions】 : 右侧组件   【List<Widget>】
【elevation】 : 影深   【double】
【shape】 : 形状   【ShapeBorder】
【backgroundColor】 : 影深   【背景色】
【centerTitle】 : 中间是否居中   【bool】

code:
import 'package:flutter/material.dart';
import '../PopupMenuButton/node1_base.dart';
class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text('风雅六社'),
      leading: BackButton(),
      backgroundColor: Colors.amber[500],
      elevation: 2,
      centerTitle: true,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
        topRight: Radius.circular(5),
        bottomLeft: Radius.circular(5),
      )),
      actions: <Widget>[
        IconButton(
            icon: Icon(Icons.star),
            tooltip: 'like',
            onPressed: () {
              // do nothing
            }),
        CustomPopupMenuButton()
      ],
    );
  }
}


name: AppBar与TabBar、TabBarView联用
subtitle: 【bottom】 : 底部组件 【PreferredSizeWidget】
code:
import 'package:flutter/material.dart';
import '../PopupMenuButton/node1_base.dart';
class TabAppBar extends StatefulWidget {
  @override
  _TabAppBarState createState() => _TabAppBarState();
}

class _TabAppBarState extends State<TabAppBar>
    with SingleTickerProviderStateMixin {
  final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: 180,
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                    "assets/images/sabar.webp",
                  ),
                  fit: BoxFit.cover)),
          child: _buildAppBar(),
        ),
        Container(
            height: 150, color: Color(0xff916BF0), child: _buildTableBarView())
      ],
    );
  }

  Widget _buildAppBar() => AppBar(
        title: Text('风雅六社'),
        elevation: 1,
        leading: BackButton(),
        backgroundColor: Colors.amber[500].withAlpha(33),
        centerTitle: true,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        )),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.star),
              tooltip: 'like',
              onPressed: () {
                // do nothing
              }),
          CustomPopupMenuButton()
        ],
        bottom: TabBar(
          isScrollable: true,
          controller: _tabController,
          indicatorColor: Colors.orangeAccent,
          tabs: tabs.map((e) => Tab(text: e)).toList(),
        ),
      );

  Widget _buildTableBarView() => TabBarView(
      controller: _tabController,
      children: tabs
          .map((e) => Center(
                  child: Text(
                e,
                style: TextStyle(color: Colors.white, fontSize: 20),
              )))
          .toList());
}


name: Ink基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【padding】 : 内边距   【EdgeInsetsGeometry】
【decoration】 : 装饰   【Decoration】
【width】 : 宽   【double】
【height】 : 高   【double】
【color】 : 颜色   【Color】

code:
import 'package:flutter/material.dart';
class CustomInk extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.orangeAccent,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Ink(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                color: Colors.yellow,
              borderRadius: BorderRadius.all(Radius.circular(20))
            ),

            width: 200.0,
            height: 100.0,
            child: InkWell(
                onTap: () {
                },
                child: Center(
                  child: Text('Hello'),
                )),
          ),
        ),
      ),
    );
  }
}


name: Ink.image图片水波纹
subtitle: 其中属性与Image组件一致，详见Image组件
code:
import 'package:flutter/material.dart';
class InkImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.grey[800],
      child: Center(
        child: Ink.image(
          image: AssetImage('assets/images/sabar.webp'),
          fit: BoxFit.cover,
          width: 300.0,
          height: 200.0,
          child: InkWell(
              onTap: () {},
              child: Align(
                alignment: Alignment.topLeft,
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text('Chaos',
                      style: TextStyle(
                          fontWeight: FontWeight.w900, color: Colors.black)),
                ),
              )),
        ),
      ),
    );
  }
}


name: TextButton样式
subtitle:
      
【style】 : 按钮样式   【ButtonStyle】
【focusNode】 : 焦点   【FocusNode】
【clipBehavior】 : 裁剪行为   【Clip】
【autofocus】 : 自动聚焦   【bool】

code:
import 'package:flutter/material.dart';
class TextButtonStyleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Wrap(
        spacing: 10,
        children: [
          TextButton(
            style: TextButton.styleFrom(
                backgroundColor: Colors.blue,
                padding: EdgeInsets.symmetric(horizontal: 8),
                primary: Colors.white,
                elevation: 2,
                shadowColor: Colors.orangeAccent),
            child: Text('TextButton 样式'),
            onPressed: _onPressed,
            onLongPress: _onLongPress,
          ),
          TextButton(
            style: TextButton.styleFrom(
                backgroundColor: Colors.white,
                primary: Colors.black,
                side: BorderSide(color: Colors.blue,width: 1),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10))
                ),
                // elevation: 2,
                shadowColor: Colors.orangeAccent),
            child: Text('TextButton 边线'),
            autofocus: false,
            onPressed: _onPressed,
            onLongPress: _onLongPress,
          ),
        ],
      ),
    );
  }

  _onPressed() {}

  _onLongPress() {}
}


name: TextButton基本使用
subtitle:
      
【child】 : 是否具有滚动主体   【Widget】
【onPressed】 : 点击事件   【VoidCallback】
【onLongPress】 : 长按事件   【VoidCallback】

code:
import 'package:flutter/material.dart';
class TextButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        height: 60,
        child: Wrap(
          spacing: 20,
          children: [
            TextButton(
              child: Text('TextButton 文字'),
              onPressed: _onPressed,
              onLongPress: _onLongPress,
            ),
            TextButton(
              child: Text('TextButton 禁用'),
              onPressed: null,
              onLongPress: null,
            ),
          ],
        ));
  }

  _onPressed() {}

  _onLongPress() {}
}


name: Form基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【onChanged】 : 表单变化回调   【VoidCallback】
【onWillPop】 : 返回回调  【WillPopCallback】

code:
import 'package:flutter/material.dart';
class CustomForm extends StatefulWidget {
  @override
  _CustomFormState createState() => _CustomFormState();
}

class _CustomFormState extends State<CustomForm> {
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Form(
        onWillPop: () => _willPop(context),
        key: _formKey,
        onChanged: () {
          print('Form---onChanged');
        },
        child:
            Stack(
              alignment: Alignment.centerRight,
              children: <Widget>[
                Container(
                  width: 350,
                  child: UnconstrainedBox(
                    child: Container(
                      width: 200,
                      height: 70,
                      child: TextFormField(
                        style: TextStyle(textBaseline: TextBaseline.alphabetic),
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'username',
                        ),
                        validator: _validateUsername,
                      ),
                    ),
                  ),
                ),
                Positioned(
                    top: 0, right: 0, child: _buildSubmitButton(context)),
              ],
        ),
      ),
    );
  }

  String _validateUsername(value) {
    if (value.isEmpty) {
      return '用户名不能为空';
    }
    return null;
  }

  RaisedButton _buildSubmitButton(BuildContext context) {
    return RaisedButton(
      color: Colors.blue,
      shape: CircleBorder(
        side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
      ),
      onPressed: _onSubmit,
      child: Icon(
        Icons.check,
        color: Colors.white,
      ),
    );
  }

  _onSubmit(){
    if (_formKey.currentState.validate()) {
      FocusScope.of(context).requestFocus(FocusNode());
      Navigator.of(context).pop();
    }
  }

  Future<bool> _willPop(context) async {
    return await showDialog(
          context: context,
          builder: (context) => AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))),
            title: Text('提示'),
            content: Text('你确定要离开此页吗?'),
            actions: <Widget>[
              FlatButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: Text('确定'),
              ),
              FlatButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: Text('取消'),
              ),
            ],
          ),
        ) ??
        false;
  }
}


name: Tooltip基本使用
subtitle:
      
【preferBelow】 : 是否首选下方   【bool】
【padding】 : 内边距   【EdgeInsetsGeometry】
【margin】 : 外边距   【EdgeInsetsGeometry】
【message】 : 消息内容   【String】
【showDuration】 : 展示时间   【Duration】
【waitDuration】 : 悬浮出现时间   【Duration】
【child】 : 孩子   【Widget】

code:
import 'package:flutter/material.dart';
class CustomTooltip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Tooltip(
      preferBelow: true,
      padding: EdgeInsets.all(5),
      margin: EdgeInsets.all(5),
      message: "天王盖地虎",
      showDuration: Duration(seconds: 3),
      waitDuration: Duration(milliseconds: 200),
      child: Icon(Icons.info_outline),
    );
  }
}


name: Tooltip的装饰
subtitle: 【decoration】 : 装饰对象 【Decoration】 【textStyle】 : 文字样式 【double】
code:
import 'package:flutter/material.dart';
class DecorationTooltip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Tooltip(
        preferBelow: false,
        padding: EdgeInsets.all(5),
        margin: EdgeInsets.all(2),
        message: "宝塔镇河妖",
        textStyle: TextStyle(
            color: Colors.red,
            shadows: [Shadow(color: Colors.white,
                offset: Offset(1, 1))]),
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
              color: Colors.orangeAccent,
              offset: Offset(1, 1), blurRadius: 8)
        ]),
        child: Icon(Icons.info_outline));
  }
}


name: RefreshIndicator基本使用
subtitle: 【child】 : 孩子(可滑动) 【Widget】 【displacement】 : 指示器悬浮高度 【double】 【color】 : 指示器颜色 【Color】,
code:
import 'package:flutter/material.dart';
class CustomRefreshIndicator extends StatefulWidget {
  @override
  _CustomRefreshIndicatorState createState() => _CustomRefreshIndicatorState();
}

class _CustomRefreshIndicatorState extends State<CustomRefreshIndicator> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {

    return Container(
      height: 200,
      width: 200,
      child: RefreshIndicator(
        onRefresh: _increment,
        displacement: 20,
        color: Colors.orange,
        backgroundColor: Colors.white,
        child: SingleChildScrollView(
          child: Container(
            alignment: Alignment.center,
            width: 200,
            height: 300,
            color: Colors.blue,
            child: Text('$_count',style: TextStyle(color: Colors.white,fontSize: 40)),
          ),
        ),
      ),
    );
  }

  Future<void> _increment() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _count++;
    });
  }
}


name: RawMaterialButton高亮和形状
subtitle: 【highlightElevation】 : 高亮影深 【double】 【shape】 : 形状 【ShapeBorder】
code:
import 'package:flutter/material.dart';
class ShapeRawMaterialButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        spacing: 20,
        children: <Widget>[
          RawMaterialButton(
            elevation: 2,
            shape:  CircleBorder(
              side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
            ),
            fillColor: Colors.green,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            onLongPress: ()=>print('onLongPress'),
            child: Icon(Icons.remove),
            onPressed: ()=>print('onPressed'),
          ),
          RawMaterialButton(
            shape:RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(15))),
            elevation: 0,
            highlightElevation: 0,
            fillColor: Colors.blue,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            onLongPress: ()=>print('onLongPress'),
            child: Text('Push'),
            onPressed: ()=>print('onPressed'),
          ),
          RawMaterialButton(
            elevation: 2,
            shape:  CircleBorder(
              side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
            ),
            fillColor: Colors.red,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            onLongPress: ()=>print('onLongPress'),
            child: Icon(Icons.add),
            onPressed: ()=>print('onPressed'),
          ),

        ],
      ),
    );
  }
}


name: RawMaterialButton基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【elevation】 : 影深   【double】
【fillColor】 : 填充色   【Color】
【splashColor】 : 水波纹色   【Color】
【textStyle】 : 文字样式   【TextStyle】
【onLongPress】 : 长按事件   【Function()】
【onPressed】 : 点击事件  【Function()】

code:
import 'package:flutter/material.dart';
class CustomRawMaterialButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        spacing: 20,
        children: <Widget>[
          RawMaterialButton(
            elevation: 2,
            fillColor: Colors.green,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            onLongPress: ()=>print('onLongPress'),
            child: Icon(Icons.remove),
            onPressed: ()=>print('onPressed'),
          ),
          RawMaterialButton(
            elevation: 2,
            fillColor: Colors.blue,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            onLongPress: ()=>print('onLongPress'),
            child: Text('Push'),
            onPressed: ()=>print('onPressed'),
          ),
          RawMaterialButton(
            elevation: 2,
            fillColor: Colors.red,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            onLongPress: ()=>print('onLongPress'),
            child: Icon(Icons.add),
            onPressed: ()=>print('onPressed'),
          ),

        ],
      ),
    );
  }
}


name: SlideTransition基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【textDirection】 : x轴方向  【TextDirection】
【position】 : 动画   【Animation<Offset>】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomSlideTransition extends StatefulWidget {
  @override
  _CustomSlideTransitionState createState() => _CustomSlideTransitionState();
}

class _CustomSlideTransitionState extends State<CustomSlideTransition>
    with SingleTickerProviderStateMixin {
  AnimationController _ctrl;

  @override
  void initState() {
    _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _ctrl.forward();
    super.initState();
  }

  @override
  void dispose() {
    _ctrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          setState(() {
            _ctrl.reset();
            _ctrl.forward();
          });
        },
        child: Container(
          width: MediaQuery.of(context).size.width,
          color: Colors.grey.withAlpha(33),
          height: 100,
          child: SlideTransition(
            textDirection: TextDirection.ltr,
            position: Tween<Offset>(
              begin: Offset.zero,
              end: Offset(0.2, 0.2),
            ).animate(_ctrl),
            child: Container(
                child: Icon(Icons.android, color: Colors.green, size: 60)),
          ),
        ));
  }
}


name: Radio基本使用
subtitle:
      
【value】 : 选钮值   【T】
【groupValue】 : 当前匹配值   【T】
【activeColor】 : 激活颜色   【Color】
【onChanged】 : 改变时回调   【Function(T)】

code:
import 'package:flutter/material.dart';
class CustomRadio extends StatefulWidget {
  @override
  _CustomRadioState createState() => _CustomRadioState();
}

class _CustomRadioState extends State<CustomRadio> {
  var data = <double>[1, 2, 3, 4, 5];
  double _value = 1;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: data
          .map((e) => Radio<double>(
          activeColor: Colors.orangeAccent,
          value: e,
          groupValue: _value,
          onChanged: (v) => setState(() => _value = v)))
          .toList(),
    );
  }
}


name: PageView基本使用
subtitle: 【children】 : 子组件列表 【List<Widget>】 【onPageChanged】 : 点击事件 【ValueChanged<int>】
code:
import 'package:flutter/material.dart';
class CustomPageView extends StatelessWidget {
  final data = <Color>[
    Colors.green[50],
    Colors.green[100],
    Colors.green[200],
    Colors.green[300],
    Colors.green[400],
    Colors.green[500],
    Colors.green[600],
    Colors.green[700],
    Colors.green[800],
    Colors.green[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: PageView(
        onPageChanged: (position){
          print(position);
        },
        children: data
            .map((color) => Container(
          alignment: Alignment.center,
          width: 90,
          color: color,
          child: Text(
            colorString(color),
            style: TextStyle(color: Colors.white,
                fontSize:24,shadows: [
              Shadow(
                  color: Colors.black,
                  offset: Offset(.5, .5),
                  blurRadius: 2)
            ]),
          ),
        ))
            .toList(),
      ),
    );
  }
  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}


