# node

name: PageView控制器简单实用
subtitle: 【controller】 : 页面控制器 【PageController】
code:
import 'package:flutter/material.dart';
class CtrlPageView extends StatefulWidget {
  @override
  _CtrlPageViewState createState() => _CtrlPageViewState();
}

class _CtrlPageViewState extends State<CtrlPageView> {
  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],
  ];

  PageController _controller;

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

  @override
  void initState() {
    super.initState();
    _controller=PageController(
      viewportFraction: 0.8,
      initialPage: (data.length/2).round()
    );

  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: PageView(
        controller: _controller,
        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()}";
}


name: PageView滑动方向
subtitle: 【scrollDirection】 : 滑动方向 【Axis】 【reverse】 : 是否反向 【bool】
code:
import 'package:flutter/material.dart';
class DirectionPageView 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: 150,
      child: PageView(
        scrollDirection: Axis.vertical,
        reverse: true,
        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()}";
}


name: BottomNavigationBar基本使用
subtitle:
      
【currentIndex】 : 当前索引   【int】
【elevation】 : 影深   【double】
【type】 : 类型*2   【BottomNavigationBarType】
【fixedColor】 : type为fix的颜色   【Color】
【backgroundColor】 : 背景色   【Color】
【iconSize】 : 图标大小   【double】
【selectedLabelStyle】 : 选中文字样式   【TextStyle】
【unselectedLabelStyle】 : 未选中文字样式   【TextStyle】
【showUnselectedLabels】 : 显示未选中标签   【bool】
【showSelectedLabels】 : 显示选中标签   【bool】
【items】 : 条目   【List<BottomNavigationBarItem>】
【onTap】 : 点击事件   【Function(int)】

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

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  var _position = 0;
  BottomNavigationBarType _type = BottomNavigationBarType.shifting;
  final iconsMap = {
    //底栏图标
    "图鉴": Icons.home, "动态": Icons.toys,
    "喜欢": Icons.favorite, "手册": Icons.class_,
    "我的": Icons.account_circle,
  };
  final _colors = [
    Colors.red,
    Colors.yellow,
    Colors.blue,
    Colors.green,
    Colors.purple,
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        _buildOp(),
        _buildBottomNavigationBar(),
      ],
    );
  }

  bool get isShifting => _type == BottomNavigationBarType.shifting;

  BottomNavigationBar _buildBottomNavigationBar() {
    return BottomNavigationBar(
      onTap: (position) => setState(() => _position = position),
      currentIndex: _position,
      elevation: 1,
      type: _type,
      fixedColor: isShifting ? Colors.white : _colors[_position],
      backgroundColor: Colors.white,
      iconSize: 25,
      selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
      showUnselectedLabels: false,
      showSelectedLabels: true,
      items: iconsMap.keys
          .map((key) => BottomNavigationBarItem(
              title: Text(
                key,
              ),
              icon: Icon(iconsMap[key]),
              backgroundColor: _colors[_position]))
          .toList(),
    );
  }

  Widget _buildOp() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Text(
          _type.toString(),
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
        ),
        Switch(
            value: _type == BottomNavigationBarType.shifting,
            onChanged: (b) {
              setState(() => _type = b
                  ? BottomNavigationBarType.shifting
                  : BottomNavigationBarType.fixed);
            }),
      ],
    );
  }
}


name: 可结合PageView进行切页
subtitle: 在onTap时进行使用控制器进行切页
code:
import 'package:flutter/material.dart';
class BottomNavigationBarWithPageView extends StatefulWidget {
  @override
  _BottomNavigationBarWithPageViewState createState() =>
      _BottomNavigationBarWithPageViewState();
}

class _BottomNavigationBarWithPageViewState
    extends State<BottomNavigationBarWithPageView> {
  var _position = 0;
  final iconsMap = {
    //底栏图标
    "图鉴": Icons.home, "动态": Icons.toys,
    "喜欢": Icons.favorite, "手册": Icons.class_,
    "我的": Icons.account_circle,
  };
  final _colors = [
    Colors.red,
    Colors.yellow,
    Colors.blue,
    Colors.green,
    Colors.purple,
  ];
  PageController _controller; //页面控制器，初始0

  @override
  void initState() {
    _controller = PageController(
      initialPage: _position,
    );
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.orange.withAlpha(88),
            width: MediaQuery.of(context).size.width,
            height: 150,
            child: PageView(
              controller: _controller,
              children: iconsMap.keys
                  .map((e) => Center(
                        child: Text(
                          e,
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ))
                  .toList(),
            ),
          ),
          _buildBottomNavigationBar()
        ],
      ),
    );
  }

  BottomNavigationBar _buildBottomNavigationBar() {
    return BottomNavigationBar(
      onTap: (position) {
        _controller.jumpToPage(position);
        setState(() => _position = position);
      },
      currentIndex: _position,
      elevation: 1,
      type: BottomNavigationBarType.shifting,
      fixedColor: Colors.white,
      iconSize: 25,
      selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
      showUnselectedLabels: false,
      showSelectedLabels: true,
      items: iconsMap.keys
          .map((key) => BottomNavigationBarItem(
              title: Text(
                key,
              ),
              icon: Icon(iconsMap[key]),
              backgroundColor: _colors[_position]))
          .toList(),
    );
  }
}


name: TabBarView需要与TabBar联用
subtitle:
      
【controller】 : 控制器   【TabController】
【children】 : 孩子们   【指示器颜色】
【physics】 : 表现   【ScrollPhysics】

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

class _CustomTabBarViewState extends State<CustomTabBarView> 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(
      child: Column(
        children: <Widget>[
          _buildTabBar(),
          Container(
              color: Colors.purple,
              width: MediaQuery.of(context).size.width,
              height: 200,
              child: _buildTableBarView())
        ],
      ),
    );
  }

  Widget _buildTabBar() => 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(),
    );

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


name: WidgetInspector基本使用
subtitle: 【child】 : 子组件 【Widget】 【selectButtonBuilder】: *选择按钮构造器 【InspectorSelectButtonBuilder】
code:
import 'package:flutter/material.dart';
class WidgetInspectorDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: WidgetInspector(
        child: HomePage(),
        selectButtonBuilder: _selectButtonBuilder,
      ),
    );
  }

  Widget _selectButtonBuilder(BuildContext context, onPressed) {
    onPressed();
    return Container();
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment(0, 0.7),
        child: Text(
          '你点击了$_count次',
          style: TextStyle(fontSize: 18, color: Colors.blue),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            _count++;
          });
        },
      ),
    );
  }
}


name: CupertinoContextMenuAction基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【isDefaultAction】 : 是否默认选中  【bool】
【trailingIcon】 : 尾部  【bool】
【onPressed】 : 点击事件  【Function()】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoContextMenuAction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          width: 200,
          margin: EdgeInsets.all(5),
          child: CupertinoContextMenuAction(
              trailingIcon: CupertinoIcons.settings,
              isDefaultAction: true,
              onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'),
              child: Text('张风捷特烈')),
        ),
        Container(
          width: 200,
          margin: EdgeInsets.all(5),
          child: CupertinoContextMenuAction(
              trailingIcon: CupertinoIcons.home,
              isDefaultAction: false,
              onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'),
              child: Text('百里·巫缨')),
        ),
      ],
    );
  }
}


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

class _CustomScaleTransitionState extends State<CustomScaleTransition>
    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: ScaleTransition(
            scale: CurvedAnimation(parent: _ctrl, curve: Curves.linear),
            child: Icon(Icons.android, color: Colors.green, size: 60),
          ),
        ));
  }
}


name: SelectableText对齐属性
subtitle: 【textAlign】 : 对齐方式*6 【textAlign】 【textDirection】 : 文字方向*2 【TextDirection】
code:
import 'package:flutter/material.dart';
class AlignSelectableText extends StatefulWidget {
  @override
  _AlignSelectableTextState createState() => _AlignSelectableTextState();
}

class _AlignSelectableTextState extends State<AlignSelectableText> {
  final text =
      "The [SelectableText] widget displays a string of text with a single style."
      "The string might break across multiple lines or might all be displayed on"
      "the same line depending on the layout constraints.";
  var _textAlign = TextAlign.left;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSelector(),
        SelectableText(
          text,
          style: TextStyle(fontSize: 18, color: Colors.red),
          cursorColor: Colors.green,
          cursorRadius: Radius.circular(3),
          cursorWidth: 5,
          showCursor: true,
          textAlign: _textAlign,
          textDirection: TextDirection.ltr,

          autofocus: false,
        ),
      ],
    );
  }

  Widget _buildSelector() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Text(
          "textAlign属性选择:",
          style: TextStyle(
              fontSize: 16, color: Colors.blue, fontWeight: FontWeight.bold),
        ),
        DropdownButton<TextAlign>(
            underline: Container(),
            value: _textAlign,
            items: TextAlign.values
                .map((e) => DropdownMenuItem<TextAlign>(
                      value: e,
                      child: Text(e.toString()),
                    ))
                .toList(),
            onChanged: (e) {
              setState(() {
                _textAlign = e;
              });
            }),
      ],
    );
  }
}


name: SelectableText基本使用
subtitle:
      
【入参】 : 显示文字   【String】
【style】 : 文字样式   【TextStyle】
【cursorRadius】 : 光标半径   【Radius】
【cursorColor】 : 光标颜色   【Color】
【cursorWidth】 : 光标宽度   【double】
【showCursor】 : 是否显示光标   【bool】
【autofocus】 : 自动聚焦   【bool】

code:
import 'package:flutter/material.dart';
class CustomSelectableText extends StatelessWidget {
  final text = "        始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，"
      "臣以神遇而不以目视，官知止而神欲行。依乎天理，批大郤，导大窾，因其固然，"
      "技经肯綮之未尝，而况大軱乎！良庖岁更刀，割也；族庖月更刀，折也。"
      "今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于硎。彼节者有间，而刀刃者无厚；"
      "以无厚入有间，恢恢乎其于游刃必有余地矣，是以十九年而刀刃若新发于硎。"
      "虽然，每至于族，吾见其难为，怵然为戒，视为止，行为迟。动刀甚微，謋然已解，如土委地。"
      "提刀而立，为之四顾，为之踌躇满志，善刀而藏之.";

  @override
  Widget build(BuildContext context) {
    return SelectableText(
      text,
      style: TextStyle(fontSize: 18, color: Colors.orange),
      cursorColor: Colors.green,
      cursorRadius: Radius.circular(3),
      cursorWidth: 5,
      showCursor: true,
      autofocus: false,
    );
  }
}


name: CupertinoDatePicker基本使用
subtitle:
      
【initialDateTime】 : 初始日期   【DateTime】
【minimumYear】 : 最小年份   【int】
【maximumYear】 : 最大年份   【int】
【onDateTimeChanged】 : 点击回调  【Function(DateTime)】
【minuteInterval】 : 分钟间隔  【int】
【use24hFormat】 : 是否是24小时制  【bool】
【backgroundColor】 : 背景色  【Color】
【mode】 : 模式*3  【CupertinoDatePickerMode】

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

class _CustomCupertinoDatePickerState extends State<CustomCupertinoDatePicker> {
  DateTime _date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(
          '当前日期:${_date.toIso8601String()}',
          style: TextStyle(color: Colors.grey, fontSize: 16),
        ),
        _buildInfoTitle('CupertinoDatePickerMode.dateAndTime'),
        buildPicker(CupertinoDatePickerMode.dateAndTime),
        _buildInfoTitle('CupertinoDatePickerMode.date'),
        buildPicker(CupertinoDatePickerMode.date),
        _buildInfoTitle('CupertinoDatePickerMode.time'),
        buildPicker(CupertinoDatePickerMode.time),
      ],
    );
  }

  Container buildPicker(CupertinoDatePickerMode mode) {
    return Container(
      margin: EdgeInsets.all(10),
      height: 150,
      child: CupertinoDatePicker(
        mode: mode,
        initialDateTime: DateTime.now(),
//        maximumDate: DateTime(2018,8,8),
//        minimumDate: DateTime(2030,8,8),
        minimumYear: 2018,
        maximumYear: 2030,
        use24hFormat: false,
        minuteInterval: 1,
        backgroundColor: CupertinoColors.white,
        onDateTimeChanged: (date) {
          print(date);
          setState(() => _date = date);
        },
      ),
    );
  }

  Widget _buildInfoTitle(info){
    return    Padding(
      padding: const EdgeInsets.only(left: 20,top: 20,bottom: 5),
      child: Text(
        info,
        style: TextStyle(color: Colors.blue, fontSize: 16,fontWeight: FontWeight.bold),
      ),
    );
  }
}


name: InkWell其他属性
subtitle:
      
【child】 : 子组件   【Widget】
【onHighlightChanged】 : 高亮变化回调   【Function(bool)】
【highlightColor】 : 高亮色   【Color】
【splashColor】 : 水波纹色   【Color】
【radius】 : 水波半径   【double】

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

class _ColorInkWellState extends State<ColorInkWell> {
  var _info = 'Push';

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => {},
      splashColor: Colors.blueAccent,
      highlightColor: Colors.orange,
      onHighlightChanged: (v) =>
          setState(() => _info = 'onHighlightChanged:$v'),
      radius: 50,
      child: Container(
        alignment: Alignment.center,
        width: 180,
        height: 50,
        child: Text(_info),
      ),
    );
  }
}


name: InkWell基本事件
subtitle:
      
【child】 : 子组件   【Widget】
【onTap】 : 点击事件   【Function()】
【onDoubleTap】 : 双击事件   【Function()】
【onTapCancel】 : 点击取消   【Function()】
【onLongPress】 : 长按事件   【Function()】

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

class _CustomInkWellState extends State<CustomInkWell> {
  var _info = 'Push';

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => setState(() => _info = 'onTap'),
      onDoubleTap: () => setState(() => _info = 'onDoubleTap'),
      onLongPress: () => setState(() => _info = 'onLongPress'),
      onTapCancel: () => setState(() => _info = 'onTapCancel'),
      child: Container(
        alignment: Alignment.center,
        width: 120,
        height: 50,
        child: Text(_info),
      ),
    );
  }
}


name: DefaultTextStyleTransition基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【textAlign】 : 文字对齐方式  【TextAlign】
【softWrap】 : 是否包裹  【bool】
【maxLines】 : 最大行数  【int】
【overflow】 : 溢出模式  【TextOverflow】
【style】 : 动画   【Animation<TextStyle>】

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

class _CustomDefaultTextStyleTransitionState
    extends State<CustomDefaultTextStyleTransition>
    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(
          alignment: Alignment.center,
          width: 300,
          height: 100,
          child: DefaultTextStyleTransition(
            textAlign: TextAlign.start,
            softWrap: true,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyleTween(
                begin: TextStyle(color: Colors.blue, fontSize: 50, shadows: [
                  Shadow(
                      offset: Offset(1, 1), color: Colors.black, blurRadius: 3)
                ]),
                end: TextStyle(color: Colors.white, fontSize: 20, shadows: [
                  Shadow(
                      offset: Offset(1, 1), color: Colors.purple, blurRadius: 3)
                ])).animate(_ctrl),
            child: Text('张风捷特烈'),
          ),
        ));
  }
}


name: Dismissible基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【background】 : 左底  【Widget】
【secondaryBackground】 : 右底  【Widget】
【key】 : 键  【Key】
【confirmDismiss】 : 确认回调  【DismissDirectionCallback】
【onDismissed】 : 消失回调  【DismissDirectionCallback】,

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

class _CustomDismissibleState extends State<CustomDismissible> {
  var 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) => _buildItem(color)).toList(),
      ),
    );
  }

  Widget _buildItem(Color color) {
    return Dismissible(
      background: Container(
        color: Colors.green,
        alignment: Alignment(-0.9, 0),
        child: Icon(
          Icons.check,
          color: Colors.white,
        ),
      ),
      secondaryBackground: Container(
        alignment: Alignment(0.9, 0),
        child: Icon(
          Icons.close,
          color: Colors.white,
        ),
        color: Colors.red,
      ),
      key: ValueKey(color),
      onDismissed: (d) {
        data.remove(color);
      },
      confirmDismiss: (e) async {
        if (e == DismissDirection.endToStart) {
          return true;
        } else {
          return false;
        }
      },
      child: 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)
          ]),
        ),
      ),
    );
  }

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


name: Dismissible基本使用
subtitle: 【direction】 : 方向 【DismissDirection】 【crossAxisEndOffset】 : 偏移 【double】,
code:
import 'package:flutter/material.dart';
class DirectionDismissible extends StatefulWidget {
  @override
  _CustomDirectionDismissibleState createState() => _CustomDirectionDismissibleState();
}

class _CustomDirectionDismissibleState extends State<DirectionDismissible> {
  var 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(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.symmetric(horizontal: 5),
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }

  Widget _buildItem(Color color) {
    return Dismissible(
      direction: DismissDirection.vertical,
      background: Container(
        color: Colors.green,
        alignment: Alignment( 0,-0.9,),
        child: Icon(
          Icons.check,
          color: Colors.white,
        ),
      ),
      crossAxisEndOffset: 0.5,
      secondaryBackground: Container(
        alignment: Alignment( 0,0.9,),
        child: Icon(
          Icons.close,
          color: Colors.white,
        ),
        color: Colors.red,
      ),
      key: ValueKey(color),
      onDismissed: (d) {
        data.remove(color);
      },
      confirmDismiss: (e) async {
        print(e);
        if (e == DismissDirection.up) {
          return true;
        } else {
          return false;
        }
      },
      child: Container(
        alignment: Alignment.center,
        width: 80,
        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: RelativePositionedTransition基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【size】 : 左和上的偏移量   【Size】
【rect】 : 动画   【Animation<Rect>】
    PositionedTransition组件只能在Stack内起作用

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

class _CustomRelativePositionedTransitionState
    extends State<CustomRelativePositionedTransition>
    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(33),
          width: 200,
          height: 100,
          child: Stack(
            children: <Widget>[
              RelativePositionedTransition(
                size: Size(200, 100),
                rect: RectTween(
                  begin: Rect.fromLTRB(0, 0, 50, 50),
                  end: Rect.fromLTRB(0, 0, 50, 50).translate(100, 50),
                ).animate(_ctrl),
                child: Icon(
                  Icons.android,
                  color: Colors.green,
                  size: 50,
                ),
              )
            ],
          ),
        ));
  }
}


name: CupertinoButton点击事件
subtitle:
【color】: 颜色   【Color】
【pressedOpacity】: 按下时透明度   【double】
【child】: 子组件   【Widget】
【padding】: 内边距   【EdgeInsetsGeometry】
【borderRadius】: 圆角半径   【BorderRadius】
【onPressed】: 点击事件   【Function】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var data = {
      CupertinoColors.activeBlue:4.0,
      Colors.blue:6.0,
      CupertinoColors.activeOrange:8.0,
    };
    return Wrap(
      spacing: 20,
      children:data.keys.map((e)=> CupertinoButton(
        padding: EdgeInsets.zero,
        onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),
        color: e,
        pressedOpacity: 0.4,
        borderRadius:  BorderRadius.all(Radius.circular(data[e])),
        child: Text("iOS"),
      )).toList()
    );
  }
}


name: NestedScrollView基本用法
subtitle:
      
【controller】 : 滑动控制器   【ScrollController】
【scrollDirection】 : 滑动方向   【Axis】
【reverse】 : 是否反向   【bool】
【physics】 : 滑顶样式   【ScrollPhysics】
【dragStartBehavior】 : 开始拖动行为   【DragStartBehavior】
【headerSliverBuilder】 : *头部构造器   【NestedScrollViewHeaderSliversBuilder】
【body】 : *内容   【Widget】

code:
import 'package:flutter/material.dart';
class NestedScrollViewDemo 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: BottomAppBar基本用法
subtitle:
      
【elevation】 : 影深   【double】
【shape】 : 形状   【NotchedShape】
【notchMargin】 : 间隔距离   【double】
【color】 : 颜色   【Color】
【child】 : 孩子   【Widget】

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

class _CustomBottomAppBarState extends State<CustomBottomAppBar> {
  var _position = 0;
  var _location = FloatingActionButtonLocation.centerDocked;
  final iconsMap = {
    "图鉴": Icons.home,
    "动态": Icons.toys,
    "喜欢": Icons.favorite,
    "手册": Icons.class_,
  };
  var activeColor = Colors.blue.withAlpha(240);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 180,
      child: Scaffold(
        backgroundColor: Colors.purple.withAlpha(22),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'),
          child: Icon(Icons.add),
        ),
        bottomNavigationBar: _buildBottomAppBar(),
        floatingActionButtonLocation: _location,
        body: _buildContent(),
      ),
    );
  }

  Widget _buildBottomAppBar() {
    return BottomAppBar(
      elevation: 1,
      shape: CircularNotchedRectangle(),
      notchMargin: 5,
      color: Colors.red,
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: info.asMap().keys.map((i) => _buildChild(i)).toList()
            ..insertAll(isCenter ? 2 : 4, [SizedBox(width: 30)])),
    );
  }

  Container _buildContent() {
    return Container(
      alignment: Alignment.center,
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Text(
            '当前页索引:$_position',
            style: TextStyle(color: Colors.blue, fontSize: 18),
          ),
          Switch(
              value: isCenter,
              onChanged: (v) {
                setState(() {
                  _location = v
                      ? FloatingActionButtonLocation.centerDocked
                      : FloatingActionButtonLocation.endDocked;
                });
              }),
        ],
      ),
    );
  }

  List<String> get info => iconsMap.keys.toList();

  bool get isCenter => _location == FloatingActionButtonLocation.centerDocked;

  Widget _buildChild(int i) {
    var active = i == _position;
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: () => setState(() => _position = i),
        child: Wrap(
          direction: Axis.vertical,
          alignment: WrapAlignment.center,
          children: <Widget>[
            Icon(
              iconsMap[info[i]],
              color: active ? activeColor : Colors.white,
              size: 30,
            ),
            Text(info[i],
                style: TextStyle(
                    color: active ? activeColor : Colors.white, fontSize: 14)),
          ],
        ),
      ),
    );
  }
}


name: RawChip点击效果
subtitle:
      
【label】: 中间组件   【Widget】
【padding】 : 内边距   【EdgeInsetsGeometry】
【labelPadding】 : label边距   【EdgeInsetsGeometry】
【shadowColor】: 阴影色   【Color】
【avatar】: 左侧组件   【Widget】
【elevation】: 影深   【double】
【pressElevation】: 点击时影深   【double】
【onPressed】 : 点击事件  【Function()】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class PressRawChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RawChip(
        padding: EdgeInsets.all(5),
        labelPadding: EdgeInsets.all(3),
        label: Text('张风捷特烈'),
        avatar: Image.asset("assets/images/icon_head.webp"),
        elevation: 3,
        pressElevation: 5,
        shadowColor: Colors.orangeAccent,
        onPressed: () =>  Navigator.of(context).pushNamed('AboutMePage'),
      ),
    );
  }
}


name: RawChip选中和删除效果
subtitle:
      
【selected】: 是否选中   【bool】
【deleteIconColor】: 尾部图标色   【Color】
【selectedColor】: 选中色   【Color】
【deleteIcon】: 尾部组件   【Widget】
【onSelected】: 选中事件   【Function(bool)】
【onDeleted】 : 尾部事件  【Function()】

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

class _SelectRawChipState extends State<SelectRawChip> {
  bool _selected = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RawChip(
        selected: _selected,
        padding: EdgeInsets.all(5),
        labelPadding: EdgeInsets.all(3),
        deleteIconColor: Colors.red,
        selectedColor: Colors.orangeAccent.withAlpha(44),
        label: Text('张风捷特烈'),
        avatar: Image.asset("assets/images/icon_head.webp"),
        elevation: 3,
        pressElevation: 5,
        shadowColor: Colors.orangeAccent,
        onSelected: (v)=> setState(() => _selected=v),
        onDeleted: () =>  Navigator.of(context).pushNamed('AboutMePage'),
      ),
    );
  }
}


name: CircularProgressIndicator基本使用
subtitle:
      
【value】 : 进度   【double】
【backgroundColor】 : 背景色   【Color】
【valueColor】 : 进度颜色   【Animation<Color>】
【strokeWidth】 : 线宽   【double】

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

class _CustomCircularProgressIndicatorState
    extends State<CustomCircularProgressIndicator> {

  var data = <double>[0.2,0.4,0.6,0.8,null];

  @override
  Widget build(BuildContext context) {

    return Wrap(
      spacing: 10,
      children:data.map((e)=>Container(
        width: 50,
        height: 50,
        child: CircularProgressIndicator(
          value: e,
          backgroundColor: Colors.grey.withAlpha(33),
          valueColor: AlwaysStoppedAnimation(Colors.orange),
          strokeWidth: 5,
        ),
      )).toList(),
    );
  }
}


name: LinearProgressIndicator基本使用
subtitle:
      
【value】 : 进度   【double】
【backgroundColor】 : 背景色   【Color】
【valueColor】 : 进度颜色   【Animation<Color>】
    value为null时会不停循环

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

class _CustomLinearProgressIndicatorState
    extends State<CustomLinearProgressIndicator> {
  var data = <double>[0.2, 0.4, 0.6, 0.8, null];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: data
          .map((e) => Container(
        width: 50,
        height: 3,
        child:LinearProgressIndicator(
          value: e,
          backgroundColor: Colors.grey.withAlpha(33),
          valueColor: AlwaysStoppedAnimation(Colors.orange),
        ),
      ))
          .toList(),
    );
  }
}


name: MaterialApp基本用法
subtitle:
      
【theme】 : 主题   【ThemeData】
【title】 : 任务栏标题   【String】
【debugShowCheckedModeBanner】 : 开启角标   【bool】
【showPerformanceOverlay】 : 开启性能浮层   【bool】
【debugShowMaterialGrid】 : 开启网格   【bool】
【onGenerateRoute】 : 路由生成器   【RouteFactory】
【home】 : 主页   【Widget】

code:
import 'package:flutter/material.dart';
import '../../../../app/router.dart';
import '../../StatefulWidget/Scaffold/node1_base.dart';
class MaterialAppDemo extends StatefulWidget {
  @override
  _WidgetsAppDemoState createState() => _WidgetsAppDemoState();
}

class _WidgetsAppDemoState extends State<MaterialAppDemo> {
  var _debugShowCheckedModeBanner = false;
  var _showPerformanceOverlay = false;
  var _debugShowMaterialGrid = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _buildSwitchers(),
        Container(
          height: 250,
          child: MaterialApp(
            debugShowCheckedModeBanner: _debugShowCheckedModeBanner,
            showPerformanceOverlay: _showPerformanceOverlay,
            debugShowMaterialGrid: _debugShowMaterialGrid,
            home: HomePage(),
          ),
        ),
      ],
    );
  }

  Widget _buildSwitchers() {
    return DefaultTextStyle(
      style: TextStyle(color: Colors.blue),
      child: Wrap(
        spacing: 10,
        children: [
          Column(
            children: [
              Switch(
                value: _showPerformanceOverlay,
                onChanged: (v) {
                  setState(() {
                    _showPerformanceOverlay = v;
                  });
                },
              ),
              Text('性能浮层')
            ],
          ),
          Column(
            children: [
              Switch(
                value: _debugShowCheckedModeBanner,
                onChanged: (v) {
                  setState(() {
                    _debugShowCheckedModeBanner = v;
                  });
                },
              ),
              Text('开启角标')
            ],
          ),
          Column(
            children: [
              Switch(
                value: _debugShowMaterialGrid,
                onChanged: (v) {
                  setState(() {
                    _debugShowMaterialGrid = v;
                  });
                },
              ),
              Text('开启网格')
            ],
          )
        ],
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment(0, 0.7),
        child: Text(
          '你点击了$_count次',
          style: TextStyle(fontSize: 18, color: Colors.blue),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            _count++;
          });
        },
      ),
    );
  }
}


name: DraggableScrollableSheet基本使用
subtitle:
      
【initialChildSize】 : 初始分度   【double】
【minChildSize】 : 最小分度   【double】
【maxChildSize】 : 最大分度   【double】
【builder】 : 滑动组件构造器   【ScrollableWidgetBuilder】
【expand】 : 是否延展   【bool】

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 DraggableScrollableSheetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: ElevatedButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => DraggableScrollableSheetPage()),
          );
        },
        child: Text("进入 DraggableScrollableSheet 测试页"),
      ),
    );
  }
}

class DraggableScrollableSheetPage 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],
    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("DraggableScrollableSheet"),
      ),
      body: SizedBox.expand(
          child: DraggableScrollableSheet(
        initialChildSize: 0.3,
        minChildSize: 0.2,
        maxChildSize: 0.5,
        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: MergeableMaterial基本使用
subtitle:
      
【elevation】 : 影深   【double】
【hasDividers】 : 是否有分隔线   【bool】
【dividerColor】 : 分隔线颜色   【Color】
【mainAxis】 : 轴向   【Axis】
【children】 : 子组件集   【List<MergeableMaterialItem>】

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

class _MergeableMaterialDemoState extends State<MergeableMaterialDemo> {
  List<MergeableMaterialItem> items=[];

  @override
  void initState() {
    super.initState();
    _init(20);
  }

  @override
  Widget build(BuildContext context) {
    return  Container(
      height: 300,
      child: SingleChildScrollView(
              child: MergeableMaterial(
                elevation: 1,
                hasDividers: true,
                dividerColor: Colors.red,
                children: items,
              ),
      ),
    );
  }

  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]
  ];

  void _init(int count) {
    for (int i = 0; i < count; i++) {
      items.add(MaterialSlice(
          key: ValueKey(i),
          child: Container(
            alignment: Alignment.center,
            height: 60,
            color: data[i % data.length],
            child: Text(colorString(data[i % data.length])),
          )));
      if(i!=count-1){
        items.add(MaterialGap(
            key: ValueKey(i),
            size: 5));
      }
    }
  }

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


name: AnimatedCrossFade动画曲线
subtitle:
      
【firstCurve】 : 第一曲线   【Curve】
【secondCurve】 : 第二曲线   【Curve】
【sizeCurve】 : 尺寸变化曲线   【CrossFadeState】

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

class _CurveAnimatedCrossFadeState extends State<CurveAnimatedCrossFade> {
  var _crossFadeState = CrossFadeState.showFirst;

  bool get isFirst=> _crossFadeState == CrossFadeState.showFirst;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          child: AnimatedCrossFade(
            firstCurve: Curves.easeInCirc,
            secondCurve: Curves.easeInToLinear,
            sizeCurve: Curves.bounceOut,
            firstChild: Container(
              alignment: Alignment.center,
              width: 200,
              height: 80,
              color: Colors.orange  ,
              child: FlutterLogo(textColor: Colors.blue,size: 50,),
            ),
            secondChild: Container(
              width: 200,
              height: 150,
              alignment: Alignment.center,
              color: Colors.blue,
              child: FlutterLogo(
                textColor: Colors.white,
//                colors: Colors.orange,
                size: 100,style: FlutterLogoStyle.stacked,),
            ),
            duration: Duration(milliseconds: 1000),
            crossFadeState: _crossFadeState,
          ),
        ),
        _buildSwitch(),
      ],
    );
  }

  Widget _buildSwitch() => Switch(value: isFirst, onChanged: (v){
    setState(() {
      _crossFadeState= v?CrossFadeState.showFirst:CrossFadeState.showSecond;
    });
  });
}


name: AnimatedCrossFade基本使用
subtitle:
      
【firstChild】 : 第一孩子   【Widget】
【secondChild】 : 第二孩子   【Widget】
【crossFadeState】 : 显示第几个   【CrossFadeState】
【duration】 : 时长   【Duration】

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

class _CustomAnimatedCrossFadeState extends State<CustomAnimatedCrossFade> {
  var _crossFadeState = CrossFadeState.showFirst;

  bool get isFirst => _crossFadeState == CrossFadeState.showFirst;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          child: AnimatedCrossFade(
            firstChild: Container(
              alignment: Alignment.center,
              width: 200,
              height: 150,
              color: Colors.orange,
              child: FlutterLogo(textColor: Colors.blue, size: 100,),
            ),
            secondChild: Container(
              width: 200,
              height: 150,
              alignment: Alignment.center,
              color: Colors.blue,
              child: FlutterLogo(
                textColor: Colors.white,
//                colors: Colors.orange,
                size: 100,
                style: FlutterLogoStyle.stacked,),
            ),
            duration: Duration(milliseconds: 600),

            crossFadeState: _crossFadeState,
          ),
        ),
        _buildSwitch(),
      ],

    );
  }

  Widget _buildSwitch() =>
      Switch(value: isFirst, onChanged: (v) {
        setState(() {
          _crossFadeState =
          v ? CrossFadeState.showFirst : CrossFadeState.showSecond;
        });
      });
}


name: CupertinoTextField常用样式属性
subtitle:
【style】 : 输入文字样式   【TextStyle】
【prefix】: 前缀组件   【Widget】
【prefixMode】: 前缀模式   【OverlayVisibilityMode】
【suffix】: 后缀组件   【Widget】
【suffixMode】: 后缀模式   【OverlayVisibilityMode】
【cursorColor】: 游标颜色   【Color】
【cursorWidth】: 游标宽度   【double】
【cursorRadius】: 游标圆角   【Radius】
【readOnly】: 是否只读    【bool】

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child:
          CupertinoTextField(
            style: TextStyle(color: Colors.blue),
            prefix: Icon(CupertinoIcons.add),
            prefixMode: OverlayVisibilityMode.notEditing,
            suffix: Icon(CupertinoIcons.clear),
            suffixMode: OverlayVisibilityMode.editing,
            cursorColor: Colors.purple,
            cursorWidth: 4,
            cursorRadius: Radius.circular(2),
            readOnly: false,
            placeholder: '输入用户名',
          )
    );
  }
}


name: CupertinoTextField基础使用
subtitle:
【placeholder】 : 提示文字   【String】
【showCursor】 : 是否显示游标   【bool】
【minLines】 : 最小行数   【int】
【maxLines】 : 最大行数   【int】
【padding】 : 内边距   【EdgeInsetsGeometry】
【onChanged】 : 变化监听   【ValueChanged<String>】
【onTap】: 点击监听   【GestureTapCallback】
【onSubmitted】: 提交监听    【ValueChanged<String>】

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

class _CupertinoTextFieldDemoState extends State<CupertinoTextFieldDemo> {
  var _value = '';
  var _color =Colors.black;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text('输入了:$_value',style: TextStyle(color: _color),),
          CupertinoTextField(
            placeholder: 'Input Name',
            showCursor: true,
            minLines: 1,
            maxLines: 4,
            padding: EdgeInsets.all(8),
            onChanged: _onChanged,
            onTap: _onTap,
            onSubmitted: _onSubmitted,
          ),
        ],
      ),
    );
  }

  void _onChanged(String value) {
    setState(() {
      _value = value;
    });
  }

  void _onTap() {
    print('----_onTap----');
    setState(() {
      _color=Colors.blue;
    });
  }

  void _onSubmitted(String value) {
    print('----_onSubmitted:$value}----');
    setState(() {
      _color=Colors.black;
    });
  }

}


name: AnimatedDefaultTextStyle基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【textAlign】 : 文字对齐方式  【TextAlign】
【softWrap】 : 是否包裹  【bool】
【maxLines】 : 最大行数  【int】
【overflow】 : 溢出模式  【TextOverflow】
【style】 : 文字样式   【TextStyle】

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

class _CustomAnimatedDefaultTextStyleState
    extends State<CustomAnimatedDefaultTextStyle> {
  final TextStyle start = TextStyle(color: Colors.blue, fontSize: 50, shadows: [
    Shadow(offset: Offset(1, 1), color: Colors.black, blurRadius: 3)
  ]);
  final TextStyle end = TextStyle(color: Colors.white, fontSize: 20, shadows: [
    Shadow(offset: Offset(1, 1), color: Colors.purple, blurRadius: 3)
  ]);

  TextStyle _style;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          alignment: Alignment.center,
          color: Colors.grey.withAlpha(22),
          width: 300,
          height: 100,
          child: AnimatedDefaultTextStyle(
            textAlign: TextAlign.start,
            softWrap: true,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            style: _style,
            onEnd: () => print('End'),
            child: Text(
              '张风捷特烈',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }

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


name: InputDecorator基本使用
subtitle: 【decoration】 : 装饰对象 【InputDecoration】 【textAlign】 : 文字对齐方式 【TextAlign】 【child】 : 子组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class InputDecoratorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InputDecorator(
        decoration: InputDecoration(),
        child: EditableText(
            controller: TextEditingController(text:'hello'),
            focusNode: FocusNode(),
            style: TextStyle(fontSize: 12,color: Colors.black),
            cursorColor: Colors.blue,
            backgroundCursorColor: Colors.orange,
        ),
      ),
    );
  }
}


name: Checkbox的三态
subtitle: 【tristate】 : 是否是三态 【double】 onChanged时,
code:
import 'package:flutter/material.dart';
class TristateCheckBok extends StatefulWidget {
  @override
  _TristateCheckBokState createState() => _TristateCheckBokState();
}

class _TristateCheckBokState extends State<TristateCheckBok> {
  bool _checked = false;
  final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: colors
          .map((e) =>
          Checkbox(
              value: _checked,
              tristate: true,
              checkColor: Colors.white,
              activeColor: e,
              onChanged: (v) {
                print(v);
                setState(() => _checked = v);
              }))
          .toList(),
    );
  }
}


name: Checkbox基础用法
subtitle:
      
【value】 : 是否选中   【double】
【checkColor】: 选中时✔️gou颜色 【Color】
【activeColor】: 选中时框内颜色 【Color】
【onChanged】: 状态改变事件 【Function(bool)】,

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

class _CustomCheckboxState extends State<CustomCheckbox> {
  bool _checked = false;
  final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: colors
          .map((e) =>
          Checkbox(
              value: _checked,
              checkColor: Colors.white,
              activeColor: e,
              onChanged: (v) =>
                  setState(() => _checked = v)))
          .toList(),
    );
  }
}


name: CupertinoNavigationBar基本用法
subtitle:
      
【leading】 : 左侧组件   【Widget】
【middle】 : 中间组件   【Widget】
【trailing】 : 尾部组件   【Widget】
【backgroundColor】 : 背景色   【Color】
【padding】 : 内边距   【EdgeInsetsDirectional】
【border】 : 边线   【Border】

code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoNavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoNavigationBar(
      leading: Icon(
        CupertinoIcons.back,
        size: 25,
        color: Colors.blue,
      ),
      middle: Text("风雪雅舍"),
      trailing: Image.asset(
        "assets/images/icon_head.webp",
        width: 25.0,
        height: 25.0,
      ),
      backgroundColor: Color(0xfff1f1f1),
      padding: EdgeInsetsDirectional.only(start: 10,end: 20),
      border: Border.all(color: Colors.transparent),
    );
  }
}


name: CupertinoSwitch基本使用
subtitle:
      
【value】 : 是否选中   【double】
【activeColor】 : 激活态颜色   【Color】
【onChanged】 : 切换回调   【Function(double)】

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

class _CustomCupertinoSwitchState extends State<CustomCupertinoSwitch> {
  final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];

  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: colors
          .map((e) => CupertinoSwitch(
          value: _checked,
          activeColor: e,
          onChanged: (v) {
            setState(() => _checked = v);
          }))
          .toList(),
    );
  }
}


name: TextField基本用法
subtitle:
      
【controller】 : 控制器   【TextEditingController】
【style】 : 文字样式   【TextStyle】
【decoration】 : 装饰线   【InputDecoration】
【onEditingComplete】 : 输入完成事件   【Function()】
【onSubmitted】 : 提交事件   【Function(String)】
【onChanged】 : 输入事件   【Function(String)】

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

class _CustomTextFieldState extends State<CustomTextField> {
  final FocusNode _focusNode = FocusNode();
  TextEditingController _controller;

  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300,
        child: TextField(
          controller: _controller,
          style: TextStyle(color: Colors.blue),
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'username',
          ),
          onEditingComplete: () {
            print('onEditingComplete');
          },
          onChanged: (v) {
            print('onChanged:' + v);
          },
          onSubmitted: (v) {
            FocusScope.of(context).requestFocus(_focusNode);
            print('onSubmitted:' + v);
            _controller.clear();
          },
        ));
  }
}


name: TextField行数和cursor
subtitle:
      
【minLines】 : 最小行数   【int】
【maxLines】 : 最大行数   【int】
【cursorRadius】 : 光标半径   【Radius】
【cursorColor】 : 光标颜色   【Color】
【cursorWidth】 : 光标宽度   【double】
【showCursor】 : 是否显示光标   【bool】
【autofocus】 : 自动聚焦   【bool】

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

class _CursorTextFieldState extends State<CursorTextField> {
  final FocusNode _focusNode = FocusNode();

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        _buildSubmitBtn(),
        _buildTextField(context),
      ],
    );
  }

  Container _buildTextField(BuildContext context) {
    return Container(
      width: 300,
      child: TextField(
        style: TextStyle(color: Colors.blue),
        minLines: 3,
        maxLines: 5,
        cursorColor: Colors.green,
        cursorRadius: Radius.circular(3),
        cursorWidth: 5,
        showCursor: true,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(10),
          hintText: "请输入...",
          border: OutlineInputBorder(),
        ),
        onChanged: (v) {},
      ),
    );
  }

  _buildSubmitBtn() => FlatButton(
      color: Colors.blue,
      child: Text(
        "提交",
        style: TextStyle(color: Colors.white, fontSize: 16),
      ),
      onPressed: () => FocusScope.of(context).requestFocus(_focusNode));
}


name: decoration的复杂装饰
subtitle:
      
InputDecoration有非常多的装饰点,对应点缀见代码:
border: 边线相关
helper: 左下角相关提示
counter: 右下角相关提示
prefix: 输入框内部最左侧
suffix: 输入框内部最右侧
label: 无焦点时文字
label: 无焦点时文字
hint: 提示文字相关
border: 边线相关

code:
import 'package:flutter/material.dart';
class ComplexTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
        decoration: InputDecoration(
      border: OutlineInputBorder(),
      focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.blue),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), bottomLeft: Radius.circular(10))),
      enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.deepPurpleAccent),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), bottomLeft: Radius.circular(10))),
      labelText: 'username',
      labelStyle: TextStyle(color: Colors.purple),
      helperText: "help me",
      helperStyle: TextStyle(color: Colors.blue),

      suffixText: "suffix",
      suffixIcon: Icon(Icons.done),
      suffixStyle: TextStyle(color: Colors.green),

      counterText: "counter",
      counterStyle: TextStyle(color: Colors.orange),

      prefixText: "ID  ",
      prefixStyle: TextStyle(color: Colors.blue),
      prefixIcon: Icon(Icons.language),

      fillColor: Color(0x110099ee),
      filled: true,

      //  errorText: "error",
      //  errorMaxLines: 1,
      //  errorStyle: TextStyle(color: Colors.red),
      //  errorBorder: UnderlineInputBorder(),

      hintText: "请输入用户名",
      hintMaxLines: 1,
      hintStyle: TextStyle(color: Colors.black38),
      icon: Icon(Icons.assignment_ind),
    ));
  }
}


name: AnimatedPhysicalModel基本使用
subtitle:
      
【color】 : 背景色   【Color】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【shape】 : 形状   【BoxShape】
【elevation】 : 影深   【double】
【borderRadius】 : 圆角   【BorderRadius】
【shadowColor】 : 阴影色   【Color】
【child】 : 子组件   【Widget】

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

class _AnimatedPhysicalModelDemoState extends State<AnimatedPhysicalModelDemo> {
  bool flag = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          width: 150,
          height: 150,
          child: AnimatedPhysicalModel(
            duration: Duration(seconds: 2),
            curve: Curves.fastOutSlowIn,
            shadowColor: flag?Colors.orange:Colors.purple,
            elevation: flag?10:5,
            child: Image.asset(
              'assets/images/caver.webp',
              fit: BoxFit.cover,
            ),
            borderRadius: BorderRadius.all(Radius.circular(flag? 10:75)),
            clipBehavior: Clip.hardEdge,
            shape: BoxShape.rectangle,
            color: Colors.deepPurpleAccent,
            onEnd: () {
              print('----onEnd---');
            },
          ),
        ),
      ],
    );
  }

  Widget _buildSwitch() {
    return Switch(
        value: flag,
        onChanged: (v) {
          setState(() {
            flag = v;
          });
        });
  }
}


name: CupertinoSegmentedControl的颜色
subtitle:
      
【unselectedColor】 : 未选中色   【Color】
【selectedColor】 : 选中色   【Color<T>】
【pressedColor】 : 按下色   【Color】
【borderColor】 : 边线色   【Color】

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

class _CupertinoSegmentedControlColorState
    extends State<CupertinoSegmentedControlColor> {
  var _value = 1;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CupertinoSegmentedControl<int>(
        unselectedColor: Colors.yellow,
        selectedColor: Colors.green,
        pressedColor: Colors.blue,
        borderColor: Colors.red,
        groupValue: _value,
        onValueChanged: _onValueChanged,
        padding: EdgeInsets.only(top: 20),
        children: {
          1: Padding(
            padding: EdgeInsets.only(left: 20, right: 20),
            child: Text("混沌战士"),
          ),
          2: Text("青眼白龙"),
          3: Text("黑魔术士"),
        },
      ),
    );
  }

  void _onValueChanged(int value) {
    setState(() {
      _value=value;
    });
  }
}


name: iOS页签基本使用
subtitle:
      
【children】 : 组件Map   【Map<T, Widget>】
【onValueChanged】 : 值改变回调   【ValueChanged<T>】
【groupValue】 : 选中值   【T】
【padding】 : 内边距   【EdgeInsetsGeometry】

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

class _CupertinoSegmentedControlDemoState
    extends State<CupertinoSegmentedControlDemo> {
  var _value = 1;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CupertinoSegmentedControl<int>(
        groupValue: _value,
        onValueChanged: _onValueChanged,
        padding: EdgeInsets.only(top: 20),
        children: {
          1: Padding(
            padding: EdgeInsets.only(left: 20, right: 20),
            child: Text("混沌战士"),
          ),
          2: Text("青眼白龙"),
          3: Text("黑魔术士"),
        },
      ),
    );
  }

  void _onValueChanged(int value) {
    setState(() {
      _value=value;
    });
  }
}


name: Slider基本使用
subtitle:
      
【value】 : 数值   【double】
【min】 : 最小值   【double】
【max】 : 最大值   【double】
【activeColor】 : 激活颜色   【Color】
【inactiveColor】 : 非激活颜色   【Color】
【onChanged】 : 改变时回调   【Function(double)】

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

class _CustomSliderState extends State<CustomSlider> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('当前值:${_value.toStringAsFixed(1)}'),
        Slider(
            value: _value,
            min: 0.0,
            max: 360.0,
            activeColor: Colors.orangeAccent,
            inactiveColor: Colors.green.withAlpha(99),
            onChanged: (value) {
              setState(() {
                _value = value;
              });
            }),
      ],
    );
  }
}


name: Slider的分段与标签
subtitle:
      
【divisions】 : 分段数   【int】
【label】 : 提示气泡文字   【String】
【onChangeStart】 : 开始滑动时监听   【Function(double)】
【onChangeEnd】 : 滑动结束时监听   【Function(double)】

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

class _DivisionsSliderState extends State<DivisionsSlider> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Slider(
        value: _value,
        min: 0.0,
        max: 360.0,
        divisions: 10,
        label: '${_value.toStringAsFixed(1)}',
        activeColor: Colors.orangeAccent,
        inactiveColor: Colors.green.withAlpha(99),
        onChangeStart: (value) {
          print('开始滑动:$value');
        },
        onChangeEnd: (value) {
          print('滑动结束:$value');
        },
        onChanged: (value) {
          setState(() {
            _value = value;
          });
        });
  }
}


name: CupertinoPageScaffold基本用法
subtitle:
      
【child】 : 内容   【Widget】
【backgroundColor】 : 背景色   【Color】
【navigationBar】 : 头部   【ObstructingPreferredSizeWidget】

code:
import 'package:flutter/cupertino.dart';
class CustomCupertinoPageScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 300,
      child: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          leading: Icon(CupertinoIcons.reply),
          trailing: Icon(CupertinoIcons.share),
          middle: Text('Flutter Unit'),
        ),
        backgroundColor: CupertinoColors.systemBackground,
        child: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}


name: DefaultTabController基本使用
subtitle: 【length】 : 页签数量 【int】 【initialIndex】 : 初始页签索引 【int】 【child】 : 组件 【Widget】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class DefaultTabControllerDemo extends StatelessWidget {
  final List<Tab> tabs = [
    Tab(text: '青眼白龙'),
    Tab(text: '黑魔术师'),
    Tab(text: '混沌战士'),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: DefaultTabController(
        length: tabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text("DefaultTabController"),
            bottom: TabBar(
              tabs: tabs,
            ),
          ),
          body: TabBarView(
            children: tabs.map((Tab tab) {
              return Center(
                child: Text(
                  tab.text,
                  style: const TextStyle(fontSize: 20),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}


name: Stepper基本使用
subtitle:
      
【steps】 : 步骤列表   【List<Step>】
【currentStep】 : 当前步骤   【double】
【onStepTapped】 : 点击回调   【ValueChanged<int>】
【onStepCancel】 : 上一步回调  【VoidCallback】
【controlsBuilder】 : 控制器构造  【ControlsWidgetBuilder】

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

class _StepperDemoState extends State<StepperDemo> {
  int _position = 0;

  final stepsData = {
    "填写表单":'请按表单填写个人信息。',
    "邮箱校验":'已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。',
    "注册完成":'恭喜您，注册完成！',
  };

  final steps = [
    Step(
      title: Text("填写表单"),
      content: Container(height: 60, child: Text("请按表单填写个人信息")),
    ),
    Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")),
    Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Stepper(
          type:StepperType.horizontal,
          currentStep: _position,
          onStepTapped: (index) {
            setState(() {
              _position = index;
            });
          },
          onStepContinue: () {
            setState(() {
              if (_position < 2) {
                _position++;
              }
            });
          },
          onStepCancel: () {
            if (_position > 0) {
              setState(() {
                _position--;
              });
            }
          },
          controlsBuilder: (_,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: <Widget>[
                RaisedButton(
                  color: Colors.blue,
                  shape: CircleBorder(
                    side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
                  ),
                  onPressed: onStepContinue,
                  child: Icon(
                    Icons.check,
                    color: Colors.white,
                  ),
                ),
                RaisedButton(
                  color: Colors.red,
                  shape: CircleBorder(
                    side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
                  ),
                  onPressed: onStepCancel,
                  child: Icon(
                    Icons.keyboard_backspace,
                    color: Colors.white,
                  ),
                ),
              ],
            );
          },
          steps: stepsData.keys.map((e){
            bool isActive = stepsData.keys.toList().indexOf(e) ==_position;
            return Step(
            title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),),
            isActive: isActive,
            state: _getState(stepsData.keys.toList().indexOf(e)),
            content: Container(height: 60, child: Text(stepsData[e])),
          );
          }).toList()),
    );
  }
  _getState(index){
    if(_position==index) return StepState.editing;
    if(_position>index) return StepState.complete;
    return StepState.indexed;
  }
}


name: Stepper的方向
subtitle: 【type】 : 方向 【StepperType】
code:
import 'package:flutter/material.dart';
class VerticalStepper extends StatefulWidget {
  @override
  _VerticalStepperState createState() => _VerticalStepperState();
}

class _VerticalStepperState extends State<VerticalStepper> {
  int _position = 0;

  final stepsData = {
    "填写表单": '请按表单填写个人信息。',
    "邮箱校验": '已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。',
    "注册完成": '恭喜您，注册完成！',
  };

  final steps = [
    Step(
      title: Text("填写表单"),
      content: Container(height: 60, child: Text("请按表单填写个人信息")),
    ),
    Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")),
    Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stepper(
          type: StepperType.vertical,
          currentStep: _position,
          onStepTapped: (index) {
            setState(() {
              _position = index;
            });
          },
          onStepContinue: () {
            setState(() {
              if (_position < 2) {
                _position++;
              }
            });
          },
          onStepCancel: () {
            if (_position > 0) {
              setState(() {
                _position--;
              });
            }
          },
          controlsBuilder: (_,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: <Widget>[
                RaisedButton(
                  color: Colors.blue,
                  shape: CircleBorder(
                    side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
                  ),
                  onPressed: onStepContinue,
                  child: Icon(
                    Icons.check,
                    color: Colors.white,
                  ),
                ),
                RaisedButton(
                  color: Colors.red,
                  shape: CircleBorder(
                    side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
                  ),
                  onPressed: onStepCancel,
                  child: Icon(
                    Icons.keyboard_backspace,
                    color: Colors.white,
                  ),
                ),
              ],
            );
          },
          steps: stepsData.keys.map((e) {
            bool isActive = stepsData.keys.toList().indexOf(e) == _position;
            return Step(
              title: Text(
                e,
                style: TextStyle(color: isActive ? Colors.blue : Colors.black),
              ),
              isActive: isActive,
              state: _getState(stepsData.keys.toList().indexOf(e)),
              content: Container(height: 60, child: Text(stepsData[e])),
            );
          }).toList()),
    );
  }

  _getState(index) {
    if (_position == index) return StepState.editing;
    if (_position > index) return StepState.complete;
    return StepState.indexed;
  }
}


name: AnimatedAlign基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【alignment】 : 对齐方式   【AlignmentGeometry】
【curve】 : 动画曲线   【Duration】
【padding】 : 内边距   【EdgeInsetsGeometry】

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

class _CustomAnimatedAlignState extends State<CustomAnimatedAlign> {
  final Alignment start = Alignment(0, 0);
  final Alignment end = Alignment.bottomRight;

  Alignment _alignment;

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

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

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


name: CupertinoActivityIndicator基本使用
subtitle: 【animating】 : 是否loading动画 【bool】 【radius】 : 半径 【double】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoActivityIndicator extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Wrap(
      spacing: 20,
      children: <Widget>[
        CupertinoActivityIndicator(
          animating: true,
          radius: 25,
        ),
        CupertinoActivityIndicator(
          animating: false,
          radius: 25,
        )
      ],
    );
  }
}


name: AnimatedContainer基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【color】 : 颜色   【Color】
【width】 : 宽   【double】
【height】 : 高   【double】
【alignment】 : 对齐   【AlignmentGeometry】
【decoration】 : 装饰   【Decoration】
【constraints】 : 约束   【BoxConstraints】
【transform】 : 变化   【Matrix4】
【margin】 : 外边距   【EdgeInsetsGeometry】
【padding】 : 内边距   【EdgeInsetsGeometry】

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

class _CustomAnimatedContainerState extends State<CustomAnimatedContainer> {
  final Decoration startDecoration = BoxDecoration(
      color: Colors.blue,
      image: DecorationImage(
          image: AssetImage('assets/images/wy_200x300.webp'), fit: BoxFit.cover),
      borderRadius: BorderRadius.all(Radius.circular(20)));
  final Decoration endDecoration = BoxDecoration(
      image: DecorationImage(
          image: AssetImage('assets/images/wy_200x300.webp'), fit: BoxFit.cover),
      color: Colors.orange,
      borderRadius: BorderRadius.all(Radius.circular(50)));

  final Alignment startAlignment = Alignment(0, 0);
  final Alignment endAlignment = Alignment.topLeft + Alignment(0.2, 0.2);

  final startHeight = 100.0;
  final endHeight = 50.0;

  Decoration _decoration;
  double _height;
  Alignment _alignment;

  @override
  void initState() {
    _decoration = startDecoration;
    _height = startHeight;
    _alignment=startAlignment;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        AnimatedContainer(
          duration: Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
          alignment: _alignment,
          color: Colors.grey.withAlpha(22),
          width: 200,
          height: 120,
          child: UnconstrainedBox(
            child: AnimatedContainer(
              duration: Duration(seconds: 1),
              curve: Curves.fastOutSlowIn,
              decoration: _decoration,
              onEnd: () => print('End'),
              height: _height,
              width: _height,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildSwitch() => Switch(
          value: _height == endHeight,
          onChanged: (v) {
            setState(() {
              _height = v ? endHeight : startHeight;
              _decoration = v ? endDecoration : startDecoration;
              _alignment = v ? endAlignment : startAlignment;
            });
          });
}


name: ExpansionPanelList基本使用
subtitle:
      
【children】 : 子组件列表   【List<Widget>】
【animationDuration】 : 动画时长   【Duration】
【expansionCallback】 : 展开回调   【List<Widget>】
【onPressed】 : 点击事件  【Function()】

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

class _CustomExpansionPanelListState extends State<CustomExpansionPanelList> {
  var data = <Color>[
    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],
  ];
  int _position = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      child: ExpansionPanelList(
        children: data.map((color) => _buildItem(color)).toList(),
        animationDuration: Duration(milliseconds: 200),
        expansionCallback: (index, open) {
          setState(() => _position=open?-1:index);
        },
      ),
    );
  }

  ExpansionPanel _buildItem(Color color) {
    return ExpansionPanel(
        isExpanded: data.indexOf(color) == _position,
        canTapOnHeader: true,
        headerBuilder: (ctx, index) => Center(
              child: Wrap(
                crossAxisAlignment: WrapCrossAlignment.center,
                children: <Widget>[
                  Container(
                    height: 30,
                    width: 30,
                    decoration:
                        BoxDecoration(color: color, shape: BoxShape.circle),
                  ),
                  Container(
                    width: 120,
                    alignment: Alignment.center,
                    height: 50,
                    child: Text(
                      colorString(color),
                      style: TextStyle(color: Colors.black),
                    ),
                  ),
                ],
              ),
            ),
        body: 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)
            ]),
          ),
        ));
  }

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


name: RangeSlider基本使用
subtitle:
      
【values】 : 数值   【RangeValues】
【min】 : 最小值   【double】
【max】 : 最大值   【double】
【divisions】 : 分段数   【int】
【label】 : 提示气泡文字   【String】
【activeColor】 : 激活颜色   【Color】
【inactiveColor】 : 非激活颜色   【Color】
【onChangeStart】 : 开始滑动时监听   【Function(RangeValues)】
【onChangeEnd】 : 滑动结束时监听   【Function(RangeValues)】
【onChanged】 : 改变时回调   【Function(RangeValues)】

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

class _CustomRangeSliderState extends State<CustomRangeSlider> {
  RangeValues _rangeValues = RangeValues(90, 270);

  @override
  Widget build(BuildContext context) {
    return RangeSlider(
        values: _rangeValues,
        divisions: 180,
        min: 0.0,
        max: 360.0,
        labels: RangeLabels("${_rangeValues.start.toStringAsFixed(1)}",
            "${_rangeValues.end.toStringAsFixed(1)}"),
        activeColor: Colors.orangeAccent,
        inactiveColor: Colors.green.withAlpha(99),
        onChangeStart: (value) {
          print('开始滑动:$value');
        },
        onChangeEnd: (value) {
          print('滑动结束:$value');
        },
        onChanged: (value) {
          setState(() {
            _rangeValues = value;
          });
        });
  }
}


name: YearPicker基本使用
subtitle:
      
【selectedDate】 : 选中日期   【DateTime】
【firstDate】 : 最前日期限制   【DateTime】
【lastDate】 : 最后日期限制   【DateTime】
【onChanged】 : 点击回调  【Function(DateTime)】

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

class _CustomYearPickerState extends State<CustomYearPicker> {
  DateTime _date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Container(
      height:150,
      child: YearPicker(
        selectedDate: _date,
        onChanged: (date) => setState(() => _date = date),
        firstDate: DateTime(2018),
        lastDate: DateTime(2030),
      ),
    );
  }
}


name: SizeTransition基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【axis】 : 轴向*2 【Axis】 【sizeFactor】 : 动画 【Animation<double>】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomSizeTransition extends StatefulWidget {
  @override
  _CustomSizeTransitionState createState() => _CustomSizeTransitionState();
}

class _CustomSizeTransitionState extends State<CustomSizeTransition>
    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: 20,
        children: <Widget>[
          SizeTransition(
            axis: Axis.horizontal,
            sizeFactor: CurvedAnimation(parent: _ctrl, curve: Curves.linear),
            child: Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.orange,
                child: Icon(Icons.android, color: Colors.green, size: 80)),
          ),
          SizeTransition(
            axis: Axis.vertical,
            sizeFactor: CurvedAnimation(parent: _ctrl, curve: Curves.linear),
            child: Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.orange,
                child: Icon(Icons.android, color: Colors.green, size: 80)),
          ),
        ],
      ),
    );
  }
}


name: RotationTransition基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【turns】 : 是否消失 【Animation<double>】
code:
import 'package:flutter/material.dart';
class CustomRotationTransition extends StatefulWidget {
  @override
  _CustomRotationTransitionState createState() => _CustomRotationTransitionState();
}

class _CustomRotationTransitionState extends State<CustomRotationTransition> 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: RotationTransition(
          turns: CurvedAnimation(parent: _ctrl, curve: Curves.linear),
          child: Icon(Icons.android,color: Colors.green,size: 60),
        ),
      ),
    );
  }
}


name: AnimatedSwitcher基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长  【Duration】
【switchOutCurve】 : 切出曲线  【Curves】
【switchInCurve】 : 切入曲线  【Curves】
【switchInCurve】 : 切入曲线  【Curves】
【transitionBuilder】 : 动画构造器  【Widget Function(Widget, Animation<double>)】

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

class _CustomAnimatedSwitcherState extends State<CustomAnimatedSwitcher> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          _buildMinusBtn(),
          SizedBox(width:80,child: _buildAnimatedSwitcher(context)),
          _buildAddBtn()
        ],
      ),
    );
  }

  Widget _buildAnimatedSwitcher(BuildContext context) =>
      AnimatedSwitcher(
          duration: const Duration(milliseconds: 400),
          transitionBuilder: (Widget child, Animation<double> animation) =>
              ScaleTransition(
                  child: RotationTransition(turns: animation, child: child),
                  scale: animation),
          child: Text(
            '$_count',
            key: ValueKey<int>(_count),
            style: Theme.of(context).textTheme.display3,
          ),
        );

  Widget _buildMinusBtn() {
   return MaterialButton(
        padding: EdgeInsets.all(0),
        textColor: Color(0xffFfffff),
        elevation: 3,
        color: Colors.red,
        highlightColor: Color(0xffF88B0A),
        splashColor: Colors.red,
        child: Icon(
          Icons.remove,
          color: Colors.white,
        ),
       shape: CircleBorder(
         side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
       ),
        onPressed: () => setState(() => _count -= 1));
  }

  Widget _buildAddBtn() => 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)),
        ),
        onPressed: () => setState(() => _count += 1));
}


name: 可从资源文件和网络加载图片
subtitle: Image.asset加载资源图片,
code:
import 'package:flutter/material.dart';
class LoadImage extends StatelessWidget {
  final assetsImagePath = "assets/images/icon_head.webp";
  final assetsGif = "assets/images/pica.gif";
  final netImageUrl = "https://user-gold-cdn.xitu.io"
      "/2019/7/24/16c225e78234ec26?"
      "imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1";

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: <Widget>[
        _loadFromAssets(),
        _loadFromNet(),
      ],
    );
  }

  Widget _loadFromAssets() => Wrap(
        spacing: 10,
        children: <Widget>[
          Image.asset(assetsImagePath, height: 80, width: 80),
          Image.asset(assetsGif, height: 80, width: 80),
        ],
      );

  Widget _loadFromNet() => Image.network(netImageUrl, height: 80);
}


name: 图片颜色及混合模式
subtitle: 【color】 : 颜色 【Color】 【colorBlendMode】: 混合模式*29 【BlendMode】
code:
import 'package:flutter/material.dart';
class BlendModeImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: BlendMode.values
          .toList()
          .map((mode) => Column(children: <Widget>[
        Container(
            margin: EdgeInsets.all(5),
            width: 60,
            height: 60,
            color: Colors.red,
            child: Image(
                image: AssetImage("assets/images/icon_head.webp"),
                color: Colors.blue.withAlpha(88),
                colorBlendMode: mode)),
        Text(mode.toString().split(".")[1])
      ]))
          .toList(),
    );
  }
}


name: 图片对齐模式
subtitle: 【alignment】 : 颜色 【AlignmentGeometry】 常用Alignment类的九个静态常量，但也可定制位置
code:
import 'package:flutter/material.dart';
class AlignmentImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var alignment = [
      Alignment.center,
      Alignment.centerLeft,
      Alignment.centerRight,
      Alignment.topCenter,
      Alignment.topLeft,
      Alignment.topRight,
      Alignment.bottomCenter,
      Alignment.bottomLeft,
      Alignment.bottomRight
    ]; //测试数组
    var imgLi = alignment
        .map((alignment) => //生成子Widget列表
    Column(children: <Widget>[
      Container(
          margin: EdgeInsets.all(5),
          width: 90,
          height: 60,
          color: Colors.grey.withAlpha(88),
          child: Image(
            image: AssetImage("assets/images/wy_30x20.webp"),
            alignment: alignment,
          )),
      Text(alignment.toString())
    ]))
        .toList();
    var imageAlignment = Wrap(children: imgLi);
    return imageAlignment;
  }
}


name: 图片实现局部放大
subtitle: 【centerSlice】 : 保留的区域 【Rect】
code:
import 'package:flutter/material.dart';
class CenterSliceImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 80,
      child: Image.asset(
        "assets/images/right_chat.png",
        centerSlice: Rect.fromLTRB(9, 27, 60, 27 + 1.0),
        fit: BoxFit.fill,
      ),
    );
  }
}


name: 图片重复模式
subtitle: 【repeat】 : 重复模式*4 【ImageRepeat】
code:
import 'package:flutter/material.dart';
class RepeatImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: ImageRepeat.values
          .toList()
          .map((mode) => Column(children: <Widget>[
        Container(
            margin: EdgeInsets.all(5),
            width: 150,
            height: 60,
            color: Colors.red,
            child: Image(
                image: AssetImage("assets/images/wy_30x20.webp"),
                repeat: mode)),
        Text(mode.toString().split(".")[1])
      ]))
          .toList(),
    );
  }
}


name: 图片的适应模式
subtitle: 【fit】 : 适应模式*7 【BoxFit】,
code:
import 'package:flutter/material.dart';
class FitImage extends StatefulWidget {
  @override
  _FitImageState createState() => _FitImageState();
}

class _FitImageState extends State<FitImage> {
  bool _smallImage = false;

  @override
  Widget build(BuildContext context) {
    var imageLi = BoxFit.values
        .toList()
        .map((mode) => Column(children: <Widget>[
      Container(
          margin: EdgeInsets.all(5),
          width: 100,
          height: 80,
          color: Colors.grey.withAlpha(88),
          child: Image(
              image: AssetImage(!_smallImage
                  ? "assets/images/wy_300x200.webp"
                  : "assets/images/wy_30x20.webp"),
              fit: mode)),
      Text(mode.toString().split(".")[1])
    ]))
        .toList();

    return Wrap(
      children: [...imageLi, _buildSwitch()],
    );
  }

  Widget _buildSwitch() {
    return Container(
      alignment: Alignment.center,
      width: 200,
      height: 100,
      child: Wrap(
        crossAxisAlignment: WrapCrossAlignment.center,
        children: <Widget>[
          Text("使用小图"),
          Switch(
              value: _smallImage,
              onChanged: (b) => setState(() => _smallImage = b)),
        ],
      ),
    );
  }
}


name: AnimatedTheme基本使用
subtitle:
      
【data】 : 主题数据   【ThemeData】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【child】 : 子组件   【Widget】

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

class _AnimatedThemeDemoState extends State<AnimatedThemeDemo> {
  ThemeData startThem = ThemeData(
      primaryColor: Colors.blue,
      textTheme: TextTheme(
        headline1: TextStyle(
            color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
      ));

  ThemeData endThem = ThemeData(
      primaryColor: Colors.red,
      textTheme: TextTheme(
          headline1: TextStyle(
              color: Colors.black,
              fontSize: 16,
              fontWeight: FontWeight.normal)));

  ThemeData them;

  @override
  void initState() {
    super.initState();
    them = startThem;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        AnimatedTheme(
          data: them,
          duration: Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          onEnd: () {
            print('----onEnd---');
          },
          child: ChildContent(),
        ),
      ],
    );
  }

  Widget _buildSwitch() {
    print(them == endThem);
    return Switch(
        value: them == endThem,
        onChanged: (v) {
          setState(() {
            them = v ? endThem : startThem;
          });
        });
  }
}

class ChildContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 250,
      height: 60,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        color: Theme.of(context).primaryColor,
      ),
      padding: EdgeInsets.all(10),
      child: Text(
        'Flutter Unit',
        style: Theme.of(context).textTheme.headline1,
      ),
    );
  }
}


name: constrained属性测试
subtitle: 【constrained】 : 受约束的 【bool】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class InteractiveViewerDemo2 extends StatelessWidget {

  Widget build(BuildContext context) {
    const int _rowCount = 20;
    const int _columnCount = 4;

    return Container(
      width: 300,
      height: 200,
      child: InteractiveViewer(
        constrained: false,
        scaleEnabled: false,
        child: Table(
          columnWidths: <int, TableColumnWidth>{
            for (int column = 0; column < _columnCount; column += 1)
              column: const FixedColumnWidth(150.0),
          },
          children: buildRows(_rowCount, _columnCount),
        ),
      ),
    );
  }

  List<TableRow> buildRows(int rowCount, int columnCount) {
    return <TableRow>[
          for (int row = 0; row < rowCount; row += 1)
            TableRow(
              children: <Widget>[
                for (int column = 0; column < columnCount; column += 1)
                  Container(
                    margin: EdgeInsets.all(2),
                    height: 50,
                    alignment: Alignment.center,
                    color: _colorful(row,column),
                    child: Text('($row,$column)',style: TextStyle(fontSize: 20,color: Colors.white),),
                  ),
              ],
            ),
        ];
  }

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

  _colorful(int row, int column ) => row % 2==0?colors[column]:colors2[column];
}


name: InteractiveViewer基本使用
subtitle:
【alignPanAxis】 : 沿轴拖动   【bool】
【boundaryMargin】 : 边界边距   【EdgeInsets】
【panEnabled】 : 是否可平移   【bool】
【scaleEnabled】 : 是否可缩放   【bool】
【maxScale】 : 最大放大倍数   【double】
【minScale】 : 最小缩小倍数   【double】
【onInteractionEnd】 : 交互结束回调   【GestureScaleEndCallback】
【onInteractionStart】 : 交互开始回调   【GestureScaleStartCallback】
【onInteractionUpdate】 : 交互更新回调   【GestureScaleUpdateCallback】
【child】 : 游标颜色   【Widget】

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

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      color: Colors.grey.withAlpha(33),
      child: InteractiveViewer(
        boundaryMargin: EdgeInsets.all(40.0),
        maxScale: 2.5,
        minScale: 0.3,
        panEnabled: true,
        scaleEnabled: true,
        child: Container(
          child: Image.asset('assets/images/caver.webp'),
        ),
        onInteractionStart: _onInteractionStart,
        onInteractionUpdate: _onInteractionUpdate,
        onInteractionEnd: _onInteractionEnd,
      ),
    );
  }

  void _onInteractionStart(ScaleStartDetails details) {
    print('onInteractionStart----' + details.toString());
  }

  void _onInteractionUpdate(ScaleUpdateDetails details) {
    print('onInteractionUpdate----' + details.toString());
  }

  void _onInteractionEnd(ScaleEndDetails details) {
    print('onInteractionEnd----' + details.toString());
  }
}


name: 变换控制器的使用
subtitle: 【transformationController】 : 变换控制器 【TransformationController】
code:
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class InteractiveViewerDemo3 extends StatefulWidget {
  @override
  _InteractiveViewerDemo3State createState() => _InteractiveViewerDemo3State();
}

class _InteractiveViewerDemo3State extends State<InteractiveViewerDemo3>
    with SingleTickerProviderStateMixin {
  final TransformationController _transformationController =
      TransformationController();
  Animation<Matrix4> _animationReset;
  AnimationController _controllerReset;

  void _onAnimateReset() {
    _transformationController.value = _animationReset.value;
    if (!_controllerReset.isAnimating) {
      _animationReset?.removeListener(_onAnimateReset);
      _animationReset = null;
      _controllerReset.reset();
    }
  }

  void _animateResetInitialize() {
    _controllerReset.reset();
    _animationReset = Matrix4Tween(
      begin: _transformationController.value,
      end: Matrix4.identity(),
    ).animate(_controllerReset);
    _animationReset.addListener(_onAnimateReset);
    _controllerReset.forward();
  }

  void _animateResetStop() {
    _controllerReset.stop();
    _animationReset?.removeListener(_onAnimateReset);
    _animationReset = null;
    _controllerReset.reset();
  }

  void _onInteractionStart(ScaleStartDetails details) {
    if (_controllerReset.status == AnimationStatus.forward) {
      _animateResetStop();
    }
  }

  @override
  void initState() {
    super.initState();
    _controllerReset = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 400),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.vertical,
      spacing: 10,
      crossAxisAlignment: WrapCrossAlignment.center,
      alignment: WrapAlignment.center,
      children: [
        Container(
          height: 150,
          color: Colors.grey.withAlpha(33),
          child: InteractiveViewer(
            boundaryMargin: EdgeInsets.all(40),
            transformationController: _transformationController,
            minScale: 0.1,
            maxScale: 1.8,
            onInteractionStart: _onInteractionStart,
            child: Container(
              child: Image.asset('assets/images/caver.webp'),
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            _buildButton(),
            _buildButton2(),
            _buildButton3(),
          ],
        )
      ],
    );
  }

  Widget _buildButton() {
    return MaterialButton(
        child: Icon(
          Icons.refresh,
          color: Colors.white,
        ),
        color: Colors.green,
        shape: CircleBorder(
          side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
        ),
        onPressed: _animateResetInitialize);
  }

  var _x = 0.0;

  Widget _buildButton2() {
    return MaterialButton(
        child: Icon(
          Icons.navigate_before,
          color: Colors.white,
        ),
        color: Colors.green,
        shape: CircleBorder(
          side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
        ),
        onPressed: () {
          var temp = _transformationController.value.clone();
          temp.translate(_x - 4);
          _transformationController.value = temp;
        });
  }

  Widget _buildButton3() {
    return MaterialButton(
        child: Icon(
          Icons.navigate_next,
          color: Colors.white,
        ),
        color: Colors.green,
        shape: CircleBorder(
          side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
        ),
        onPressed: () {
          var temp = _transformationController.value.clone();
          temp.translate(_x + 4);
          _transformationController.value = temp;
        });
  }
}


name: ValueListenableBuilder基本使用
subtitle:
【builder】: 组件构造器   【ValueWidgetBuilder<T>】
【valueListenable】: 监听值    【ValueListenable<T>】
【child】: 子组件    【Widget】

code:
import 'package:flutter/material.dart';
class ValueListenableBuilderDemo extends StatelessWidget {
  ValueListenableBuilderDemo({Key key}) : super(key: key);

  final ValueNotifier<int> _counter = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: Scaffold(
        appBar: AppBar(title: Text("ValueListenableBuilder")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              ValueListenableBuilder<int>(
                builder: _buildWithValue,
                valueListenable: _counter,
                child: const Text('I am Child!'),
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.plus_one),
          onPressed: () => _counter.value += 1,
        ),
      ),
    );
  }

  Widget _buildWithValue(BuildContext context, int value, Widget child) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Text('$value'),
        child,
      ],
    );
  }
}


name: ReorderableListView基本使用
subtitle:
      
【children】 : 子组件列表   【List<Widget>】
【header】 : 头部组件   【Widget】
【padding】 : 内边距   【EdgeInsets】
【onReorder】 : 调换时回调  【ReorderCallback】

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

class _CustomReorderableListViewState extends State<CustomReorderableListView> {
  var data = <Color>[
    Colors.yellow[50],
    Colors.yellow[100],
    Colors.yellow[200],
    Colors.yellow[300],
    Colors.yellow[400],
    Colors.yellow[500],
    Colors.yellow[600],
    Colors.yellow[700],
    Colors.yellow[800],
    Colors.yellow[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 250,
      child: ReorderableListView(
        padding: EdgeInsets.all(10),
        header: Container(
          color: Colors.blue,
          alignment: Alignment.center,
            height: 50,
            child: Text('长按拖拽进行换位',style: TextStyle(color: Colors.white),)),
        onReorder: _handleReorder,
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }

  void _handleReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) {
      newIndex -= 1;
    }

    setState(() {
      final element = data.removeAt(oldIndex);
      data.insert(newIndex, element);
    });

  }

  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: ReorderableListView滑动方向
subtitle: 【scrollDirection】 : 滑动方向 【Axis】 【reverse】 : 是否反向 【bool】
code:
import 'package:flutter/material.dart';
class DirectionReorderableListView extends StatefulWidget {
  @override
  _DirectionReorderableListViewState createState() => _DirectionReorderableListViewState();
}

class _DirectionReorderableListViewState extends State<DirectionReorderableListView> {
  var data = <Color>[
    Colors.yellow[50],
    Colors.yellow[100],
    Colors.yellow[200],
    Colors.yellow[300],
    Colors.yellow[400],
    Colors.yellow[500],
    Colors.yellow[600],
    Colors.yellow[700],
    Colors.yellow[800],
    Colors.yellow[900],
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: ReorderableListView(
        scrollDirection: Axis.horizontal,
        reverse: false,
        onReorder: _handleReorder,
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }

  void _handleReorder(int oldIndex, int newIndex) {
    if (oldIndex < newIndex) {
      newIndex -= 1;
    }

    setState(() {
      final element = data.removeAt(oldIndex);
      data.insert(newIndex, element);
    });

  }

  Widget _buildItem(Color color) {
    return Container(
      key: ValueKey(color)  ,
      alignment: Alignment.center,
      width: 80,
      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: DecoratedBoxTransition基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【position】 : 前/背景色  【DecorationPosition】
【decoration】 : 动画   【Animation<Decoration>】

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

class _CustomDecoratedBoxTransitionState
    extends State<CustomDecoratedBoxTransition>
    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: 200,
          height: 100,
          child: DecoratedBoxTransition(
            position: DecorationPosition.background,
            decoration: DecorationTween(
                begin: BoxDecoration(
                    color: Colors.greenAccent,
                    borderRadius: BorderRadius.all(Radius.circular(50)),
                    boxShadow: [
                      BoxShadow(
                          offset: Offset(1, 1),
                          color: Colors.purple,
                          blurRadius: 3,
                          spreadRadius: 1)
                    ]),
                end: BoxDecoration(
                    color: Colors.orange,
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    boxShadow: [
                      BoxShadow(
                          offset: Offset(1, 1),
                          color: Colors.blue,
                          blurRadius: 1,
                          spreadRadius: 0)
                    ])).animate(_ctrl),
            child: Container(
                child: Icon(Icons.android, color: Colors.white, size: 60)),
          ),
        ));
  }
}


name: ExpansionTile基本使用
subtitle:
      
【children】 : 展开内容   【List<Widget>】
【leading】 : 头左组件   【Widget】
【title】 : 头中组件   【Widget】
【trailing】 : 头尾组件   【Widget】
【backgroundColor】 : 背景色   【Color】
【onExpansionChanged】 : 折叠事件   【Function(bool)】
【initiallyExpanded】 : 是否初始时展开   【bool】

code:
import 'package:flutter/material.dart';
import '../../StatelessWidget/RadioListTile/node1_base.dart';
class CustomExpansionTile extends StatefulWidget {
  @override
  _CustomExpansionTileState createState() => _CustomExpansionTileState();
}

class _CustomExpansionTileState extends State<CustomExpansionTile> {
  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      leading: Icon(Icons.star),
      title: Text("选择语言"),
      backgroundColor: Colors.grey.withAlpha(6),
      onExpansionChanged: (value) {
        print('$value');
      },
      initiallyExpanded: false,
      children: <Widget>[CustomRadioListTile()],
    );
  }
}


name: CupertinoTabScaffold基本用法
subtitle:
      
【tabBar】 : 页签条   【CupertinoTabBar】
【backgroundColor】 : 背景色   【Color】
【controller】 : 控制器   【CupertinoTabController】
【tabBuilder】 : 页面构造器   【IndexedWidgetBuilder】

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

class _CustomCupertinoTabScaffoldState
    extends State<CustomCupertinoTabScaffold> {
  var _position = 0;
  final iconsMap = {
    //底栏图标
    "图鉴": Icons.home, "动态": Icons.toys,
    "喜欢": Icons.favorite, "手册": Icons.class_,
    "我的": Icons.account_circle,
  };

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 300,
      child: CupertinoTabScaffold(
          backgroundColor: Colors.grey.withAlpha(11),
          tabBar: _buildTabBar(),
          tabBuilder: (_, index) => _buildContent(index)),
    );
  }

  CupertinoTabBar _buildTabBar() => CupertinoTabBar(
        currentIndex: _position,
        onTap: (value) => setState(() => _position = value),
        items: iconsMap.keys
            .map((e) => BottomNavigationBarItem(
                  icon: Icon(
                    iconsMap[e],
                  ),
                  title: Text(e),
                ))
            .toList(),
        activeColor: Colors.blue,
        inactiveColor: Color(0xff333333),
        backgroundColor: Color(0xfff1f1f1),
        iconSize: 25.0,
      );

  _buildContent(int index) => Container(
      alignment: Alignment.center,
      child: Text(iconsMap.keys.toList()[index]),
    );
}


name: CupertinoTabView基本使用
subtitle:
      
【builder】 : 主页构造器   【WidgetBuilder】
【navigatorObservers】 : 路由监听器   【List<NavigatorObserver>】
【routes】 : 路由映射   【Map<String, WidgetBuilder>】
【onGenerateRoute】 : 路由工厂   【RouteFactory】

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


class CupertinoTabViewPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: CupertinoTabView(
        routes: {
          '/': (context) => HomePage(),
          '/test_detail': (context) => DetailPage(),
        },
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('我是详情页'),
      ),
      child: Center(
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {

  final String info = "CupertinoTabView 可以像 MaterialApp 一样维护一个路由栈。"
      "通过 routes 、onGenerateRoute 来构建路由，可以通过 navigatorObservers 监听路由。"
      "在这个路由栈中可以进行指定名称跳转，如下通过 /test_detail 跳到详情页。";

  @override
  Widget build(BuildContext context) {
    return  CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('我是主页'),
      ),
      child: Center(child: Column(

        children: [
          Spacer(),
          Material(child: Padding(
            padding: const EdgeInsets.only(left:18.0,right: 18,bottom: 20),
            child: Text(info),
          )),
          CupertinoButton(
            padding: EdgeInsets.only(left: 10,right: 10),
            color: Colors.blue,
            onPressed: () {
              Navigator.pushNamed(
                context, "/test_detail"
              );
            },
            child: Text("进入详情页"),
          ),
          Spacer(),
        ],
      )),
    );
  }
}


name: LongPressDraggable与DragTarget联用
subtitle:
      
【child】 : 孩子   【Widget】
【feedback】 : 拖拽时的孩子   【Widget】
【axis】 : 拖动的轴   【Axis】
【data】 : 数据   【T】
【onDragStarted】 : 开始拖拽   【Function()】
【onDragEnd】 : 结束拖拽   【Function(DraggableDetails)】
【onDragCompleted】 : 拖拽完成   【Function()】
【onDraggableCanceled】 : 拖拽取消   【Function(Velocity,Offset)】

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

class _CustomLongPressDraggableState extends State<CustomLongPressDraggable> {
  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) => LongPressDraggable<Color>(
              onDragStarted: () => setState(() => _info = '开始拖拽'),
              onDragEnd: (d) => setState(() => _info = '结束拖拽'),
              onDragCompleted: () => _info = '拖拽完成',
              onDraggableCanceled: (v, o) => _info = '拖拽取消',
          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>(
        onAccept: (data) => setState(() {
          _info='onAccept';
          _color = data;
        }),
        builder: (context, candidateData, rejectedData) => Container(
            width: 150.0,
            height: 50.0,
            color: _color,
            child: Center(
              child: Text(
                _info,
                style: TextStyle(color: Colors.white),
              ),
            )));
  }
}


name: CupertinoTimerPicker基本使用
subtitle:
      
【initialTimerDuration】 : 初始时间   【Duration】
【minuteInterval】 : 分钟间隔数   【double】
【secondInterval】 : 秒间隔数   【double】
【alignment】 : 对齐方式  【AlignmentGeometry】
【backgroundColor】 : 背景色  【Color】
【mode】 : 模式*3  【CupertinoTimerPickerMode】

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

class _CustomCupertinoTimerPickerState
    extends State<CustomCupertinoTimerPicker> {
  Duration _date = Duration(seconds: 30);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(
          '当前时间:${_date.toString()}',
          style: TextStyle(color: Colors.grey, fontSize: 16),
        ),
        _buildInfoTitle('CupertinoTimerPickerMode.hms'),
        buildPicker(CupertinoTimerPickerMode.hms),
        _buildInfoTitle('CupertinoTimerPickerMode.hm'),
        buildPicker(CupertinoTimerPickerMode.hm),
        _buildInfoTitle('CupertinoTimerPickerMode.ms'),
        buildPicker(CupertinoTimerPickerMode.ms),
      ],
    );
  }

  Widget _buildInfoTitle(info) {
    return Padding(
      padding: const EdgeInsets.only(left: 20, top: 20, bottom: 5),
      child: Text(
        info,
        style: TextStyle(
            color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget buildPicker(CupertinoTimerPickerMode mode) {
    return Container(
      margin: EdgeInsets.all(10),
      height: 150,
      child: CupertinoTimerPicker(
        mode: mode,
        initialTimerDuration: Duration(seconds: 30),
        onTimerDurationChanged: (date) {
          print(date);
          setState(() => _date = date);
        },
      ),
    );
  }
}


name: PositionedTransition基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【rect】 : 动画   【Animation<RelativeRect>】
    PositionedTransition组件只能在Stack内起作用

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

class _CustomPositionedTransitionState extends State<CustomPositionedTransition>
    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(33),
          width: 200,
          height: 100,
          child: Stack(
            children: <Widget>[
              PositionedTransition(
                rect: RelativeRectTween(
                  begin: RelativeRect.fromLTRB(0, 50, 150, 100),
                  end: RelativeRect.fromLTRB(60, 0, 150, -50),
                ).animate(_ctrl),
                child: Icon(
                  Icons.android,
                  color: Colors.green,
                  size: 50,
                ),
              )
            ],
          ),
        ));
  }
}


name: Draggable基本使用
subtitle: 【child】 : 孩子 【Widget】 【feedback】 : 拖拽时的孩子 【Widget】 【axis】 : 拖动的轴 【Axis】
code:
import 'package:flutter/material.dart';
class CustomDraggable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var axis = [null, Axis.vertical, Axis.horizontal];
    return Wrap(
        spacing: 30,
        children: axis
            .map((e) => Draggable(
                  axis: e,
                  child: Container(
                    width: 30,
                    height: 30,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Colors.blue, shape: BoxShape.circle),
                  ),
                  feedback: Container(
                    width: 30,
                    height: 30,
                    decoration: BoxDecoration(
                        color: Colors.red, shape: BoxShape.circle),
                  ),
                ))
            .toList());
  }
}


name: Draggable其他使用
subtitle: 可以根据拖拽来处理一些事件。如删除、查询、弹框等
code:
import 'package:flutter/material.dart';
class DeleteDraggable extends StatefulWidget {
  @override
  _DeleteDraggableState createState() => _DeleteDraggableState();
}

class _DeleteDraggableState extends State<DeleteDraggable> {
  List<Color> colors = [
    Colors.red,
    Colors.yellow,
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.purple,
    Colors.cyanAccent
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Wrap(
            children: _buildColors(),
            spacing: 10,
          ),
          SizedBox(
            height: 20,
          ),
          _buildDragTarget()
        ],
      ),
    );
  }

  Widget _buildDragTarget() {
    return DragTarget<int>(
        onAccept: (data) {
          setState(() {
            colors.removeAt(data);
          });
        },
        onWillAccept: (data) => data != null,
        builder: (context, candidateData, rejectedData) => Container(
            width: 50.0,
            height: 50.0,
            decoration:
            BoxDecoration(color: Colors.red, shape: BoxShape.circle),
            child: Center(
              child: Icon(Icons.delete_sweep, color: Colors.white),
            )));
  }

  List<Widget> _buildColors() => colors
      .map(
        (e) => Draggable<int>(
        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: colors.indexOf(e),
        feedback: Container(
          width: 25,
          height: 25,
          decoration: BoxDecoration(
              color: e.withAlpha(100), shape: BoxShape.circle),
        )),
  )
      .toList();
}


name: Draggable与DragTarget联用
subtitle:
      
【data】 : 数据   【T】
【onDragStarted】 : 开始拖拽   【Function()】
【onDragEnd】 : 结束拖拽   【Function(DraggableDetails)】
【onDragCompleted】 : 拖拽完成   【Function()】
【onDraggableCanceled】 : 拖拽取消   【Function(Velocity,Offset)】
【onChanged】 : 改变时回调   【Function(T)】

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

class _DraggablePageState extends State<DraggablePage> {
  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>(
          onDragStarted: () => setState(() => _info = '开始拖拽'),
          onDragEnd: (d) => setState(() => _info = '结束拖拽'),
          onDragCompleted: () => _info = '拖拽完成',
          onDraggableCanceled: (v, o) => _info = '拖拽取消',
          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) => print("onLeave: data = $data "),
        onAccept: (data) {
          print("onAccept: data = $data ");
          setState(() {
            _color = data;
          });
        },
        onWillAccept: (data) {
          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: AnimatedPositioned基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【top】 : 到父顶距离   【double】
【right】 : 到父右距离   【double】
【left】 : 到父左距离   【double】
【bottom】 : 到父底距离   【double】

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

class _CustomAnimatedPositionedState extends State<CustomAnimatedPositioned> {
  final startTop = 0.0;
  final endTop = 30.0;

  var _top = 0.0;

  @override
  void initState() {
    _top = startTop;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          color: Colors.grey.withAlpha(33),
          width: 200,
          height: 100,
          child: Stack(
            children: _buildChildren(),
          ),
        ),
      ],
    );
  }

  List<Widget> _buildChildren() => <Widget>[
        AnimatedPositioned(
          duration: Duration(seconds: 1),
          top: _top,
          left: _top * 4,
          child: Icon(
            Icons.android,
            color: Colors.green,
            size: 50,
          ),
        ),
        AnimatedPositioned(
          duration: Duration(seconds: 1),
          top: 50 - _top,
          left: 150 - _top * 4,
          child: Icon(
            Icons.android,
            color: Colors.red,
            size: 50,
          ),
        )
      ];

  Widget _buildSwitch() => Switch(
      value: _top == endTop,
      onChanged: (v) {
        setState(() {
          _top = v ? endTop : startTop;
        });
      });
}


name: DrawerController基本使用
subtitle:
      
【drawerCallback】 : 事件回调   【DrawerCallback】
【enableOpenDragGesture】 : 是否侧边滑开   【bool】
【alignment】 : 对齐方式   【DrawerAlignment】
【scrimColor】 : 背景颜色   【Color】
【child】 : Drawer组件   【Widget】

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

class _DrawerControllerDemoState extends State<DrawerControllerDemo> {
  final GlobalKey<DrawerControllerState> _drawerKey =
      GlobalKey<DrawerControllerState>();

  bool _open = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          ElevatedButton(
            onPressed: toggleDrawer,
            child: Text("显隐 Drawer"),
          ),
          Container(
            height: 200,
            child: DrawerController(
              scrimColor: Colors.blue.withAlpha(88),
              enableOpenDragGesture: true,
              key: _drawerKey,
              alignment: DrawerAlignment.start,
              drawerCallback: (value) {
                _open = value;
              },
              child: Drawer(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.red,
                  child: Text(
                    "I am Drawer!",
                    style: TextStyle(color: Colors.white, fontSize: 18),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void toggleDrawer() {
    if (_open) {
      _drawerKey.currentState?.close();
    } else {
      print('---open--$_open-------');
      _drawerKey.currentState?.open();
    }
  }
}


name: ExpandIcon基本使用
subtitle:
      
【isExpanded】 : 是否展开   【bool】
【padding】 : 内边距   【EdgeInsetsGeometry】,
【size】 : 图标大小   【double】
【color】 : 不展开时颜色   【Color】
【expandedColor】 : 展开时颜色   【Color】
【onPressed】 : 点击事件   【Function(bool)】

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

class _CustomExpandIconState extends State<CustomExpandIcon> {
  var _closed = true;

  @override
  Widget build(BuildContext context) {
    return ExpandIcon(
      isExpanded: _closed,
      padding: EdgeInsets.all(5),
      size: 30,
      color: Colors.blue,
      expandedColor: Colors.orangeAccent,
      onPressed: (value) => setState(() => _closed = !_closed),
    );
  }
}


name: TextFormField基本使用
subtitle:
      
    基本属性和TextField一致，详见之
【validator】 : 验证函数   【FormFieldValidator<String> 】
【onFieldSubmitted】 : 提交回调   【ValueChanged<String>】
【onSaved】 : 表单save时回调  【FormFieldSetter<String>】

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

class _CustomTextFormFieldState extends State<CustomTextFormField> {
  GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Form(
        key: _formKey,
        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,
                    onFieldSubmitted: _onFieldSubmitted,
                    onSaved: _onSaved,
                  ),
                ),
              ),
            ),
            Positioned(
                top: 0, right: 0, child: _buildSubmitButton(context)),
          ],
        ),
      ),
    );
  }

  String _validateUsername(value) {
    if (value.isEmpty) {
      return '用户名不能为空';
    }
    return null;
  }
  _onSaved(value){
    print('onSaved:'+value);
  }

  void _onFieldSubmitted(value) {
    print('onFieldSubmitted:'+value);
  }

  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(){
    _formKey.currentState.save();
    if (_formKey.currentState.validate()) {
      FocusScope.of(context).requestFocus(FocusNode());
    }
  }
}


name: Scrollable的基本使用
subtitle:
【viewportBuilder】 : 视口构造器   【ViewportBuilder】
【axisDirection】: 滑动方向   【AxisDirection】
【controller】: 滑动控制器   【ScrollController】
【dragStartBehavior】: t拖动行为   【DragStartBehavior】
【physics】: 滚动现象   【ScrollPhysics】
【color】: 子组件    【Color】

code:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class ScrollableDemo extends StatelessWidget {
  final data = List.generate(32, (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(
          cacheExtent: 200,
          cacheExtentStyle: CacheExtentStyle.pixel,
          offset: position,
          slivers: <Widget>[_buildSliverList()],
        ),
      ),
    );
  }

  Widget _buildSliverList() => SliverList(
        delegate: SliverChildBuilderDelegate(
            (_, int index) => Container(
                  margin: EdgeInsets.only(top: 1),
                  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),
      );

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


name: Switch基础用法
subtitle:
      
【inactiveThumbColor】 : 未选中小圈颜色   【Color】
【inactiveTrackColor】 : 未选中滑槽颜色   【Color】
【activeColor】 : 选中时小圈颜色   【Color】
【activeTrackColor】 : 选中时滑槽颜色   【Color】
【onChanged】 : 切换回调   【Function(double)】"
  onChanged时,回调true、null、false三种状态

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

class _CustomSwitchState extends State<CustomSwitch> {
  final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: colors
          .map((e) =>
          Switch(
              value: _checked,
              inactiveThumbColor: e,
              inactiveTrackColor: Colors.grey.withAlpha(88),
              activeColor: Colors.green,
              activeTrackColor: Colors.orange,
              onChanged: (v) {
                setState(() => _checked = v);
              }))
          .toList(),
    );
  }
}


name: Switch图片
subtitle:
      
【inactiveThumbImage】 : 未选中小圈图片   【ImageProvider】
【activeThumbImage】 : 选中时滑槽颜色   【ImageProvider】

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

class _ImageSwitchState extends State<ImageSwitch> {
  final imgs = [
    "assets/images/head_icon/icon_5.webp",
    "assets/images/head_icon/icon_6.webp",
    "assets/images/head_icon/icon_7.webp",
    "assets/images/head_icon/icon_8.webp"];
  bool _checked = false;

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      children: imgs
          .map((e) =>
          Switch(
              value: _checked,
              inactiveThumbImage: AssetImage(e),
              activeThumbImage: AssetImage('assets/images/pica.gif'),
              onChanged: (v) {
                setState(() => _checked = v);
              }))
          .toList(),
    );
  }
}


name: Navigator基本用法
subtitle:
      
【initialRoute】 : 最初显示路由   【String】
【onGenerateRoute】 : 路由生成器   【RouteFactory】
【observers】 : 路由监听器   【List<NavigatorObserver>】
【onPopPage】 : 出栈回调   【PopPageCallback】

code:
import 'package:flutter/material.dart';
class NavigatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 300,
      child: Navigator(
        onPopPage: _onPopPage,
        initialRoute: '/home-content',
        onGenerateRoute: _onGenerateRoute,
        observers: [TolyNavigatorObservers()],
      ),
    );
  }

  Route _onGenerateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/home-content':
        return MaterialPageRoute(
            builder: (_) => HomeContent(), settings: settings);
      case "/red":
        return MaterialPageRoute(builder: (_) => RedPage(), settings: settings);
      case "/yellow":
        return MaterialPageRoute(
            builder: (_) => YellowPage(), settings: settings);
      case "/green":
        return MaterialPageRoute(
            builder: (_) => GreenPage(), settings: settings);
      default:
        return MaterialPageRoute(
            builder: (_) => HomeContent(), settings: settings);
    }
  }

  bool _onPopPage(Route<dynamic> route, result) {
    print('----_onPopPage-----');
    return true;
  }
}

//路由监听器
class TolyNavigatorObservers extends NavigatorObserver {
  @override
  void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
    print(
        '--didPush:--route:--${route.settings}--previousRoute:--${previousRoute?.settings}');
  }

  @override
  void didStopUserGesture() {
    print('--didStopUserGesture:--');
  }

  @override
  void didStartUserGesture(Route<dynamic> route, Route<dynamic> previousRoute) {
    print(
        '--didStartUserGesture:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');
  }

  @override
  void didReplace({Route<dynamic> newRoute, Route<dynamic> oldRoute}) {
    print(
        '--didReplace:--newRoute:--${newRoute.settings}--oldRoute:--${oldRoute.settings}');
  }

  @override
  void didRemove(Route<dynamic> route, Route<dynamic> previousRoute) {
    print(
        '--didRemove:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
    print(
        '--didPop:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              RaisedButton(
                color: Colors.red,
                onPressed: () {
                  Navigator.pushNamed(context, '/red');
                },
              ),
              RaisedButton(
                color: Colors.yellow,
                onPressed: () {
                  Navigator.pushNamed(context, '/yellow');
                },
              ),
              RaisedButton(
                color: Colors.green,
                onPressed: () {
                  Navigator.pushNamed(context, '/green');
                },
              )
            ],
          ),
        ],
      ),
    );
  }
}

class RedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RedPage"),
      ),
      body: Container(
        color: Colors.red,
      ),
    );
  }
}

class YellowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("YellowPage"),
      ),
      body: Container(
        color: Colors.yellow,
      ),
    );
  }
}

class GreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GreenPage"),
      ),
      body: Container(
        color: Colors.green,
      ),
    );
  }
}


name: CupertinoSlider基本使用
subtitle:
      
【value】 : 数值   【double】
【min】 : 最小值   【double】
【max】 : 最大值   【double】
【activeColor】 : 激活颜色   【Color】
【thumbColor】 : 圆形颜色   【Color】
【divisions】 : 分段数   【int】
【onChangeStart】 : 开始滑动回调   【Function(double)】
【onChangeEnd】 : 滑动结束回调   【Function(double)】
【onChanged】 : 改变时回调   【Function(double)】

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

class _CustomCupertinoSliderState extends State<CustomCupertinoSlider> {
  double _value = 0.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,

      children: <Widget>[
        Text('当前值:${_value.toStringAsFixed(1)}'),
        CupertinoSlider(
            value: _value,
            divisions: 180,
            min: 0.0,
            max: 360.0,
            activeColor: Colors.green,
            thumbColor: Colors.white,
            onChangeStart: (value) {
              print('开始滑动:$value');
            },
            onChangeEnd: (value) {
              print('滑动结束:$value');
            },
            onChanged: (value) {
              setState(() {
                _value = value;
              });
            }),
      ],
    );
  }
}


name: CupertinoTabBar基本用法
subtitle:
      
【currentIndex】 : 当前激活索引   【Widget】
【items】 : 条目组件   【Widget】
【backgroundColor】 : 背景色   【Color】
【inactiveColor】 : 非激活色   【Color】
【activeColor】 : 激活色   【Color】
【iconSize】 : 图标大小    【double】
【border】 : 边线   【Border】
【onTap】 : 点击事件   【Function(int)】

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

class _CustomCupertinoTabBarState extends State<CustomCupertinoTabBar> {
  var _position = 0;
  final iconsMap = {
    //底栏图标
    "图鉴": Icons.home, "动态": Icons.toys,
    "喜欢": Icons.favorite, "手册": Icons.class_,
    "我的": Icons.account_circle,
  };

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildContent(context),
        _buildTabBar(),
      ],
    );
  }

  Widget _buildTabBar() {
    return CupertinoTabBar(
      currentIndex: _position,
      onTap: (value) => setState(() => _position = value),
      items: iconsMap.keys
          .map((e) => BottomNavigationBarItem(
                icon: Icon(
                  iconsMap[e],
                ),
                title: Text(e),
              ))
          .toList(),
      activeColor: Colors.blue,
      inactiveColor: Color(0xff333333),
      backgroundColor: Color(0xfff1f1f1),
      iconSize: 25.0,
    );
  }

  Widget _buildContent(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: MediaQuery.of(context).size.width,
      height: 150,
      color: Color(0xffE7F3FC),
      child: Text(
        iconsMap.keys.toList()[_position],
        style: TextStyle(color: Colors.blue, fontSize: 24),
      ),
    );
  }
}


name: AnimatedPositionedDirectional基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【top】 : 到父顶距离   【double】
【end】 : 到父右距离   【double】
【start】 : 到父左距离   【double】
【bottom】 : 到父底距离   【double】

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

class _CustomAnimatedPositionedDirectionalState
    extends State<CustomAnimatedPositionedDirectional> {
  final startTop = 0.0;
  final endTop = 30.0;

  var _top = 0.0;

  @override
  void initState() {
    _top = startTop;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildSwitch(),
        Container(
          color: Colors.grey.withAlpha(33),
          width: 200,
          height: 100,
          child: Stack(
            children: _buildChildren(),
          ),
        ),
      ],
    );
  }

  List<Widget> _buildChildren() => <Widget>[
        AnimatedPositionedDirectional(
          duration: Duration(seconds: 1),
          top: _top,
          start: _top * 4,
          child: Icon(
            Icons.android,
            color: Colors.green,
            size: 50,
          ),
        ),
        AnimatedPositionedDirectional(
          duration: Duration(seconds: 1),
          top: 50 - _top,
          start: 150 - _top * 4,
          child: Icon(
            Icons.android,
            color: Colors.red,
            size: 50,
          ),
        )
      ];

  Widget _buildSwitch() => Switch(
      value: _top == endTop,
      onChanged: (v) {
        setState(() {
          _top = v ? endTop : startTop;
        });
      });
}


name: MouseRegion基本使用
subtitle:
【onEnter】 : 移入事件   【PointerEnterEventListener】
【onHover】: 移动事件    【PointerHoverEventListener】
【onExit】: 移出事件    【PointerExitEventListener】

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

class _MouseRegionDemoState extends State<MouseRegionDemo> {
  int _enterCounter = 0;
  int _exitCounter = 0;
  double x = 0.0;
  double y = 0.0;
  void _incrementEnter(PointerEvent details) {
    setState(() {
      _enterCounter++;
    });
  }
  void _incrementExit(PointerEvent details) {
    setState(() {
      _exitCounter++;
    });
  }
  void _updateLocation(PointerEvent details) {
    setState(() {
      x = details.position.dx;
      y = details.position.dy;
    });
  }
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.tight(Size(300.0, 200.0)),
      child: MouseRegion(
        onEnter: _incrementEnter,
        onHover: _updateLocation,
        onExit: _incrementExit,
        child: Container(
          color: Colors.lightBlueAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('你的鼠标移入移除信息:'),
              Text(
                '$_enterCounter Entries\n$_exitCounter Exits',
                style: Theme.of(context).textTheme.headline4,
              ),
              Text(
                'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
              ),
            ],
          ),
        ),
      ),
    );
  }
}


name: EditableText基本使用
subtitle:
【controller】 : 控制器   【TextEditingController】
【focusNode】 : 焦点   【FocusNode】
【style】 : 文字样式   【TextStyle】
【backgroundCursorColor】 : 背景游标颜色   【Color】
【cursorColor】 : 游标颜色   【Color】
上面五个是EditableText必须的属性，其他同TextField,此处不再列举。

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

class _EditableTextDemoState extends State<EditableTextDemo> {
  final _ctrl =  TextEditingController(text:'Hello Flutter Unit!');
  final _node = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: EditableText(
              controller: _ctrl,
              focusNode: _node,
              style: TextStyle(fontSize: 16,color: Colors.blue),
              cursorColor: Colors.blue,
              backgroundCursorColor: Colors.orange,
      ),
    );
  }
}


name: 基本使用
subtitle:
      
【showLeading】 : 头部是否生效   【bool】
【showTrailing】 : 底部是否生效   【bool】
【axisDirection】 : 轴向   【AxisDirection】
【color】 : 颜色   【Color】
【child】 : 子组件   【Widget】

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 GlowingOverscrollIndicatorDemo 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 Container(
      height: 300,
      child: GlowingOverscrollIndicator(
        color: Colors.purple,
        // showLeading: false,
        // showTrailing: false,
        axisDirection: AxisDirection.down,
        child: ListView.builder(
          itemBuilder: (_, index) => Container(
            margin: EdgeInsets.all(10),
            height: 60,
            color: data[index],
          ),
          itemCount: data.length,
        ),
      ),
    );
  }
}


name: WidgetsApp基本使用
subtitle:
【pageRouteBuilder】 : *路由构造器   【PageRouteFactory】
【color】: *颜色    【Color】
【debugShowWidgetInspector】: 是否显示z组件查看器   【bool】
其他属性基本上同MaterialApp,详见之。

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

class _WidgetsAppDemoState extends State<WidgetsAppDemo> {
  var _debugShowCheckedModeBanner = false;
  var _debugShowWidgetInspector = false;
  var _showPerformanceOverlay = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        _buildSwitchers(),
        Container(
          height: 250,
          child: WidgetsApp(
            color: Colors.blue,
            debugShowCheckedModeBanner: _debugShowCheckedModeBanner,
            showPerformanceOverlay: _showPerformanceOverlay,
            debugShowWidgetInspector: _debugShowWidgetInspector,
            pageRouteBuilder:
                <T>(RouteSettings settings, WidgetBuilder builder) {
              return MaterialPageRoute<T>(settings: settings, builder: builder);
            },
            home: HomePage(),
          ),
        ),
      ],
    );
  }

  Widget _buildSwitchers() {
    return DefaultTextStyle(
      style: TextStyle(color: Colors.blue),
      child: Wrap(
        spacing: 10,
        children: [
          Column(
            children: [
              Switch(
                value: _showPerformanceOverlay,
                onChanged: (v) {
                  setState(() {
                    _showPerformanceOverlay = v;
                  });
                },
              ),
              Text('性能浮层')
            ],
          ),
          Column(
            children: [
              Switch(
                value: _debugShowCheckedModeBanner,
                onChanged: (v) {
                  setState(() {
                    _debugShowCheckedModeBanner = v;
                  });
                },
              ),
              Text('开启角标')
            ],
          ),
          Column(
            children: [
              Switch(
                value: _debugShowWidgetInspector,
                onChanged: (v) {
                  setState(() {
                    _debugShowWidgetInspector = v;
                  });
                },
              ),
              Text('检查器')
            ],
          )
        ],
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment(0, 0.7),
        child: Text(
          '你点击了$_count次',
          style: TextStyle(fontSize: 18, color: Colors.blue),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            _count++;
          });
        },
      ),
    );
  }
}


name: AnimatedList基本使用
subtitle:
      
【itemBuilder】 : 组件构造器   【AnimatedListItemBuilder】
【initialItemCount】 : 子组件数量   【int】
【scrollDirection】 : 滑动方向   【Axis】
【controller】 : 滑动控制器   【ScrollController】
【reverse】 : 数据是否反向   【bool】
【padding】 : 内边距   【EdgeInsetsGeometry】

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

class _CustomAnimatedListState extends State<CustomAnimatedList> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  ListModel<int> _list;
  int _selectedItem;
  int _nextItem;

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.grey.withAlpha(33),
        width: MediaQuery.of(context).size.width/2,
        child: Column(
          children: <Widget>[
            _buildBtn(),
            Container(
              width: MediaQuery.of(context).size.width/2,
              height: 300,
              child: AnimatedList(
                padding: EdgeInsets.all(10.0),
                key: _listKey,
                initialItemCount: _list.length,
                itemBuilder: _buildItem,
              ),
            )
          ],
        ));
  }

  Widget _buildBtn() => Row(
        children: <Widget>[
          IconButton(
            icon: const Icon(
              Icons.add_circle,
              color: Colors.blue,
            ),
            onPressed: _insert,
          ),
          IconButton(
            icon: const Icon(Icons.remove_circle, color: Colors.blue),
            onPressed: _remove,
          ),
        ],
      );
}

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<AnimatedListState> listKey;
  final dynamic removedItemBuilder;
  final List<E> _items;

  AnimatedListState 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,
      this.onTap,
      @required this.item,
      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 SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: Card(
        child: Container(
          color: Colors.primaries[item % Colors.primaries.length],
          child: CheckboxListTile(
            dense: true,
              title: Text(
                'Item $item',
                style: TextStyle(color: Colors.white, fontSize: 18),
              ),
              value: selected,
              onChanged: (v) => onTap()),
        ),
      ),
    );
  }
}


name: InkResponse其他属性
subtitle:
      
【child】 : 子组件   【Widget】
【onHighlightChanged】 : 高亮变化回调   【Function(bool)】
【highlightColor】 : 高亮色   【Color】
【splashColor】 : 水波纹色   【Color】
【radius】 : 水波半径   【double】

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

class _ColorInkResponseState extends State<ColorInkResponse> {
  var _info = 'Push';

  @override
  Widget build(BuildContext context) {
    return InkResponse(
      onTap: () => {},
      splashColor: Colors.blueAccent,
      highlightColor: Colors.orange,
      onHighlightChanged: (v) =>
          setState(() => _info = 'onHighlightChanged:$v'),
      radius: 50,
      child: Container(
        alignment: Alignment.center,
        width: 200,
        height: 100,
        child: Text(_info),
      ),
    );
  }
}


name: InkResponse基本事件
subtitle:
      
【child】 : 子组件   【Widget】
【onTap】 : 点击事件   【Function()】
【onDoubleTap】 : 双击事件   【Function()】
【onTapCancel】 : 点击取消   【Function()】
【onLongPress】 : 长按事件   【Function()】

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

class _CustomInkResponseState extends State<CustomInkResponse> {
  var _info = 'Push';

  @override
  Widget build(BuildContext context) {
    return InkResponse(
      onTap: () => setState(() => _info = 'onTap'),
      onDoubleTap: () => setState(() => _info = 'onDoubleTap'),
      onLongPress: () => setState(() => _info = 'onLongPress'),
      onTapCancel: () => setState(() => _info = 'onTapCancel'),
      child: Container(
        alignment: Alignment.center,
        width: 200,
        height: 100,
        child: Text(_info),
      ),
    );
  }
}


name: AnimatedPadding基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【padding】 : 内边距   【EdgeInsetsGeometry】

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

class _CustomAnimatedPaddingState extends State<CustomAnimatedPadding> {
  final EdgeInsets startPadding = EdgeInsets.all(10);
  final EdgeInsets endPadding = EdgeInsets.all(30);

  EdgeInsets _padding;

  @override
  void initState() {
    _padding = startPadding;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
            value: _padding == endPadding,
            onChanged: (v) {
              setState(() {
                _padding = v ? endPadding : startPadding;
              });
            }),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 200,
          height: 100,
          child: AnimatedPadding(
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            padding: _padding,
            onEnd: () => print('End'),
            child: Container(
              alignment: Alignment.center,
              color: Colors.blue,
              child: Text(
                '张风捷特烈',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ],
    );
  }
}


name: AlignTransition基本使用
subtitle: 【child】 : 孩子组件 【Widget】 【alignment】 : 对齐动画 【Animation<AlignmentGeometry>】
code:
import 'package:flutter/material.dart';
class CustomAlignTransition extends StatefulWidget {
  @override
  _CustomAlignTransitionState createState() => _CustomAlignTransitionState();
}

class _CustomAlignTransitionState extends State<CustomAlignTransition>
    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: AlignTransition(
            alignment: AlignmentTween(
                    begin: Alignment.topLeft, end: Alignment.bottomRight)
                .animate(_ctrl),
            child: Container(
                child: Icon(Icons.android, color: Colors.green, size: 60)),
          ),
        ));
  }
}


name: LicensePage基本使用
subtitle:
      
【applicationIcon】 : 左上图标   【Widget】
【applicationVersion】 : 版本号  【String】
【applicationName】 : 应用名  【String】
【applicationLegalese】 : 应用律术   【String】

code:
import 'package:flutter/material.dart';
class CustomLicensePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 400,
      child: LicensePage(
        applicationIcon: FlutterLogo(),
        applicationVersion: 'v0.0.1',
        applicationName: 'Flutter Unit',
        applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',
      ),
    );
  }
}


name: CupertinoApp基本用法
subtitle:
      
【theme】 : 主题   【ThemeData】
【title】 : 任务栏标题   【String】
【onGenerateRoute】 : 路由生成器   【RouteFactory】
【home】 : 主页   【Widget】

code:
import 'package:flutter/cupertino.dart';
class CustomCupertinoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 200,
      child: CupertinoApp(
        title: 'Flutter Demo',
        theme: CupertinoThemeData(
          primaryColor: CupertinoColors.white,
        ),
        home: CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            leading: Icon(
              CupertinoIcons.reply,
              color: CupertinoColors.black,
            ),
            trailing: Icon(
              CupertinoIcons.share,
              color: CupertinoColors.black,
            ),
            middle: Text('Flutter Unit'),
          ),
          backgroundColor: CupertinoColors.systemBackground,
          child: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}


name: iOS滑动页签基本使用
subtitle:
      
【children】 : 组件Map   【Map<T, Widget>】
【onValueChanged】 : 值改变回调   【ValueChanged<T>】
【groupValue】 : 选中值   【T】
【thumbColor】 : 选中色   【Color】
【backgroundColor】 : 背景色   【Color】
【padding】 : 内边距   【EdgeInsetsGeometry】

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

class _CupertinoSlidingSegmentedControlDemoState
    extends State<CupertinoSlidingSegmentedControlDemo> {
  var _value = 1;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: CupertinoSlidingSegmentedControl(
        groupValue: _value,
        onValueChanged: _onValueChanged,
        thumbColor: Colors.amberAccent,
        backgroundColor: Colors.green.withAlpha(99),
        padding: EdgeInsets.all(5),
        children: {
          1: Padding(
            padding: EdgeInsets.only(left: 20, right: 20),
            child: Text("混沌战士"),
          ),
          2: Text("青眼白龙"),
          3: Text("黑魔导"),
        },
      ),
    );
  }

  void _onValueChanged(int value) {
    setState(() {
      _value=value;
    });
  }
}


name: Hero基本使用
subtitle: 【tag】 : 标签 【String】,
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomHero extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var hero = Hero(
      //----定义一个Hero,并添加tag标签,此中组件共享
      tag: 'user-head',
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(30)),
        child: Image.asset(
          "assets/images/icon_head.webp",
          width: 60,
          height: 60,
          fit: BoxFit.cover,
        ),
      ),
    );

    var container = Container(
      alignment: Alignment(-0.8, -0.8),
      child: hero,
      width: 250,
      height: 250 * 0.618,
      decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
        Colors.red.withAlpha(99),
        Colors.yellow.withAlpha(189),
        Colors.green.withAlpha(88),
        Colors.blue.withAlpha(230)
      ])),
    );

    return GestureDetector(
      child: Card(elevation: 5, child: container),
      onTap: () => Navigator.push(
        context,
        Bottom2TopRouter(child: TargetPage(), duration: 1000),
      ),
    );
  }

}

class TargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var hero = Hero(
      //----定义一个Hero,为其添加标签，两个标签相同，则可以共享
      tag: 'user-head',
      child: Padding(
        padding: EdgeInsets.all(6.0),
        child: CircleAvatar(
          backgroundColor: Colors.transparent,
          backgroundImage: AssetImage(
            "assets/images/icon_head.webp",
          ),
        ),
      ),
    );

    var touch = InkWell(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: hero,
    );

    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[touch],
      ),
      body: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
          Colors.red.withAlpha(99),
          Colors.yellow.withAlpha(189),
          Colors.green.withAlpha(88),
          Colors.blue.withAlpha(230)
        ])),
      ),
    );
  }
}

//下--->上
class Bottom2TopRouter<T> extends PageRouteBuilder<T> {
  final Widget child;
  final int duration;
  final Curve curve;

  Bottom2TopRouter(
      {this.child, this.duration = 500, this.curve = Curves.fastOutSlowIn})
      : super(
            transitionDuration: Duration(milliseconds: duration),
            pageBuilder: (ctx, a1, a2) {
              return child;
            },
            transitionsBuilder: (
              ctx,
              a1,
              a2,
              Widget child,
            ) => SlideTransition(
                  position: Tween<Offset>(
                    begin: Offset(0.0, 1.0),
                    end: Offset(0.0, 0.0),
                  ).animate(CurvedAnimation(parent: a1, curve: curve)),
                  child: child));
}


name: Scaffold基本用法
subtitle:
      
【appBar】 : 头部组件   【PreferredSizeWidget】
【bottomNavigationBar】 : 底部组件   【Widget】
【drawer】 : 左侧滑组件   【Widget】
【endDrawer】 : 右侧滑组件   【Widget】
【body】 : 内容组件   【Widget】
【backgroundColor】 : 背景色   【Color】
【floatingActionButton】 : 浮动按钮   【Widget】
【floatingActionButtonLocation】 : 浮动按钮位置   【FloatingActionButtonLocation】

code:
import 'package:flutter/material.dart';
import '../PopupMenuButton/node1_base.dart';
class CustomScaffold extends StatefulWidget {
  CustomScaffold({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CustomScaffoldState();
}

// AppBar 默认的实例,有状态
class _CustomScaffoldState extends State with SingleTickerProviderStateMixin {
  final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];
  var _position = 0;
  final iconsMap = {
    "图鉴": Icons.home,
    "动态": Icons.toys,
    "喜欢": Icons.favorite,
    "手册": Icons.class_,
    "我的": Icons.account_circle,
  };
  final _colors = [
    Colors.blue,
    Colors.red,
    Colors.yellow,
    Colors.green,
    Colors.purple,
  ];

  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(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height - 300,
      child: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
        drawer: _buildLeftDrawer(),
        endDrawer: _buildLeftDrawer(),
        appBar: AppBar(
          title: Text('风雅六社'),
          backgroundColor: Colors.blue,
          centerTitle: true,
          actions: <Widget>[Icon(Icons.star), CustomPopupMenuButton()],
          bottom: _buildTabBar(),
        ),
        body: _buildTableBarView(),
        bottomNavigationBar: _buildBottomNavigationBar(),
      ),
    );
  }

  Drawer _buildLeftDrawer() => Drawer(
        elevation: 1,
        child: Image.asset(
          'assets/images/sabar.webp',
          fit: BoxFit.cover,
        ),
      );

  Widget _buildTabBar() => TabBar(
        isScrollable: true,
        controller: _tabController,
        indicatorColor: Colors.orangeAccent,
        tabs: tabs.map((e) => Tab(text: e)).toList(),
      );

  Widget _buildBottomNavigationBar() => BottomNavigationBar(
        onTap: (position) => setState(() => _position = position),
        currentIndex: _position,
        elevation: 1,
        backgroundColor: Colors.white,
        iconSize: 25,
        selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
        showUnselectedLabels: false,
        showSelectedLabels: true,
        items: iconsMap.keys
            .map((key) => BottomNavigationBarItem(
                title: Text(
                  key,
                ),
                icon: Icon(iconsMap[key]),
                backgroundColor: _colors[_position]))
            .toList(),
      );

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


name: PopupMenuDivider基本使用
subtitle: 【height】 : 高度 【double】
code:
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class CustomPopupMenuDivider extends StatelessWidget {
  final map = {
    "关于": Icons.info_outline,
    "帮助": Icons.help_outline,
    "问题反馈": Icons.add_comment,
  };

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          _buildPopupMenuButton(context),
          PopupMenuDivider(),
        ],
      ),
    );
  }

  PopupMenuButton<String> _buildPopupMenuButton(BuildContext context) {
    return PopupMenuButton<String>(
          itemBuilder: (context) => [
            ...buildItems().sublist(0, 2),
            PopupMenuDivider(),
            ...buildItems().sublist(2, 3)
          ],
          offset: Offset(0, 50),
          color: Color(0xffF4FFFA),
          elevation: 1,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
            topRight: Radius.circular(5),
            bottomLeft: Radius.circular(5),
          )),
          onSelected: (e) {
            print(e);
            if (e == '关于') {
              DialogAbout.show(context);
            }
          },
          onCanceled: () => print('onCanceled'),
        );
  }

  List<PopupMenuItem<String>> buildItems() {
    return map.keys
        .toList()
        .map((e) => PopupMenuItem<String>(
            value: e,
            child: Wrap(
              spacing: 10,
              children: <Widget>[
                Icon(
                  map[e],
                  color: Colors.blue,
                ),
                Text(e),
              ],
            )))
        .toList();
  }
}


name: CupertinoScrollbar基本使用
subtitle: 【child】 : 子组件 【Widget】 【controller】 : 控制器 【ScrollController】
code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCupertinoScrollbar 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: CupertinoScrollbar(
        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: FutureBuilder基本使用
subtitle:
      
【builder】 : 子组件   【AsyncWidgetBuilder<T>】
【initialData】 : 初始数据   【T】
【future】 : 异步任务  【Future<T>】

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

class _CustomFutureBuilderState extends State<CustomFutureBuilder> {
  Future<String> _future;

  @override
  void initState() {
    _future = loadData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
          initialData: 'Load',
          future: _future,
          builder: (ctx, snap) {
            if (snap.connectionState == ConnectionState.done) {
              return Text(snap.data);
            }
            if (snap.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            }
            if (snap.hasError) {
              return Text('Error');
            }
            return Container();
          }),
    );
  }

  Future<String> loadData() async {
    await Future.delayed(Duration(seconds: 2));
    return 'LoadeSuccess';
  }
}


name: Overlay基本使用
subtitle: Overlay.of(context).insert插入全局组件
code:
import 'package:flutter/material.dart';
class CustomOverlay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          height: 50,
          child: RawMaterialButton(
            elevation: 2,
            shape: CircleBorder(
              side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
            ),
            fillColor: Colors.blue,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            child: Icon(Icons.add),
            onPressed: ()=>showFloating(context),
          ),
        ),
        Container(
          height: 50,
          child: RawMaterialButton(
            elevation: 2,
            shape: CircleBorder(
              side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
            ),
            fillColor: Colors.red,
            splashColor: Colors.orange,
            textStyle: TextStyle(color: Colors.white),
            child: Icon(Icons.remove),
            onPressed: hideFloating,
          ),
        ),
      ],
    );
  }
}

bool show = false;
Offset offset = Offset(200, 200);

final double radius = 60;
var entry = OverlayEntry(
    builder: (context) => Stack(
      children: <Widget>[
        Positioned(
          left: offset.dx,
          top: offset.dy,
          child: _buildFloating(),
        ),
      ],
    ));

///绘制悬浮控件
_buildFloating() => GestureDetector(
    onPanDown: (details) {
      offset = details.globalPosition - Offset(radius / 2, radius / 2);
      entry.markNeedsBuild();
    },
    onPanUpdate: (DragUpdateDetails details) {
      offset = offset + details.delta;
      entry.markNeedsBuild();
    },
    onLongPress: hideFloating,
    child: Material(
      color: Colors.transparent,
      child: Container(
        height: radius,
        width: radius,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
              image: AssetImage('assets/images/icon_head.webp')),
        ),
      ),
    ));

showFloating(BuildContext context) {
  if (!show) {
    Overlay.of(context).insert(entry);
    show = true;
  }
}

hideFloating() {
  if (show) {
    entry.remove();
    show = false;
  }
}


name: CupertinoPicker基本使用
subtitle:
      
【children】 : 子组件列表   【List<Widget>】
【offAxisFraction】 : 轴偏移率   【double】
【squeeze】 : 挤压率   【double】
【diameterRatio】 : 高与圆柱直径比率   【double】
【itemExtent】 : 间距   【double】
【backgroundColor】 : 背景色   【Color】
【onSelectedItemChanged】 : 选中事件  【Function(int)】

code:
import 'package:flutter/cupertino.dart';
class CustomCupertinoPicker extends StatelessWidget {
  final names = [
    'Java',
    'Kotlin',
    'Dart',
    'Swift',
    'C++',
    'Python',
    "JavaScript",
    "PHP",
    "Go",
    "Object-c"
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: CupertinoPicker(
          backgroundColor: CupertinoColors.systemGrey.withAlpha(33),
          diameterRatio: 1,
          offAxisFraction: 0.4,
          squeeze: 1.5,
          itemExtent: 40,
          onSelectedItemChanged: (position) {
            print('当前条目  ${names[position]}');
          },
          children: names.map((e) => Center(child: Text(e))).toList()),
    );
  }
}


name: AnimatedOpacity基本使用
subtitle:
      
【child】 : 孩子组件   【Widget】
【duration】 : 动画时长   【Duration】
【onEnd】 : 动画结束回调   【Function()】
【curve】 : 动画曲线   【Duration】
【opacity】 : 透明度   【double】

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

class _CustomAnimatedOpacityState extends State<CustomAnimatedOpacity> {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Switch(
            value: _opacity == 0,
            onChanged: (v) {
              setState(() {
                _opacity = v ? 0 : 1.0;
              });
            }),
        Container(
          color: Colors.grey.withAlpha(22),
          width: 200,
          height: 100,
          child: AnimatedOpacity(
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            opacity: _opacity,
            onEnd: () => print('End'),
            child: Icon(Icons.android, color: Colors.green, size: 60),
          ),
        ),
      ],
    );
  }
}


name: DropdownButton的样式指定
subtitle:
      
【isDense】 : 是否紧排   【bool】
【iconSize】 : 图标大小   【double】
【hint】 : 提示组件   【Widget】
【iconEnabledColor】 : 图标颜色   【Color】

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

class _StyleDropDownButtonState extends State<StyleDropDownButton> {
  Color _color = Colors.red ;
  final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];
  final _info = ["红色", "黄色", "蓝色", "绿色"];

  @override
  Widget build(BuildContext context) {
    return Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        Container(
          margin: EdgeInsets.symmetric(horizontal: 20),
          width: 50,
          height: 50,
          color: _color??Colors.transparent,
        ),
        DropdownButton<Color>(
            hint: Text('请选择'),
            isDense: true,
            iconSize:20,
            iconEnabledColor:_color??Colors.orange,
            value: _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: DropdownButton基本用法
subtitle:
      
【value】 : 当前值   【T】
【items】 : 下拉选框   【List<DropdownMenuItem<T>>】
【icon】 : 图标   【Widget】
【elevation】 : 影深   【double】
【onChanged】 : 选择条目事件   【Function(T)】
【backgroundColor】 : 背景色   【Color】

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

class _CustomDropDownButtonState extends State<CustomDropDownButton> {
  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,
        ),
        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: ElevatedButton样式
subtitle:
      
【style】 : 按钮样式   【ButtonStyle】
【focusNode】 : 焦点   【FocusNode】
【clipBehavior】 : 裁剪行为   【Clip】
【autofocus】 : 自动聚焦   【bool】

code:
import 'package:flutter/material.dart';
class ElevatedButtonStyleDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Wrap(
        spacing: 10,
        children: [
          ElevatedButton(
            style: TextButton.styleFrom(
                backgroundColor: Colors.orange,
                primary: Colors.white,
                elevation: 2,
                shadowColor: Colors.orangeAccent),
            child: Text('ElevatedButton样式'),
            onPressed: _onPressed,
            onLongPress: _onLongPress,
          ),
          ElevatedButton(
            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: ElevatedButton基本使用
subtitle:
      
【child】 : 是否具有滚动主体   【Widget】
【onPressed】 : 点击事件   【VoidCallback】
【onLongPress】 : 长按事件   【VoidCallback】

code:
import 'package:flutter/material.dart';
class ElevatedButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        height: 60,
        child: Wrap(
          spacing: 20,
          children: [
            ElevatedButton(
              child: Text('ElevatedButton'),
              onPressed: _onPressed,
              onLongPress: _onLongPress,
            ),
            ElevatedButton(
              child: Text('禁用按钮'),
              onPressed: null,
              onLongPress: null,
            ),
          ],
        ));
  }

  _onPressed() {}

  _onLongPress() {}
}


name: PopupMenuButton基本使用
subtitle:
      
【itemBuilder】 : 构造器   【PopupMenuItemBuilder<T>】
【offset】 : 偏移   【Offset】
【color】 : 背景颜色   【Color】
【shape】 : 形状   【ShapeBorder】
【elevation】 : 影深   【double】
【onCanceled】 : 取消事件   【Function()】
【onSelected】 : 选择事件   【Function(T)】

code:
import 'package:flutter/material.dart';
import '../../../dialogs/dialog_about.dart';
class CustomPopupMenuButton extends StatefulWidget {
  @override
  _CustomPopupMenuButtonState createState() => _CustomPopupMenuButtonState();
}

class _CustomPopupMenuButtonState extends State<CustomPopupMenuButton> {
  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),
      color: Color(0xffF4FFFA),
      elevation: 1,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
        topRight: Radius.circular(5),
        bottomLeft: Radius.circular(5),
      )),
      onSelected: (e) {
        print(e);
        if (e == '关于') {
          DialogAbout.show(context);
        }
      },
      onCanceled: () => print('onCanceled'),
    );
  }

  List<PopupMenuItem<String>> buildItems() {
    return map.keys
        .toList()
        .map((e) => PopupMenuItem<String>(
            value: e,
            child: Wrap(
              spacing: 10,
              children: <Widget>[
                Icon(
                  map[e],
                  color: Colors.blue,
                ),
                Text(e),
              ],
            )))
        .toList();
  }
}


name: Material的shape属性
subtitle: 【shape】 : 形状 【ShapeBorder】,
code:
import 'package:flutter/material.dart';
class ShapeMaterial extends StatelessWidget {

  final shapeMap = {
    'BorderDirectional': BorderDirectional(
        top: BorderSide(
          color: Colors.white,
        ),
        start: BorderSide(color: Colors.black, width: 15),
        bottom: BorderSide(
          color: Colors.white,
        )),
    'Border': Border(
      top: BorderSide(width: 5.0, color: Color(0xFFFFDFDFDF)),
      left: BorderSide(width: 5.0, color: Color(0xFFFFDFDFDF)),
      right: BorderSide(width: 5.0, color: Color(0xFFFF7F7F7F)),
      bottom: BorderSide(width: 5.0, color: Color(0xFFFF7F7F7F)),
    ),
    'Circle': CircleBorder(
      side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
    ),
    'RoundedRectangleBorder': RoundedRectangleBorder(
        side: BorderSide(width: 1.0, color: Colors.black),
        borderRadius: BorderRadius.all(Radius.circular(15))),
    'ContinuousRectangleBorder': ContinuousRectangleBorder(
      side: BorderSide.none,
      borderRadius: BorderRadius.circular(40.0),
    )
  };

  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: shapeMap.keys.map((e) => _buildMaterial(e)).toList());
  }

  Material _buildMaterial(String type) => Material(
        shadowColor: Colors.blue,
        shape: shapeMap[type],
        color: Colors.orange,
        elevation: 3,
        textStyle: TextStyle(color: Colors.white),
        child: Container(
          alignment: Alignment.center,
          width: 300,
          height: 60,
          child: Text(
            type,
          ),
        ),
      );
}


name: Material基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【type】 : 类型   【MaterialType】
【elevation】 : 影深   【double】
【shadowColor】 : 阴影颜色   【Color】
【color】 : 颜色   【Color】

code:
import 'package:flutter/material.dart';
class CustomMaterial extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
        spacing: 10,
        runSpacing: 10,
        children: MaterialType.values.map((e) => _buildMaterial(e)).toList());
  }

  Material _buildMaterial(MaterialType type) => Material(
        shadowColor: Colors.blue,
        type: type,
        color: Colors.orange,
        elevation: 3,
        child: Container(
          alignment: Alignment.center,
          width: 100,
          height: 60,
          child: Text(
            type.toString().split('.')[1],
            style: TextStyle(color: Colors.black),
          ),
        ),
      );
}


name: Scrollbar基本使用
subtitle: 【child】 : 子组件 【Widget】 【controller】 : 控制器 【ScrollController】
code:
import 'package:flutter/material.dart';
class CustomScrollbar 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: Scrollbar(
        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: WillPopScope使用
subtitle: 【child】 : 子组件 【Widget】 【onWillPop】 : 返回回调 【WillPopCallback】
code:
import 'package:flutter/material.dart';
class CustomWillPopScope extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: WillPopScope(child: (BackButton()),
          onWillPop: ()=>_willPop(context)),
    );
  }

  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: TableRowInkWell基本事件
subtitle:
      
【child】 : 子组件   【Widget】
【onTap】 : 点击事件   【Function()】
【onDoubleTap】 : 双击事件   【Function()】
【onLongPress】 : 长按事件   【Function()】
【onHighlightChanged】 : 高亮变化回调   【Function(bool)】

code:
import 'package:flutter/material.dart';
class CustomTableRowInkWell 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>[
          TableRowInkWell(
            onTap: () => print('onTap'),
            onDoubleTap: () => print('onDoubleTap'),
            onLongPress: () => print('onLongPress'),
            onHighlightChanged: (v) => print('onHighlightChanged:$v'),
            child: 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: MonthPicker基本使用
subtitle:
      
【selectedDate】 : 选中日期   【DateTime】
【firstDate】 : 最前日期限制   【DateTime】
【lastDate】 : 最后日期限制   【DateTime】
【onChanged】 : 点击回调  【Function(DateTime)】

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

class _CustomMonthPickerState extends State<CustomMonthPicker> {
  DateTime _date = DateTime.now();

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


name: CupertinoContextMenu基本使用
subtitle:
      
【child】 : 子组件   【Widget】
【actions】 : 行为组件集   【List<Widget>】
【previewBuilder】 : 动画构造器  【ContextMenuPreviewBuilder】

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

  final info= ['保存图片','立刻呼叫','添加到收藏夹'];

  Widget _buildCupertinoContextMenu(context) => Container(
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage('assets/images/sabar_bar.webp'),
            fit: BoxFit.cover),
        borderRadius: BorderRadius.all(Radius.circular(50))),
    width: 100,
    height: 100,
    child: CupertinoContextMenu(
          child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/sabar_bar.webp'),
                    fit: BoxFit.cover),
                borderRadius: BorderRadius.all(Radius.circular(50))),
          ),
          actions: info.map((e)=>CupertinoContextMenuAction(
            child: Center(child: Text(e)),
            onPressed: () => Navigator.pop(context),
          )).toList())
  );
}


