forked from lxm_flutter/FlutterUnit
1 line
583 KiB
JSON
1 line
583 KiB
JSON
[{"id":null,"widgetId":9,"name":"CircleAvatar的表现","priority":1,"subtitle":"【radius】 : 半径 【double】\n【backgroundImage】 : 图片资源 【ImageProvider】\n【foregroundColor】: 前景色 【Color】\n【backgroundColor】: 背景色 【Color】\n【minRadius】: 最小半径 【double】\n【maxRadius】: 最大半径 【double】\n【child】: 孩子组件 【Child】","code":"import 'package:flutter/material.dart';\nclass CustomCircleAvatar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CircleAvatar(\n radius: 50,\n backgroundImage: AssetImage(\"assets/images/wy_200x300.jpg\"),\n foregroundColor: Colors.white,\n child: Icon(\n Icons.check,\n size: 50,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":19,"name":"RadioListTile需要一个泛型T","priority":1,"subtitle":"【value】 : 条目对象 【T】\n【groupValue】 : 选中对象 【T】\n【selected】: 是否选中 【bool】\n【secondary】: 右侧组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【onChanged】: 切换事件 【Function(T)】","code":"import 'package:flutter/material.dart';\nclass ItemBean {\n final String title;\n final String subTitle;\n final String imgUrl;\n\n ItemBean(this.title, this.subTitle, this.imgUrl);\n}\n\nclass CustomRadioListTile extends StatefulWidget {\n @override\n _CustomRadioListTileState createState() => _CustomRadioListTileState();\n}\n\nclass _CustomRadioListTileState extends State<CustomRadioListTile> {\n final Map<ItemType, ItemBean> languages = {\n ItemType.java:\n ItemBean(\"Java\", \"曾经世界上最流行的语言\", \"assets/images/java.jpeg\"),\n ItemType.kotlin:\n ItemBean(\"Kotlin\", \"未来世界上最流行的语言\", \"assets/images/kotlin.jpg\"),\n ItemType.dart:\n ItemBean(\"Dart\", \"世界上最优雅的语言\", \"assets/images/dart.jpg\"),\n };\n var _type = ItemType.java;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(11),\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: languages.keys\n .map((type) => RadioListTile<ItemType>(\n value: type,\n groupValue: _type,\n title: Text(languages[type].title),\n subtitle: Text(languages[type].subTitle),\n selected: _type == type,\n secondary: CircleAvatar(\n backgroundImage: AssetImage(languages[type].imgUrl),\n ),\n onChanged: (type) => setState(() => _type = type),\n ))\n .toList()),\n );\n }\n}\n"},{"id":null,"widgetId":19,"name":"RadioListTile选中色和密排","priority":2,"subtitle":"【activeColor】 : 选中时颜色 【Color】\n【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass ItemBean {\n final String title;\n final String subTitle;\n final String imgUrl;\n\n ItemBean(this.title, this.subTitle, this.imgUrl);\n}\n\nclass DenseRadioListTile extends StatefulWidget {\n @override\n _DenseRadioListTileState createState() => _DenseRadioListTileState();\n}\n\nclass _DenseRadioListTileState extends State<DenseRadioListTile> {\n final Map<ItemType, ItemBean> languages = {\n ItemType.java:\n ItemBean(\"Java\", \"曾经世界上最流行的语言\", \"assets/images/java.jpeg\"),\n ItemType.kotlin:\n ItemBean(\"Kotlin\", \"未来世界上最流行的语言\", \"assets/images/kotlin.jpg\"),\n ItemType.dart:\n ItemBean(\"Dart\", \"世界上最优雅的语言\", \"assets/images/dart.jpg\"),\n };\n var _type = ItemType.java;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(11),\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: languages.keys\n .map((type) => RadioListTile<ItemType>(\n value: type,\n groupValue: _type,\n title: Text(languages[type].title),\n activeColor: Colors.orangeAccent,\n dense: true,\n subtitle: Text(languages[type].subTitle),\n selected: _type == type,\n secondary: CircleAvatar(\n backgroundImage: AssetImage(languages[type].imgUrl),\n ),\n onChanged: (type) => setState(() => _type = type),\n ))\n .toList()),\n );\n }\n}"},{"id":null,"widgetId":28,"name":"mini属性","priority":2,"subtitle":"【mini】: 是否是迷你 【bool】","code":"import 'package:flutter/material.dart';\nclass MiniFAB extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.red: Icons.add,\n Colors.blue: Icons.bluetooth,\n Colors.green: Icons.android,\n };\n return Wrap(\n spacing: 20,\n children: data.keys\n .map((e) => FloatingActionButton(\n heroTag: e.toString()+\"b\",\n onPressed: () {},\n backgroundColor: e,\n mini: true,\n foregroundColor: Colors.white,\n child: Icon(data[e]),\n tooltip: \"android\",\n elevation: 5, //z-阴影盖度\n ))\n .toList());\n }\n}"},{"id":null,"widgetId":28,"name":"FloatingActionButton点击事件","priority":1,"subtitle":"【child】: 子组件 【Widget】\n【tooltip】: 长按时提示文字 【String】\n【backgroundColor】: 背景色 【Color】\n【foregroundColor】: 前景色 【Color】\n【elevation】: 影深 【double】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomFAB extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.red: Icons.add,\n Colors.blue: Icons.bluetooth,\n Colors.green: Icons.android,\n };\n return Wrap(\n spacing: 20,\n children: data.keys\n .map((e) => FloatingActionButton(\n heroTag: e.toString()+\"a\",\n onPressed: () {},\n backgroundColor: e,\n foregroundColor: Colors.white,\n child: Icon(data[e]),\n tooltip: \"android\",\n elevation: 5, //z-阴影盖度\n ))\n .toList());\n }\n}"},{"id":null,"widgetId":28,"name":"shape属性","priority":3,"subtitle":"【shape】: 形状 【ShapeBorder】","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nimport '../../../../app/utils/pather.dart';\nclass ShapeFAB extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.red: Icons.add,\n Colors.blue: Icons.bluetooth,\n Colors.green: Icons.android,\n };\n return Wrap(\n spacing: 20,\n children: data.keys\n .map((e) => FloatingActionButton(\n heroTag: e.toString()+\"c\",\n onPressed: () {},\n backgroundColor: e,\n shape: StarBorder(),\n foregroundColor: Colors.white,\n child: Icon(data[e]),\n tooltip: \"android\",\n elevation: 5,\n ))\n .toList());\n }\n}\n\n/// 边线形状类\nclass StarBorder extends ShapeBorder {\n @override\n EdgeInsetsGeometry get dimensions => null;\n\n @override\n Path getInnerPath(Rect rect, {TextDirection textDirection}) {\n return null;\n }\n\n @override\n Path getOuterPath(Rect rect, {TextDirection textDirection}) {\n return Pather.create.nStarPath(20, 25, 25 * cos((360 / 9 / 2) * pi / 180),\n dx: rect.height / 2, dy: rect.width / 2);\n }\n\n @override\n void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}\n\n @override\n ShapeBorder scale(double t) {\n return null;\n }\n}"},{"id":null,"widgetId":154,"name":"Drawer基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【elevation】 : 影深 【double】","code":"import 'package:flutter/material.dart';\nclass CustomDrawer extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 400,\n child: Scaffold(\n appBar: AppBar(\n title: Text('Flutter Unit'),\n ),\n drawer: Drawer(\n elevation: 3,\n child: _buildChild(),\n ),\n ),\n );\n }\n\n Widget _buildChild() => ListView(\n padding: EdgeInsets.zero,\n children: const <Widget>[\n DrawerHeader(\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/caver.jpeg'),\n fit: BoxFit.cover),\n ),\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 24, color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)\n ]),\n ),\n ),\n ListTile(\n leading: Icon(\n Icons.star,\n color: Colors.blue,\n ),\n title: Text('我的收藏'),\n ),\n ListTile(\n leading: Icon(\n Icons.palette,\n color: Colors.orangeAccent,\n ),\n title: Text('我的绘画'),\n ),\n ListTile(\n leading: Icon(\n Icons.insert_drive_file,\n color: Colors.green,\n ),\n title: Text('我的文件'),\n ),\n ],\n );\n}\n"},{"id":null,"widgetId":134,"name":"DayPicker基本使用","priority":1,"subtitle":" \n【selectedDate】 : 选中日期 【DateTime】\n【currentDate】 : 当前日期 【DateTime】\n【firstDate】 : 最前日期限制 【DateTime】\n【lastDate】 : 最后日期限制 【DateTime】\n【displayedMonth】 : 当前展示的月份 【DateTime】\n【onChanged】 : 点击回调 【Function(DateTime)】","code":"import 'package:flutter/material.dart';\nclass CustomDayPicker extends StatefulWidget {\n @override\n _CustomDayPickerState createState() => _CustomDayPickerState();\n}\n\nclass _CustomDayPickerState extends State<CustomDayPicker> {\n\n DateTime _date = DateTime.now();\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 350,\n child: DayPicker(\n selectedDate: _date,\n currentDate: DateTime.now(),\n onChanged: (date){\n setState(() => _date = date);\n },\n firstDate: DateTime(2018),\n lastDate: DateTime(2030),\n displayedMonth: DateTime.now()\n ),\n );\n }\n}\n"},{"id":null,"widgetId":27,"name":"OutlineButton点击事件","priority":1,"subtitle":"【textColor】: 子组件文字颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【highlightedBorderColor】: 高亮时框色 【Color】\n【child】: 子组件 【Widget】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【borderSide】: 边线 【BorderSide】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomOutlineButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return OutlineButton(//边线按钮\n onPressed: () {},\n child: Text(\"OutlineButton\"),\n padding: EdgeInsets.all(8),\n splashColor: Colors.green,\n highlightColor: Colors.orangeAccent,\n highlightedBorderColor: Colors.grey,\n textColor: Color(0xff000000),\n borderSide: BorderSide(color: Color(0xff0A66F8), width: 2),\n );\n }\n}\n"},{"id":null,"widgetId":147,"name":"Listener基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onPointerDown】 : 按下事件 【Function(PointerDownEvent)】\n【onPointerMove】 : 移动事件 【Function(PointerMoveEvent)】\n【onPointerMove】 : 抬起事件 【Function(PointerUpEvent)】\n【onPointerCancel】 : 取消事件 【Function(PointerUpEvent)】","code":"import 'package:flutter/material.dart';\nclass CustomListener extends StatefulWidget {\n @override\n _CustomListenerState createState() => _CustomListenerState();\n}\n\nclass _CustomListenerState extends State<CustomListener> {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return Listener(\n onPointerDown: (detail) => setState(() => _info = detail.toString()),\n onPointerMove: (detail) => setState(() => _info = detail.toString()),\n onPointerUp: (detail) => setState(() => _info = detail.toString()),\n onPointerCancel: (detail) => setState(() => _info = detail.toString()),\n\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.618,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 16, color: Colors.blue),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":159,"name":"PositionedDirectional基本使用","priority":1,"subtitle":" \n【child】 : 组件 【Widget】\n【top】 : 到父顶距离 【double】\n【end】 : 到父右距离 【double】\n【start】 : 到父左距离 【double】\n【bottom】 : 到父底距离 【double】","code":"import 'package:flutter/material.dart';\nclass CustomPositionedDirectional extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var yellowBox = Container(\n color: Colors.yellow,\n height: 100,\n width: 100,\n );\n\n var redBox = Container(\n color: Colors.red,\n height: 90,\n width: 90,\n );\n\n var greenBox = Container(\n color: Colors.green,\n height: 80,\n width: 80,\n );\n\n var cyanBox = Container(\n color: Colors.cyanAccent,\n height: 70,\n width: 70,\n );\n\n return Container(\n width: 200,\n height: 120,\n color: Colors.grey.withAlpha(33),\n child: Stack(\n children: <Widget>[\n yellowBox,\n redBox,\n PositionedDirectional(top: 20, start: 20, child: greenBox),\n PositionedDirectional(\n child: cyanBox,\n bottom: 10,\n end: 10,\n )\n ],\n ));\n }\n}\n"},{"id":null,"widgetId":3,"name":"可以通过shape属性实现裁切效果","priority":2,"subtitle":"【shape】 : 形状 【ShapeBorder】\n【margin】: 外边距 【double】\n【color】: 颜色 【Color】\n【child】: 孩子 【Widget】","code":"import 'package:flutter/material.dart';\nimport '../../../../app/utils/pather.dart';\nclass ShapeCard extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Card(\n color: Color(0xffB3FE65),\n elevation: 6,\n shape: StarShapeBorder(),\n child: Container(\n alignment: Alignment.center,\n width: 100,\n height: 100,\n child: Text(\"Card\", style: TextStyle(fontSize: 20)),\n ),\n );\n }\n}\n\nclass StarShapeBorder extends ShapeBorder {\n @override\n EdgeInsetsGeometry get dimensions => null;\n\n @override\n Path getInnerPath(Rect rect, {TextDirection textDirection}) {\n return null;\n }\n\n @override\n Path getOuterPath(Rect rect, {TextDirection textDirection}) =>\n Pather.create.nStarPath(9, 50, 40, dx: 50, dy: 50);\n\n @override\n void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {\n }\n\n @override\n ShapeBorder scale(double t) {\n return null;\n }\n}"},{"id":null,"widgetId":3,"name":"Card可以让一个组件卡片化","priority":1,"subtitle":"【elevation】 : 影深 【double】\n【margin】: 外边距 【double】\n【color】: 颜色 【Color】\n【child】: 孩子 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomCard extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Card(\n color: Color(0xffB3FE65),\n elevation: 4,\n margin: EdgeInsets.all(10),\n child: Container(\n alignment: Alignment.topLeft,\n width: 200,\n height: 0.618*200,\n margin: EdgeInsets.all(10),\n child: Text(\"Card\", style: TextStyle(fontSize: 20)),\n ),\n );\n }\n}"},{"id":null,"widgetId":204,"name":"PreferredSize的转化使用","priority":2,"subtitle":"【PreferredSize将普通组件转化为PreferredSizeWidget","code":"import 'package:flutter/material.dart';\nclass AdapterPreferredSize extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: PreferredSize(\n preferredSize: Size.fromHeight(150),\n child: AppBar(\n title: Text('PreferredSize'),\n bottom: PreferredSize(\n preferredSize: Size.fromHeight(40),\n child: Container(\n height: 40,\n color: Colors.orange,\n ),\n ),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":204,"name":"PreferredSize调整AppBar高度","priority":1,"subtitle":"【preferredSize】 : 尺寸 【Size】","code":"import 'package:flutter/material.dart';\nclass CustomPreferredSize extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: PreferredSize(\n preferredSize: Size.fromHeight(150),\n child: AppBar(\n title: Text('PreferredSize'),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":29,"name":"ButtonBar边距和高","priority":2,"subtitle":"【buttonPadding】: 内边距 【EdgeInsetsGeometry】\n【buttonHeight】: 高 【double】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass PaddingButtonBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonBar(\n alignment: MainAxisAlignment.center,\n buttonHeight: 40,\n buttonPadding: EdgeInsets.only(left: 15,right: 15),\n children: <Widget>[\n RaisedButton(\n color: Colors.blue,\n child: Text(\"Raised\"),\n onPressed: () => DialogAbout.show(context)),\n OutlineButton(\n child: Text(\"Outline\"),\n onPressed: () => DialogAbout.show(context)),\n FlatButton(\n color: Colors.blue,\n onPressed: () => DialogAbout.show(context),\n child: Text(\"Flat\"),\n )\n ],\n );\n }\n}\n"},{"id":null,"widgetId":29,"name":"ButtonBar对齐方式","priority":1,"subtitle":"【alignment】: 对齐方式 【MainAxisAlignment】\n【children】: 子组件集 【List<Widget>】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomButtonBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonBar(\n alignment: MainAxisAlignment.center,\n children: <Widget>[\n RaisedButton(\n color: Colors.blue,\n child: Text(\"Raised\"),\n onPressed: () => DialogAbout.show(context)),\n OutlineButton(\n child: Text(\"Outline\"),\n onPressed: () => DialogAbout.show(context)),\n FlatButton(\n color: Colors.blue,\n onPressed: () => DialogAbout.show(context),\n child: Text(\"Flat\"),\n )\n ],\n );\n }\n}\n\n"},{"id":null,"widgetId":146,"name":"GestureDetector基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onTap】 : 点击事件 【Function()】\n【onDoubleTap】 : 双击事件 【Function()】\n【onLongPress】 : 长按事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomGestureDetector extends StatefulWidget {\n @override\n _CustomGestureDetectorState createState() => _CustomGestureDetectorState();\n}\n\nclass _CustomGestureDetectorState extends State<CustomGestureDetector> {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () => setState(() => _info = 'onTap'),\n onDoubleTap: () => setState(() => _info = 'onDoubleTap'),\n onLongPress: () => setState(() => _info = 'onLongPress'),\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.4,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 18, color: Colors.blue),\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":146,"name":"GestureDetector详情信息","priority":2,"subtitle":" \n【onTapDown】 : 按下回调 【Function(TapDownDetails)】\n【onTapUp】 : 子组件 【Function(TapUpDetails)】\n【onTapCancel】 : 点击取消 【Function()】","code":"import 'package:flutter/material.dart';\nclass TapGestureDetector extends StatefulWidget {\n @override\n _TapGestureDetectorState createState() => _TapGestureDetectorState();\n}\n\nclass _TapGestureDetectorState extends State<TapGestureDetector> {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTapDown: (detail) => setState(() => _info =\n 'onTapDown:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onTapUp: (detail) => setState(() => _info =\n 'onTapUp:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onTapCancel: () => setState(() => _info = 'onTapCancel'),\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.618,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 18, color: Colors.blue),\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":146,"name":"GestureDetector的Pan事件","priority":3,"subtitle":" \n【onPanDown】 : 按下回调 【Function(DragDownDetails)】\n【onPanEnd】 : 拖动结束 【Function(DragEndDetails)】\n【onPanStart】 : 开始拖动 【Function(DragStartDetails)】\n【onPanUpdate】 : 拖动更新 【Function(TapUpDetails)】\n【onPanCancel】 : 拖动取消 【Function()】","code":"import 'package:flutter/material.dart';\nclass PanGestureDetector extends StatefulWidget {\n @override\n _PanGestureDetectorState createState() => _PanGestureDetectorState();\n}\n\nclass _PanGestureDetectorState extends State<PanGestureDetector> {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onPanDown: (detail) => setState(() => _info =\n 'onPanDown:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onPanEnd: (detail) => setState(() => _info =\n 'onPanEnd:\\n初速度:${detail.primaryVelocity}\\n最终速度:${detail.velocity}'),\n onPanUpdate: (detail) => setState(() => _info =\n 'onPanUpdate:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onPanStart: (detail) => setState(() => _info =\n 'onPanStart:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onPanCancel: () => setState(() => _info = 'onTapCancel'),\n child: SingleChildScrollView(\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.618,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 18, color: Colors.blue),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":13,"name":"ActionChip的普通表现如下","priority":1,"subtitle":"【onPressed】: 点击事件 【Function】\n【pressElevation】: 按下时影深 【double】\n其他属性同Chip组件，无右侧组件。","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomActionChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ActionChip(\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text(\"This is a ActionChip.\"),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n pressElevation: 5,\n onPressed: ()=> DialogAbout.show(context),\n );\n }\n}\n"},{"id":null,"widgetId":26,"name":"RaisedButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【elevation】: 影深 【double】\n【child】: 子组件 【Widget】\n【textColor】: 子组件文字颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomRaisedButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return RaisedButton(\n color: Colors.blue,\n splashColor: Colors.green,\n onPressed: () {},\n child: Text(\"RaisedButton\"),\n textColor: Color(0xffFfffff),\n padding: EdgeInsets.all(8),\n elevation: 5,\n highlightColor: Color(0xffF88B0A),\n );\n }\n}\n"},{"id":null,"widgetId":211,"name":"MaterialBanner两行的使用","priority":2,"subtitle":"【contentTextStyle】: 中间位置样式 【TextStyle】\n【leadingPadding】: 左侧组件边距 【EdgeInsetsGeometry】\n当尾部组件数量大于1,该组件结构为左中下。","code":"import 'package:flutter/material.dart';\nclass MaterialBannerDemoTwo extends StatelessWidget {\n final info =\n 'A banner displays an important, succinct message, and provides actions for users to address. '\n 'A user action is required for itto be dismissed.';\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[MaterialBanner(\n content: Text(\n info,\n style: TextStyle(color: Colors.white),\n ),\n backgroundColor: Colors.purple,\n leading: Icon(Icons.warning, color: Colors.yellow),\n padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2),\n leadingPadding:EdgeInsetsDirectional.only(end: 16.0) ,\n actions: <Widget>[\n RaisedButton(\n color: Colors.white,\n onPressed: () {},\n child: Text(\n 'I KNOW',\n style: TextStyle(\n color: Colors.purple,\n fontWeight: FontWeight.bold,\n fontSize: 14),\n ),\n ),\n\n RaisedButton(\n color: Colors.white,\n onPressed: () {},\n child: Text(\n 'I IGNORE',\n style: TextStyle(\n color: Colors.purple,\n fontWeight: FontWeight.bold,\n fontSize: 14),\n ),\n ),\n ],\n )],\n );\n }\n\n}\n"},{"id":null,"widgetId":211,"name":"MaterialBanner一行的使用","priority":1,"subtitle":"【content】 : 中间组件 【Widget】\n【leading】: 左侧组件 【Widget】\n【actions】: 右侧组件列表 【List<Widget>】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【forceActionsBelow】: 是否按钮在下方 【bool】\n【backgroundColor】: 背景色 【Color】","code":"import 'package:flutter/material.dart';\nclass MaterialBannerDemo extends StatelessWidget {\n final info =\n 'Welcome to Flutter Unit!';\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[MaterialBanner(\n content: Text(\n info,\n style: TextStyle(color: Colors.white),\n ),\n backgroundColor: Colors.purple,\n leading: Icon(Icons.info, color: Colors.lightBlueAccent),\n padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0),\n forceActionsBelow: false, // 默认false\n actions: <Widget>[\n Text(\n 'I KNOW',\n style:TextStyle(\n color: Colors.orange,\n fontWeight: FontWeight.bold,\n fontSize: 14) ,\n )\n ],\n )],\n );\n }\n\n}\n"},{"id":null,"widgetId":164,"name":"SingleChildScrollView基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【padding】 : 点击事件 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomSingleChildScrollView extends StatelessWidget {\n final data = <Color>[\n Colors.blue[50],\n Colors.blue[100],\n Colors.blue[200],\n Colors.blue[300],\n Colors.blue[400],\n Colors.blue[500],\n Colors.blue[600],\n Colors.blue[700],\n Colors.blue[800],\n Colors.blue[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: SingleChildScrollView(\n padding: EdgeInsets.symmetric(horizontal: 10),\n child: Column(\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n\n ),\n );\n }\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":164,"name":"SingleChildScrollView滑动方向","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向 【Axis】","code":"import 'package:flutter/material.dart';\nclass DirectionSingleChildScrollView extends StatelessWidget {\n final data = <Color>[\n Colors.blue[50],\n Colors.blue[100],\n Colors.blue[200],\n Colors.blue[300],\n Colors.blue[400],\n Colors.blue[500],\n Colors.blue[600],\n Colors.blue[700],\n Colors.blue[800],\n Colors.blue[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: SingleChildScrollView(\n scrollDirection: Axis.horizontal,\n reverse: true,\n padding: EdgeInsets.symmetric(horizontal: 10),\n child: Row(\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 90,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n\n ),\n );\n }\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":33,"name":"ToggleButtons多选切换","priority":3,"subtitle":" 可以控制状态转化的逻辑来形成不同的效果。","code":"import 'package:flutter/material.dart';\nclass ProToggleButtons extends StatefulWidget {\n @override\n _ProToggleButtonsState createState() => _ProToggleButtonsState();\n}\n\nclass _ProToggleButtonsState extends State<ProToggleButtons> {\n var _isSelected = [false, false, false];\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: <Widget>[\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n borderWidth: 1,\n borderColor: Colors.blue,\n selectedBorderColor: Colors.orangeAccent,\n splashColor: Colors.purple.withAlpha(66),\n borderRadius: BorderRadius.circular(10),\n selectedColor: Colors.red,\n fillColor: Colors.green.withAlpha(11),\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected[value] = !_isSelected[value];\n }),\n );\n }\n}"},{"id":null,"widgetId":33,"name":"ToggleButtons单选切换","priority":1,"subtitle":"【children】: 子组件集 【List<Widget>】\n【borderWidth】: 边线宽 【double】\n【borderRadius】: 圆角 【BorderRadius】\n【isSelected】: 是否选中集 【List<bool>】\n【onPressed】: 点击事件 【Function(int)】","code":"import 'package:flutter/material.dart';\nclass CustomToggleButtons extends StatefulWidget {\n @override\n _CustomToggleButtonsState createState() => _CustomToggleButtonsState();\n}\n\nclass _CustomToggleButtonsState extends State<CustomToggleButtons> {\n var _isSelected = [true, false, false];\n\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: <Widget>[\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n borderWidth: 1,\n borderRadius: BorderRadius.circular(10),\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected = _isSelected.map((e) => false).toList();\n _isSelected[value] = true;\n }),\n );\n\n }\n}"},{"id":null,"widgetId":33,"name":"ToggleButtons颜色属性","priority":2,"subtitle":"【borderColor】: 边线色 【Color】\n【selectedBorderColor】: 选中边线色 【Color】\n【selectedColor】: 选中时组件色 【Color】\n【fillColor】: 选中时填充色 【Color】\n【splashColor】: 水波纹色 【Color】","code":"import 'package:flutter/material.dart';\nclass ColorToggleButtons extends StatefulWidget {\n @override\n _ColorToggleButtonsState createState() => _ColorToggleButtonsState();\n}\n\nclass _ColorToggleButtonsState extends State<ColorToggleButtons> {\n var _isSelected = [true, false, false];\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: <Widget>[\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n borderWidth: 1,\n borderColor: Colors.orangeAccent,\n selectedBorderColor: Colors.blue,\n splashColor: Colors.purple.withAlpha(66),\n borderRadius: BorderRadius.circular(10),\n selectedColor: Colors.red,\n fillColor: Colors.green.withAlpha(11),\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected = _isSelected.map((e) => false).toList();\n _isSelected[value] = true;\n }),\n );\n }\n}\n"},{"id":null,"widgetId":10,"name":"replacement可在隐藏时进行占位","priority":2,"subtitle":"【replacement】 : 隐藏时的占位组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass ReplacementVisibility extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: <Widget>[\n _buildVisibility(true),\n _buildVisibility(false),\n ],\n );\n }\n\n _buildVisibility(bool visible) {\n var box = Container(\n height: 30,\n width: 30,\n color: Colors.blue,\n );\n return Container(\n width: 150,\n height: 150 * 0.618,\n color: Colors.cyanAccent.withAlpha(33),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n box,\n Visibility(\n visible: visible,\n replacement: Container(\n alignment: Alignment.center,\n height: 80 * 0.618,\n width: 80,\n ),\n child: Container(\n alignment: Alignment.center,\n height: 80 * 0.618,\n width: 80,\n color: Colors.red,\n child: Text(\n \"visible\\ntrue\",\n style: TextStyle(fontSize: 20),\n ),\n )),\n box,\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":10,"name":"根据visible控制内部子组件的显隐情况","priority":1,"subtitle":"【visible】 : 是否显示 【bool】\n【child】: 孩子 【Widget】\n默认孩子隐藏时会失去原来所在区域。","code":"import 'package:flutter/material.dart';\nclass CustomVisibility extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: <Widget>[\n _buildVisibility(true),\n _buildVisibility(false),\n ],\n );\n }\n\n _buildVisibility(bool visible) {\n var box = Container(\n height: 30,\n width: 30,\n color: Colors.blue,\n );\n return Container(\n width: 150,\n height: 150 * 0.618,\n color: Colors.cyanAccent.withAlpha(33),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n box,\n Visibility(\n visible: visible,\n child: Container(\n alignment: Alignment.center,\n height: 80 * 0.618,\n width: 80,\n color: Colors.red,\n child: Text(\n \"visible\\ntrue\",\n style: TextStyle(fontSize: 20),\n ),\n )),\n box,\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":208,"name":"Title基本使用","priority":1,"subtitle":"【title】 : 名称 【int】\n【color】: 颜色 【Color】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass TitleDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Title(\n title: '张风捷特烈',\n color: Color(0xFF9C27B0),\n child: Center(child: Text('应用菜单栏中该页的名称为: 张风捷特烈'))),\n );\n }\n}\n"},{"id":null,"widgetId":163,"name":"GridView.extent构造","priority":3,"subtitle":" \n【maxCrossAxisExtent】 : box轴向长度 【double】\n【reverse】 : 是否反向滑动 【bool】\n【shrinkWrap】 : 无边界时是否包裹 【bool】","code":"import 'package:flutter/material.dart';\nclass ExtentGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.extent(\n scrollDirection: Axis.horizontal,\n maxCrossAxisExtent: 80.0,\n mainAxisSpacing: 2,\n crossAxisSpacing: 2,\n childAspectRatio: 0.618,\n children: data\n .map((color) => _buildItem(color))\n .toList(),\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":163,"name":"GridView.count构造","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【crossAxisCount】 : 主轴一行box数量 【int】\n【mainAxisSpacing】 : 主轴每行间距 【double】\n【crossAxisSpacing】 : 交叉轴每行间距 【double】\n【childAspectRatio】 : box主长/交叉轴长 【double】\n【crossAxisCount】 : 主轴一行数量 【int】","code":"import 'package:flutter/material.dart';\nclass CustomGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFFFF00FF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.count(\n crossAxisCount: 4,\n mainAxisSpacing: 2,\n crossAxisSpacing: 2,\n childAspectRatio: 1/0.618,\n children: data\n .map((color) => _buildItem(color))\n .toList(),\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":163,"name":"GridView.builder构造","priority":4,"subtitle":" \n【itemCount】 : 条目数量 【int】\n【gridDelegate】 : 网格代理 【SliverGridDelegate】\n【itemBuilder】 : 条目构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass BuilderGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF33FFF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.builder(\n itemCount: data.length,\n scrollDirection: Axis.vertical,\n gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//网格代理：定交叉轴数目\n crossAxisCount: 4,//条目个数\n mainAxisSpacing: 5,//主轴间距\n crossAxisSpacing: 5,//交叉轴间距\n childAspectRatio:1/0.618),\n itemBuilder: (_, int position)=> _buildItem(data[position])\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":163,"name":"GridView滑动方向","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向滑动 【bool】\n【shrinkWrap】 : 无边界时是否包裹 【bool】","code":"import 'package:flutter/material.dart';\nclass HorizontalGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.count(\n scrollDirection: Axis.horizontal,\n reverse: true,\n crossAxisCount: 4,\n mainAxisSpacing: 2,\n crossAxisSpacing: 2,\n childAspectRatio: 0.618,\n children: data\n .map((color) => _buildItem(color))\n .toList(),\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":140,"name":"SnackBar基本使用","priority":1,"subtitle":" \n【content】 : 中间内容组件 【Widget】\n【action】 : 右侧按钮 【SnackBarAction】\n【duration】 : 持续时长 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【elevation】 : 影深 【double】\n【shape】 : 形状 【ShapeBorder】\n【onVisible】 : 显示时回调 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomSnackBar extends StatefulWidget {\n @override\n _CustomSnackBarState createState() => _CustomSnackBarState();\n}\n\nclass _CustomSnackBarState extends State<CustomSnackBar> {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: FlatButton(\n color: Colors.blue,\n onPressed: () =>\n Scaffold.of(context).showSnackBar(_buildSnackBar()),\n child: Text(\n '点我弹出SnackBar',\n style: TextStyle(color: Colors.white),\n )));\n }\n\n Widget _buildSnackBar() {\n return SnackBar(\n elevation: 3,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(10), topRight: Radius.circular(10))),\n content: Text('Wellcome to for join Flutter Unit!'),\n duration: Duration(seconds: 3),\n //持续时间\n backgroundColor: Colors.red,\n onVisible: () => print('onVisible'),\n action: SnackBarAction(\n textColor: Colors.white, label: '确定', onPressed: () {}),\n );\n }\n}\n"},{"id":null,"widgetId":206,"name":"TabPageSelectorIndicator基本使用","priority":1,"subtitle":"【size】: 大小 【double】\n【backgroundColor】: 背景色 【Color】\n【borderColor】: 边线色 【Color】","code":"import 'package:flutter/material.dart';\nclass TabPageSelectorIndicatorDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n TabPageSelectorIndicator(\n backgroundColor: Colors.greenAccent,\n borderColor: Colors.deepPurpleAccent,\n size: 15,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.blue,\n borderColor: Colors.grey,\n size: 20,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.green,\n borderColor: Colors.red,\n size: 25,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.yellow,\n borderColor: Colors.brown,\n size: 30,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.amber,\n borderColor: Colors.purpleAccent,\n size: 35,\n ),\n ],\n ),\n );\n }\n\n}\n\n"},{"id":null,"widgetId":16,"name":"ListTile的密排属性","priority":3,"subtitle":"【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass DenseListTile extends StatefulWidget {\n @override\n _DenseListTileState createState() => _DenseListTileState();\n}\n\nclass _DenseListTileState extends State<DenseListTile> {\n bool _dense = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n selected: false,\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n dense: _dense,\n onTap: () => setState(() => _dense = !_dense),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":16,"name":"ListTile选中效果和长按事件","priority":2,"subtitle":"【selected】: 是否选中 【bool】\n【onTap】: 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass SelectListTile extends StatefulWidget {\n @override\n _SelectListTileState createState() => _SelectListTileState();\n}\n\nclass _SelectListTileState extends State<SelectListTile> {\n bool _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n selected: _selected,\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n onTap: () => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":16,"name":"ListTile的基本表现如下","priority":1,"subtitle":"【leading】: 左侧组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【trailing】: 尾组件 【Widget】\n【contentPadding】: 内边距 【EdgeInsetsGeometry】\n【onLongPress】: 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomListTile extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n ),\n );\n }\n}"},{"id":null,"widgetId":20,"name":"GridTileBar的基本表现如下","priority":1,"subtitle":"【value】 : 条目对象 【T】\n【leading】: 左侧组件 【Widget】\n【trailing】: 尾组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【backgroundColor】: 背景色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomGridTileBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return GridTileBar(\n backgroundColor: Colors.blue.withAlpha(120),\n trailing: Icon(\n Icons.star,\n color: Colors.red,\n ),\n leading: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/wy_200x300.jpg\"),\n ),\n title: Text(\"百里·巫缨\"),\n subtitle: Text(\"倾国必倾城\"),\n );\n }\n}\n"},{"id":null,"widgetId":21,"name":"GridTile的基本表现如下","priority":1,"subtitle":"【header】: 头组件 【Widget】\n【child】: 子组件 【Widget】\n【footer】: 脚组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomGridTile extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200, height: 200,\n child: GridTile(\n header: GridTileBar(\n backgroundColor: Colors.blue.withAlpha(120),\n trailing: Icon(\n Icons.star,\n color: Colors.red,\n ),\n leading: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/wy_200x300.jpg\"),\n ),\n title: Text(\"百里·巫缨\"),\n subtitle: Text(\"倾国必倾城\"),\n ),\n child: Opacity(\n opacity: 0.5,\n child: Image.asset(\n \"assets/images/sabar.jpg\",\n fit: BoxFit.cover,\n ),\n ),\n footer: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Text(\n \"ID:z\\$ySX32&29\",\n style: TextStyle(shadows: [\n Shadow(\n color: Colors.blue,\n offset: Offset(.1, .1),\n blurRadius: 2),\n ]),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":11,"name":"可以设置颜色和阴影","priority":2,"subtitle":"【backgroundColor】: 背景色 【Color】\n【shadowColor】: 阴影色 【Color】\n【elevation】: 影深 【double】","code":"import 'package:flutter/material.dart';\nclass ColorOfChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: <Widget>[\n Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n backgroundColor: Colors.grey.withAlpha(66),\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n ),\n Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n backgroundColor: Colors.cyanAccent.withAlpha(11),\n shadowColor: Colors.blue.withAlpha(88),\n elevation: 4,\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":11,"name":"可以设置右侧点击按钮","priority":3,"subtitle":"【deleteIcon】: 右侧组件(通常为Icon) 【Widget】\n【deleteIconColor】: 右侧组件颜色 【Color】\n【onDeleted】: 右侧组件点击事件 【Function】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass DeleteOfChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n backgroundColor: Colors.grey.withAlpha(66),\n shadowColor: Colors.orangeAccent,\n// deleteIcon: Icon(Icons.close,size: 18),\n deleteIconColor: Colors.red,\n onDeleted: () => DialogAbout.show(context),\n elevation: 3,\n );\n }\n}"},{"id":null,"widgetId":11,"name":"Chip的普通表现如下","priority":1,"subtitle":"【avatar】: 左侧组件 【Widget】\n【label】: 中间组件 【Widget】\n【padding】 : 内边距 【EdgeInsetsGeometry】\n【labelPadding】: label边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: <Widget>[\n Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n ),\n Chip(\n avatar: CircleAvatar(\n backgroundImage:\n AssetImage(\"assets/images/wy_200x300.jpg\")),\n label: Text(\"百里巫缨\"),\n padding: EdgeInsets.all(8),\n labelPadding: EdgeInsets.all(6),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":214,"name":"NavigationToolbar基本使用","priority":1,"subtitle":"【leading】 : 左侧组件 【Widget】\n【middle】: 中间组件 【Widget】\n【trailing】: 右侧组件组件 【Widget】\n【centerMiddle】: 中间组件是否居中 【bool】\n【middleSpacing】: 中间组件距左距离 【double】","code":"import 'package:flutter/material.dart';\nclass NavigationToolbarDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[\n Container(\n height: 60,\n child: NavigationToolbar(\n leading: Icon(Icons.ac_unit),\n middle: Text('middleSpacing#true'),\n middleSpacing: 20,\n centerMiddle: true,\n trailing: Icon(Icons.more_vert),\n ),\n ),\n Container(\n height: 60,\n child: NavigationToolbar(\n leading: Icon(Icons.ac_unit),\n middle: Text('middleSpacing#false'),\n middleSpacing: 20,\n centerMiddle: false,\n trailing: Icon(Icons.more_vert),\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":128,"name":"SimpleDialog基本使用","priority":1,"subtitle":" \n【title】 : 顶部组件 【Widget】\n【children】 : 子组件列表 【List<Widget>】\n【titlePadding】 : 顶部内边距 【EdgeInsetsGeometry】\n【contentPadding】 : 内容内边距 【EdgeInsetsGeometry】\n【backgroundColor】 : 右下角组件列表 【背景色】\n【elevation】 : 右下角组件列表 【背景色】\n【shape】 : 影深 【double】","code":"import 'dart:math';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomSimpleDialog extends StatelessWidget {\n final info = [\n '性别: 男 未婚',\n '微信: zdl1994328',\n \"掘金: 张风捷特烈\",\n \"github: toly1994328\",\n \"邮箱: 1981462008@qq.com\",\n ];\n\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: <Widget>[\n _buildSimpleDialog(context),\n Positioned(\n top: 70,\n right: 30,\n child: _buildRaisedButton(context)),\n\n ],\n );\n }\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildSimpleDialog(ctx));\n },\n child: Text(\n 'Just Show It',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n SimpleDialog _buildSimpleDialog(BuildContext context) {\n return SimpleDialog(\n title: _buildTitle(),\n titlePadding: EdgeInsets.only(\n top: 5,\n left: 20,\n ),\n contentPadding: EdgeInsets.symmetric(horizontal: 5),\n children: _buildChild(context),\n backgroundColor: Colors.white,\n elevation: 4,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n );\n }\n\n List<Column> _buildChild(BuildContext context) {\n return info\n .map((str) => Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n SimpleDialogOption(\n onPressed: () => print(str),\n child: Container(\n width: double.infinity,\n child: Text(\n str,\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n ),\n ),\n ),\n Divider(\n indent: 20,\n height: 12,\n color: info.indexOf(str) == info.length - 1\n ? Colors.transparent\n : Theme.of(context).dividerColor,\n )\n ],\n ))\n .toList();\n }\n\n Widget _buildTitle() {\n return Row(\n //标题\n children: <Widget>[\n Image.asset(\n \"assets/images/icon_head.png\",\n width: 30,\n height: 30,\n ),\n SizedBox(\n width: 10,\n ),\n Expanded(\n child: Text(\n \"张风捷特烈\",\n style: TextStyle(fontSize: 18),\n )),\n CloseButton()\n ],\n );\n }\n}\n"},{"id":null,"widgetId":23,"name":"MaterialButton长按事件","priority":2,"subtitle":"【highlightColor】: 长按高亮色 【Color】\n【onLongPress】: 长按事件 【Function】","code":"import 'package:flutter/material.dart';\nclass LongPressMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialButton(\n height: 40,\n elevation: 5,\n color: Colors.blue,\n highlightColor: Colors.green,\n textColor: Colors.white,\n padding: EdgeInsets.all(8),\n child: Text(\"MaterialButton\"),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n }\n}"},{"id":null,"widgetId":23,"name":"MaterialButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【height】: 高 【double】\n【elevation】: 影深 【double】\n【child】: 子组件 【Widget】\n【textColor】: 子组件文字颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialButton(\n height: 40,\n elevation: 5,\n color: Colors.orangeAccent,\n textColor: Colors.white,\n splashColor: Colors.blue,\n padding: EdgeInsets.all(8),\n child: Text(\"MaterialButton\"),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n }\n}"},{"id":null,"widgetId":23,"name":"MaterialButton的自定义形状","priority":3,"subtitle":"【shape】: 形状 【ShapeBorder】","code":"import 'package:flutter/material.dart';\nclass ShapeMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: <Widget>[\n Container(\n width: 40,\n height: 40,\n child: MaterialButton(\n padding: EdgeInsets.all(0),\n textColor: Color(0xffFfffff),\n elevation: 3,\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n splashColor: Colors.red,\n child: Icon(\n Icons.add,\n color: Colors.white,\n ),\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage')),\n ),\n Container(\n width: 100,\n height: 40,\n child: MaterialButton(\n padding: EdgeInsets.all(0),\n textColor: Color(0xffFfffff),\n elevation: 3,\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n splashColor: Colors.red,\n child: Icon(\n Icons.remove,\n color: Colors.white,\n ),\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(15))),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage')),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":32,"name":"CloseButton点击事件","priority":1,"subtitle":" 点击时会退出当前栈","code":"import 'package:flutter/material.dart';\nclass CustomCloseButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CloseButton();\n }\n}\n"},{"id":null,"widgetId":58,"name":"TabBar基本使用","priority":1,"subtitle":" \n【controller】 : 控制器 【TabController】\n【indicatorColor】 : 指示器颜色 【指示器颜色】\n【indicatorWeight】 : 指示器高 【double】\n【indicatorPadding】 : 指示器边距 【EdgeInsetsGeometry】\n【labelStyle】 : 页签文字样式 【TextStyle】\n【unselectedLabelStyle】 : 未选中文字样式 【TextStyle】\n【isScrollable】 : 是否可滑动 【bool】\n【onTap】 : 页签点击回调 【Function(int)】\n【tabs】 : 标签组件 【List<Widget>】","code":"import 'package:flutter/material.dart';\nclass CustomTabBar extends StatefulWidget {\n @override\n _CustomTabBarState createState() => _CustomTabBarState();\n}\n\nclass _CustomTabBarState extends State<CustomTabBar>\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return TabBar(\n onTap: (tab) {\n print(tab);\n },\n labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n unselectedLabelStyle: TextStyle(fontSize: 16),\n isScrollable: true,\n controller: _tabController,\n labelColor: Colors.blue,\n indicatorWeight: 3,\n indicatorPadding: EdgeInsets.symmetric(horizontal: 10),\n unselectedLabelColor: Colors.grey,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n );\n }\n}"},{"id":null,"widgetId":58,"name":"通过修改源码可实现无水波纹","priority":1,"subtitle":" \n详见:components/flutter/no_shadow_tab_bar.dart","code":"import 'package:flutter/material.dart';\nimport 'no_shadow_tab_bar.dart';\nclass NoShadowTabBarDemo extends StatefulWidget {\n @override\n _NSTabBarState createState() => _NSTabBarState();\n}\n\nclass _NSTabBarState extends State<NoShadowTabBarDemo>\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return NoShadowTabBar(\n onTap: (tab) {\n print(tab);\n },\n labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n unselectedLabelStyle: TextStyle(fontSize: 16),\n isScrollable: true,\n controller: _tabController,\n labelColor: Colors.blue,\n indicatorWeight: 3,\n indicatorPadding: EdgeInsets.symmetric(horizontal: 10),\n unselectedLabelColor: Colors.grey,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n );\n }\n}"},{"id":null,"widgetId":37,"name":"GridPage基础属性","priority":1,"subtitle":"【child】: 子组件 【Widget】\n【color】: 颜色 【Color】\n【interval】: 小块边长 【double】","code":"import 'package:flutter/material.dart';\nclass CustomGridPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200,\n height: 100,\n child: GridPaper(\n color: Colors.red,\n interval: 50,\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n fit: BoxFit.cover,\n )));\n }\n}"},{"id":null,"widgetId":37,"name":"GridPage再分割","priority":2,"subtitle":"【child】: 子组件 【Widget】\n【color】: 颜色 【Color】\n【subdivisions】: 小块中子块个数 【int】\n【divisions】: 小块中子块的分割数 【int】","code":"import 'package:flutter/material.dart';\nclass DivisionsGridPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200,\n height: 100,\n child: GridPaper(\n color: Colors.red,\n interval: 50,\n divisions: 4,\n subdivisions: 4,\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n fit: BoxFit.cover,\n )));\n }\n}\n"},{"id":null,"widgetId":129,"name":"CupertinoAlertDialog基本使用","priority":1,"subtitle":" \n【title】 : 顶部组件 【Widget】\n【content】 : 内容组件 【Widget】\n【actions】 : 顶部文字样式 【List<Widget>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoAlertDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildRaisedButton(context),\n _buildCupertinoAlertDialog(context),\n ],\n );\n }\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(\n context: context,\n builder: (ctx) => _buildCupertinoAlertDialog(context));\n },\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n Widget _buildCupertinoAlertDialog(BuildContext context) {\n return Material(\n color: Colors.transparent,\n child: CupertinoAlertDialog(\n title: _buildTitle(context),\n content: _buildContent(),\n actions: <Widget>[\n CupertinoButton(\n child: Text(\"Yes, Delete\"),\n onPressed: () => Navigator.pop(context),\n ),\n CupertinoButton(\n child: Text(\"Cancle\"),\n onPressed: () => Navigator.pop(context),\n ),\n ]),\n );\n }\n\n Widget _buildTitle(context) {\n return Row(\n //标题\n children: <Widget>[\n Icon(\n CupertinoIcons.delete_solid,\n color: Colors.red,\n ),\n Expanded(\n child: Text(\n 'Delete File',\n style: TextStyle(color: Colors.red, fontSize: 20),\n )),\n InkWell(\n child: Icon(CupertinoIcons.clear_thick),\n onTap: () => Navigator.pop(context),\n )\n ]);\n }\n\n Widget _buildContent() {\n return Padding(\n padding: const EdgeInsets.only(top: 18.0),\n child: Column(\n children: <Widget>[\n Text(\n ' Hi toly! If you push the conform buttom ,'\n ' You will lose this file. Are you sure wand to do that?',\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":218,"name":"返回按钮基本使用","priority":1,"subtitle":"【onPressed】 : 点击事件 【VoidCallback】\n【color】: 颜色 【Color】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CupertinoNavigationBarBackButtonDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: CupertinoNavigationBarBackButton(\n color: Colors.deepPurpleAccent,\n onPressed: ()=>Navigator.of(context).pop(),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":107,"name":"Spacer基本使用","priority":1,"subtitle":" \n一个Spacer会占据可延伸区域","code":"import 'package:flutter/material.dart';\nclass OneSpacer extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return\n Container(\n color: Colors.grey.withAlpha(33),\n child: Row(children: <Widget>[\n Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: Colors.red,\n ),\n Spacer(),\n Container(\n alignment: Alignment.center,\n width: 60,\n height: 50,\n color: Colors.blue,\n ),\n ],),\n );\n }\n}"},{"id":null,"widgetId":148,"name":"Tab基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【text】 : 文字 【String】\n【icon】 : 下方组件 【Widgit】\n text和child不能同时存在","code":"import 'package:flutter/material.dart';\nclass CustomTab extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n Tab(\n icon:Icon( Icons.add,color: Colors.blue,),\n child: Text('添加'),\n ),\n Tab(\n icon:Icon( Icons.close,color: Colors.red,),\n text: '删除',\n ),\n Tab(\n icon:Icon( Icons.refresh,color: Colors.green),\n text: '更新',\n ),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":107,"name":"多个Spacer空间分配","priority":2,"subtitle":" \n【flex】 : 剩余空间分配占比 【int】","code":"import 'package:flutter/material.dart';\nclass ManySpacer extends StatefulWidget {\n @override\n _ManySpacerState createState() => _ManySpacerState();\n}\n\nclass _ManySpacerState extends State<ManySpacer> {\n int _flexA=1;\n int _flexB=1;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSliders(),\n Container(\n color: Colors.grey.withAlpha(33),\n child: Row(children: <Widget>[\n Spacer(flex: _flexA),\n Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: Colors.red,\n ),\n Spacer(flex: _flexB),\n Container(\n alignment: Alignment.center,\n width: 60,\n height: 50,\n color: Colors.blue,\n ),\n ],),\n )\n ],\n );\n }\n\n Widget _buildSliders() {\n return Column(\n children: <Widget>[\n Slider(\n divisions: 20,\n min: 1,\n max: 10,\n label: \"左边flex: $_flexA\",\n value: _flexA.toDouble(),\n onChanged: (v) => setState(() => _flexA = v.round())\n ),\n Slider(\n divisions: 20,\n label: \"右边flex: $_flexB\",\n min: 1,\n max: 10,\n value: _flexB.toDouble(),\n onChanged: (v) => setState(() => _flexB = v.round())\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":35,"name":"VerticalDivider颜色和粗细","priority":1,"subtitle":"【color】: 颜色 【Color】\n【thickness】: 线粗细 【double】","code":"import 'package:flutter/material.dart';\nclass CustomVerticalDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [1.0, 2.0, 4.0, 6.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Container(\n height: 150,\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: dataColor\n .map((e) => VerticalDivider(\n color: e,\n thickness: data[e],\n ))\n .toList(),\n ),\n );\n }\n}"},{"id":null,"widgetId":35,"name":"VerticalDivider宽度和空缺","priority":2,"subtitle":"【indent】: 前面空缺长度 【double】\n【endIndent】: 后面空缺长度 【double】\n【height】: 占位高 【double】","code":"import 'package:flutter/material.dart';\nclass HeightVerticalDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [10.0, 20.0, 30.0, 40.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Container(\n height: 150,\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: dataColor\n .map((e) => VerticalDivider(\n color: e,\n indent:data[e],\n endIndent: data[e]*2,\n width: data[e],\n thickness: data[e]/10,\n ))\n .toList(),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":7,"name":"用于显示一个纯色图片","priority":1,"subtitle":"【入参】 : 图片资源 【ImageProvider】\n【size】 : 大小 【double】\n【color】: 角标颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomImageIcon extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.blue: 50.0,\n Colors.red: 60.0,\n Colors.green: 70.0,\n Colors.yellow: 80.0,\n };\n return Wrap(\n spacing: 10,\n children: data.keys\n .map((e) => ImageIcon(\n AssetImage(\"assets/images/leaf.png\"),\n color: e,\n size: data[e],\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":22,"name":"右上角和底部","priority":2,"subtitle":"【otherAccountsPictures】: 右上组件 【List<Widget>】\n【onDetailsPressed】: 右下角点击事件 【Function()】\n【arrowColor】: 右下角按钮颜色 【Color】\n【margin】: 外边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass ProUAGHP extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width / 3 * 2,\n child: UserAccountsDrawerHeader(\n margin: EdgeInsets.all(10),\n accountName: Container(\n padding: const EdgeInsets.all(8.0),\n child: Text(\n \"张风捷特烈\",\n style:\n TextStyle(color: Colors.orangeAccent, fontSize: 22,\n shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2),\n ]),\n ),\n ),\n accountEmail: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Text(\"1981462002@qq.com\",\n style: TextStyle(\n color: Colors.white, fontSize: 14,\n shadows: [\n Shadow(\n color: Colors.orangeAccent,\n offset: Offset(.5, .5),\n blurRadius: 2),\n ])),\n ),\n currentAccountPicture: Container(\n padding: const EdgeInsets.all(15.0),\n child: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/icon_head.png\"),\n ),\n ),\n otherAccountsPictures: <Widget>[\n FlutterLogo(colors: Colors.green),\n ],\n onDetailsPressed: () {\n\n },\n arrowColor: Colors.white,\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage(\"assets/images/caver.jpeg\")),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":22,"name":"该组件的基本表现如下","priority":1,"subtitle":"【currentAccountPicture】: 上组件 【Widget】\n【accountName】: 中组件 【Widget】\n【accountEmail】: 下组件 【Widget】\n【decoration】: 装饰 【Decoration】","code":"import 'package:flutter/material.dart';\nclass CustomUAGHP extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width / 3 * 2,\n child: UserAccountsDrawerHeader(\n accountName: Container(\n padding: const EdgeInsets.all(8.0),\n child: Text(\n \"张风捷特烈\",\n style:\n TextStyle(color: Colors.orangeAccent, fontSize: 22, shadows: [\n Shadow(\n color: Colors.black, offset: Offset(.5, .5), blurRadius: 2),\n ]),\n ),\n ),\n accountEmail: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Text(\"1981462002@qq.com\",\n style: TextStyle(color: Colors.white, fontSize: 14, shadows: [\n Shadow(\n color: Colors.orangeAccent,\n offset: Offset(.5, .5),\n blurRadius: 2),\n ])),\n ),\n currentAccountPicture: Container(\n padding: const EdgeInsets.all(15.0),\n child: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/icon_head.png\"),\n ),\n ),\n decoration: BoxDecoration(\n image: DecorationImage(image: AssetImage(\"assets/images/caver.jpeg\")),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":126,"name":"Dialog基本使用","priority":1,"subtitle":" \n【child】 : 动画图标数据 【Widget】\n【elevation】 : 影深 【double】\n【backgroundColor】 : 背景色 【Color】\n【shape】 : 形状 【ShapeBorder】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildRaisedButton(context),\n _buildDialog(),\n ],\n );\n }\n\n Widget _buildDialog() => Dialog(\n backgroundColor: Colors.white,\n elevation: 5,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n child: Container(\n width: 50,\n child: DeleteDialog(),\n ),\n );\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildDialog());\n },\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n\n );\n}\n\nclass DeleteDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[\n _buildBar(context),\n _buildTitle(),\n _buildContent(),\n _buildFooter(context),\n ],\n ),\n );\n }\n\n Widget _buildTitle() {\n return Text(\n 'Delete Doucument',\n style: TextStyle(color: Color(0xff5CC5E9), fontSize: 24),\n );\n }\n\n Widget _buildContent() {\n return Padding(\n padding: const EdgeInsets.all(15.0),\n child: Text(\n ' Hi toly! If you push the conform buttom ,'\n ' You will lose this file. Are you sure wand to do that?',\n style: TextStyle(color: Color(0xffCFCFCF), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n );\n }\n\n Widget _buildFooter(context) {\n return Padding(\n padding: const EdgeInsets.only(bottom: 15.0, top: 10,left: 10,right: 10),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n Container(\n alignment: Alignment.center,\n height: 40,\n width: 100,\n decoration: BoxDecoration(\n borderRadius: BorderRadius.all(Radius.circular(30)),\n color: Color(0xff73D1EE)),\n child: Text('Yes',\n style: TextStyle(color: Colors.white, fontSize: 16)),\n ),\n InkWell(\n onTap: ()=>Navigator.of(context).pop(),\n child: Container(\n alignment: Alignment.center,\n height: 40,\n width: 100,\n decoration: BoxDecoration(\n borderRadius: BorderRadius.all(Radius.circular(30)),\n color: Colors.orangeAccent),\n child: Text('Cancle',\n style: TextStyle(color: Colors.white, fontSize: 16)),\n ),\n )\n ],\n ),\n );\n }\n\n _buildBar(context) => Container(\n height: 30,\n alignment: Alignment.centerRight,\n margin: EdgeInsets.only(right: 10, top: 5),\n child: InkWell(\n onTap: ()=>Navigator.of(context).pop(),\n child: Icon(\n Icons.close,\n color: Color(0xff82CAE3),\n ),\n ),\n );\n}\n"},{"id":null,"widgetId":131,"name":"CupertinoActionSheet基本使用","priority":1,"subtitle":" \n【title】 : 第一行组件 【Widget】\n【message】 : 第二行组件 【Widget】\n【cancelButton】 : 取消按钮处组件 【Widget】\n【actions】 : 中间组件列表 【List<Widget>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoActionSheet extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[\n _buildRaisedButton(context),\n _buildCupertinoActionSheet(context),\n ],\n );\n }\n\n Widget _buildCupertinoActionSheet(BuildContext context) =>\n Container(\n alignment: Alignment.bottomCenter,\n child: CupertinoActionSheet(\n title: Text(\"Please chose a language\"),\n message: Text('the language you use in this application.'),\n cancelButton: CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text(\"Cancel\")),\n actions: <Widget>[\n CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text('Dart')),\n CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text('Java')),\n CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text('Kotlin')),\n ],\n ),\n );\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () => showDialog(\n context: context,\n builder: (ctx) => _buildCupertinoActionSheet(context)),\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n );\n}\n"},{"id":null,"widgetId":155,"name":"DrawerHeader基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【decoration】 : 装饰 【Decoration】\n【margin】 : 外边距 【EdgeInsetsGeometry】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomDrawerHeader extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 400,\n child: Scaffold(\n appBar: AppBar(\n title: Text('Flutter Unit'),\n ),\n drawer: Drawer(\n elevation: 3,\n child: _buildChild(),\n ),\n ),\n );\n }\n\n Widget _buildChild() => ListView(\n padding: EdgeInsets.zero,\n children: <Widget>[\n _buildHeader(),\n ListTile(\n leading: Icon(\n Icons.star,\n color: Colors.blue,\n ),\n title: Text('我的收藏'),\n ),\n ListTile(\n leading: Icon(\n Icons.palette,\n color: Colors.orangeAccent,\n ),\n title: Text('我的绘画'),\n ),\n ListTile(\n leading: Icon(\n Icons.insert_drive_file,\n color: Colors.green,\n ),\n title: Text('我的文件'),\n ),\n ],\n );\n\n Widget _buildHeader() {\n return DrawerHeader(\n margin: EdgeInsets.all(10),\n padding: EdgeInsets.only(left: 20,top: 15),\n decoration: BoxDecoration(\n borderRadius: BorderRadius.only(\n topLeft:Radius.circular(40),\n topRight:Radius.circular(40)\n ),\n image: DecorationImage(\n image: AssetImage('assets/images/caver.jpeg'),\n fit: BoxFit.cover),\n ),\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 24, color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)\n ]),\n ),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"Container还具有变换性","priority":5,"subtitle":"【transform】 : 变换矩阵 【Matrix4】\n基于Matrix4的矩阵变换，变换详情见线性代数","code":"import 'package:flutter/material.dart';\nimport 'dart:math';\nclass ContainerTransform extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n //容器\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 150,\n height: 150 * 0.618,\n transform: Matrix4.skew(-pi / 10, 0),\n child: Text(\n \"Container\",\n style: TextStyle(fontSize: 20),\n ),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"Container的约束性","priority":6,"subtitle":" \n【constraints】 : 约束 【BoxConstraints】\n会约束该区域的尺寸，不会小于指定的最小宽高，也不会大于指定的最大宽高。","code":"import 'package:flutter/material.dart';\nclass ContainerConstraints extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n //容器\n color: Colors.blue,\n width: 200,\n height: 200 * 0.618,\n constraints: BoxConstraints(\n minWidth: 100, maxWidth: 150,\n minHeight: 20, maxHeight: 100),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可对子组件进行对齐定位","priority":3,"subtitle":"【alignment】 : 对齐定位 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass ContainerAlignment extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n alignment: Alignment.bottomRight,\n width: 200,\n height: 200 * 0.618,\n color: Colors.grey.withAlpha(88),\n child: Icon(\n Icons.android,\n color: Colors.green,\n ),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可用于显示一个指定宽高的区域","priority":1,"subtitle":"【width】 : 宽 【int】\n【高】: 外边距 【int】\n【color】: 子组件 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomContainer extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n alignment: Alignment.topLeft,\n width: 200,\n height: 200 * 0.618,\n color: Colors.red.withAlpha(88),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可以在区域中放入一个子组件","priority":2,"subtitle":"【padding】 : 内边距 【EdgeInsetsGeometry】\n【margin】: 外边距 【EdgeInsetsGeometry】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass ContainerWithChild extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n alignment: Alignment.topLeft,\n padding: EdgeInsets.all(20),\n margin: EdgeInsets.all(10),\n width: 200,\n height: 200 * 0.618,\n color: Colors.grey.withAlpha(88),\n child: Icon(Icons.android),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可对子组件进行装饰","priority":4,"subtitle":" \n【decoration】 : 装饰 【Decoration】\n可装饰: 边线、圆弧、颜色、渐变色、阴影、图片等内容","code":"import 'package:flutter/material.dart';\nclass ContainerDecoration extends StatelessWidget {\n\n static const rainbow = <int>[\n 0xffff0000,\n 0xffFF7F00,\n 0xffFFFF00,\n 0xff00FF00,\n 0xff00FFFF,\n 0xff0000FF,\n 0xff8B00FF\n ];\n\n @override\n Widget build(BuildContext context) {\n var stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];\n return Container(//容器\n alignment: Alignment.center,\n width: 200,\n height: 200 * 0.618,\n margin: EdgeInsets.all(20),\n padding: EdgeInsets.all(20),\n decoration: BoxDecoration(//添加渐变色\n gradient: LinearGradient(\n stops: stops,\n colors: rainbow.map((e) => Color(e)).toList()),\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(50),\n bottomRight: Radius.circular(50)),\n boxShadow: [\n BoxShadow(\n color: Colors.grey,\n offset: Offset(1, 1),\n blurRadius: 10,\n spreadRadius: 1),\n ]),\n child: Text(\n \"Container\",\n style: TextStyle(fontSize: 20),\n ),\n );\n }\n}"},{"id":null,"widgetId":162,"name":"ListView.separated构造","priority":3,"subtitle":" \n【separatorBuilder】 : 条目构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass SeparatedListView extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView.separated(\n separatorBuilder: (context, index) => Divider(\n thickness: 1,\n height: 1,\n color: Colors.orange,\n ),\n itemCount: data.length,\n itemBuilder: (context, index) => _buildItem(data[index]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n Widget _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n}\n"},{"id":null,"widgetId":162,"name":"ListView基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【padding】 : 点击事件 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomListView extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView(\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":162,"name":"ListView.builder构造","priority":3,"subtitle":" \n【itemCount】 : 条目个数 【int】\n【itemBuilder】 : 条目构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass BuilderListView extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView.builder(\n itemCount: data.length,\n itemBuilder: (context, index) => _buildItem(data[index]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n Widget _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n}"},{"id":null,"widgetId":162,"name":"ListView横向滑动","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向滑动 【bool】\n【shrinkWrap】 : 无边界时是否包裹 【bool】","code":"import 'package:flutter/material.dart';\nclass HorizontalListView extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView(\n reverse: true,\n shrinkWrap: true,\n scrollDirection: Axis.horizontal,\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":12,"name":"ChoiceChip的普通表现如下","priority":1,"subtitle":"【selectedColor】: 选中时颜色 【Color】\n【selectedShadowColor】: 选中时阴影颜色 【Color】\n【onSelected】: 选中事件 【Fuction(bool)】\n 其他属性同Chip组件，无右侧组件。","code":"import 'package:flutter/material.dart';\nclass CustomChoiceChip extends StatefulWidget {\n @override\n _CustomChoiceChipState createState() => _CustomChoiceChipState();\n}\n\nclass _CustomChoiceChipState extends State<CustomChoiceChip> {\n bool _select = false;\n\n @override\n Widget build(BuildContext context) {\n return ChoiceChip(\n selected: _select,\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n label: Text(\n _select ?\n \"You are selected it.\" :\n \"This is a ChoiceChip.\",\n style: TextStyle(fontSize: 16),\n ),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n selectedColor: Colors.orangeAccent.withAlpha(44),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n onSelected: (value) => setState(() => _select = value),\n );\n }\n}"},{"id":null,"widgetId":141,"name":"SnackBarAction基本使用","priority":1,"subtitle":" \n【label】 : 标签 【String】\n【textColor】 : 文字颜色 【Color】\n【disabledTextColor】 : 文字失效色 【Color】\n【onPressed】 : 点击回调 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomSnackBarAction extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: SnackBarAction(\n disabledTextColor: Colors.red,\n textColor: Colors.blue,\n label: '确定',\n onPressed: () => print('onPressed')));\n }\n}\n"},{"id":null,"widgetId":168,"name":"文字样式-ThemeData#TextTheme","priority":1,"subtitle":" \n子组件可以通过ThemeData.of获取主题的数据进行使用。","code":"import 'package:flutter/material.dart';\nclass TextThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var queryData = Theme.of(context).textTheme;\n var styles = {\n \"headline: \": queryData.headline,\n \"title: \": queryData.title,\n \"subhead: \": queryData.subhead,\n \"subtitle: \": queryData.body1,\n \"body2: \": queryData.body2,\n \"button: \": queryData.button,\n \"overline: \": queryData.overline,\n \"subtitle: \": queryData.subtitle,\n \"button: \": queryData.caption,\n \"display1: \": queryData.display1,\n \"display2: \": queryData.display2,\n \"display3: \": queryData.display3,\n \"display4: \": queryData.display4,\n };\n\n return Container(\n child: Column(\n children: styles.keys.map((e) => buildItem(e, styles[e])).toList(),\n ),\n );\n }\n\n Widget buildItem(String e, TextStyle style) => Column(\n children: <Widget>[\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: <Widget>[\n Text(\n e,\n style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n ),\n Text(\n \"@toly\",\n style: style,\n )\n ],\n ),\n ),\n Divider(\n height: 1,\n )\n ],\n );\n}"},{"id":null,"widgetId":168,"name":"Theme的用法","priority":2,"subtitle":" \n使用Theme,可以指定非常多的属性作为主题,这些属性将应用于所有的后代组件，如指定字体、滑块、卡片、文字、分割线、按钮等属性。","code":"import 'package:flutter/material.dart';\nclass CustomTheme extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Theme(\n data: ThemeData(\n cardTheme: CardTheme(color: Colors.red, elevation: 4),\n dividerTheme: DividerThemeData(\n color: Colors.blue,\n thickness: 2\n ),\n sliderTheme: SliderThemeData(\n thumbColor: Colors.red,\n activeTrackColor: Colors.green,\n inactiveTrackColor: Colors.grey,\n )),\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Card(\n child: Container(\n width: 50,\n height: 50,\n color: Colors.transparent,\n ),\n ),\n Container(\n width: 150,\n child: Slider(value: 0.8, onChanged: (v) => {})),\n Container( width: 150,child: Divider())\n ]));\n }\n}"},{"id":null,"widgetId":15,"name":"FilterChip可接受选择事件","priority":1,"subtitle":"【selected】: 是否选择 【bool】\n【onSelected】: 选择事件 【Function(bool)】\n【selectedColor】: 选择后的颜色 【Color】\n【selectedShadowColor】: 选择后的阴影颜色 【Color】,","code":"import 'package:flutter/material.dart';\nclass CustomFilterChip extends StatefulWidget {\n @override\n _CustomFilterChipState createState() => _CustomFilterChipState();\n}\n\nclass _CustomFilterChipState extends State<CustomFilterChip> {\n final Map<String, String> map = {\n 'A': 'Ant',\n 'B': 'Bug',\n 'C': 'Cat',\n 'D': 'Dog',\n };\n List<String> _selected = <String>[];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Wrap(\n children: map.keys.map((key) =>\n _buildChild(key)).toList(),\n ),\n Container(\n padding: EdgeInsets.all(10),\n child: Text('您已选择: ${_selected.join(', ')}')),\n ],\n );\n }\n\n Padding _buildChild(String key) {\n return Padding(\n padding: const EdgeInsets.all(4.0),\n child: FilterChip(\n selectedColor: Colors.orange.withAlpha(55),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n pressElevation: 5,\n elevation: 3,\n avatar: CircleAvatar(child: Text(key)),\n label: Text(map[key]),\n selected: _selected.contains(map[key]),\n onSelected: (bool value) {\n setState(() {\n if (value) {\n _selected.add(map[key]);\n } else {\n _selected.removeWhere((name) => name == map[key]);\n }\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":352,"name":"CupertinoDialogAction基本使用","priority":1,"subtitle":"【isDefaultAction】 : 是否是默认性操作 【bool】\n【isDestructiveAction】 : 是否是毁灭性操作 【bool】\n【textStyle】: 文字样式 【TextStyle】\n【onPressed】: 点击事件 【VoidCallback】\n【child】: 子组件 【Widget】","code":"import 'dart:async';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'dart:ui' as ui;\nclass CupertinoDialogActionDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n CupertinoDialogAction(\n isDestructiveAction: false,\n onPressed: ()=>_toast(context),\n child: Text('CupertinoDialogAction'),\n ),\n CupertinoDialogAction(\n isDestructiveAction: true,\n onPressed: ()=>_toast(context),\n child: Text('CupertinoDialogAction'),\n ),\n ],\n );\n }\n\n _toast(BuildContext context){\n Scaffold.of(context).showSnackBar(SnackBar(\n backgroundColor: Theme.of(context).primaryColor,\n content: Text('CupertinoDialogAction'),));\n }\n}\n"},{"id":null,"widgetId":34,"name":"Divider颜色和粗细","priority":1,"subtitle":"【color】: 颜色 【Color】\n【thickness】: 线粗细 【double】","code":"import 'package:flutter/material.dart';\nclass CustomDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [1.0, 2.0, 4.0, 6.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Column(\n children: dataColor\n .map((e) => Divider(\n color: e,\n thickness: data[e],\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":34,"name":"Divider高度和空缺","priority":2,"subtitle":"【indent】: 前面空缺长度 【double】\n【endIndent】: 后面空缺长度 【double】\n【height】: 占位高 【double】","code":"import 'package:flutter/material.dart';\nclass HeightDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [10.0, 20.0, 30.0, 40.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Column(\n children: dataColor\n .map((e) => Divider(\n color: e,\n indent:data[e],\n endIndent: data[e]*2,\n height: data[e],\n thickness: data[e]/10,\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":205,"name":"TabPageSelector基本使用","priority":1,"subtitle":"【controller】 : 控制器 【TabController】\n【indicatorSize】: 指示器大小 【double】\n【selectedColor】: 选中色 【Color】\n【color】: 颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass TabPageSelectorDemo extends StatefulWidget {\n @override\n _TabPageSelectorDemoState createState() => _TabPageSelectorDemoState();\n}\n\nclass _TabPageSelectorDemoState extends State<TabPageSelectorDemo>\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Stack(\n alignment: Alignment.center,\n children: <Widget>[\n Container(color: Colors.purple, child: _buildTableBarView()),\n Positioned(\n bottom: 10,\n child: buildTabPageSelector(),\n ),\n ],\n ),\n );\n }\n\n Widget buildTabPageSelector() => TabPageSelector(\n controller: _tabController,\n color: Colors.white,\n indicatorSize: 10,\n selectedColor: Colors.orangeAccent,\n );\n\n Widget _buildTableBarView() => TabBarView(\n controller: _tabController,\n children: tabs\n .map((e) => Center(\n child: Text(\n e,\n style: TextStyle(color: Colors.white, fontSize: 20),\n )))\n .toList());\n}\n"},{"id":null,"widgetId":142,"name":"BottomSheet基本使用","priority":1,"subtitle":" \n【builder】 : 组件构造器 【WidgetBuilder】\n【backgroundColor】 : 背景色 【Color】\n【elevation】 : 影深 【double】\n【shape】 : 形状 【ShapeBorder】\n【onClosing】 : 关闭回调 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomBottomSheet extends StatefulWidget {\n @override\n _CustomBottomSheetState createState() => _CustomBottomSheetState();\n}\n\nclass _CustomBottomSheetState extends State<CustomBottomSheet> {\n bool opened = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: FlatButton(\n color: Colors.blue,\n onPressed: () {\n opened = !opened;\n opened\n ? Scaffold.of(context)\n .showBottomSheet((_) => _buildBottomSheet())\n : Navigator.of(context).pop();\n },\n child: Text(\n '点我显隐BottomSheet',\n style: TextStyle(color: Colors.white),\n )));\n }\n\n Widget _buildBottomSheet() => BottomSheet(\n enableDrag: true,\n elevation: 4,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topRight: Radius.circular(60),\n topLeft: Radius.circular(60),\n )\n ),\n backgroundColor: Colors.transparent,\n onClosing: () => print('onClosing'),\n builder: (_) => (Container(\n height: 250,\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/sabar_bar.jpg'),\n fit: BoxFit.cover),\n borderRadius: BorderRadius.only(\n topRight: Radius.circular(60),\n topLeft: Radius.circular(60),\n )),\n )));\n}\n"},{"id":null,"widgetId":17,"name":"CheckBoxListTile的选中效果","priority":2,"subtitle":"【selected】: 是否选中 【bool】","code":"import 'package:flutter/material.dart';\nclass SelectCheckBoxListTile extends StatefulWidget {\n @override\n _SelectCheckBoxListTileState createState() => _SelectCheckBoxListTileState();\n}\n\nclass _SelectCheckBoxListTileState extends State<SelectCheckBoxListTile> {\n var _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: CheckboxListTile(\n value: _selected,\n selected: _selected,\n checkColor: Colors.yellow,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":17,"name":"CheckBoxListTile的密排属性","priority":3,"subtitle":"【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass DenseCheckBoxListTile extends StatefulWidget {\n @override\n _DenseCheckBoxListTileState createState() => _DenseCheckBoxListTileState();\n}\n\nclass _DenseCheckBoxListTileState extends State<DenseCheckBoxListTile> {\n var _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: CheckboxListTile(\n value: _selected,\n dense: true,\n checkColor: Colors.yellow,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":17,"name":"CheckBoxListTile的基本表现如下","priority":1,"subtitle":"【secondary】: 左侧组件 【Widget】\n【checkColor】: ✔️颜色 【Color】\n【activeColor】: 选中时外框颜色 【Color】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【onChanged】: 选中事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass CustomCheckBoxListTile extends StatefulWidget {\n @override\n _CustomCheckBoxListTileState createState() => _CustomCheckBoxListTileState();\n}\n\nclass _CustomCheckBoxListTileState extends State<CustomCheckBoxListTile> {\n var _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: CheckboxListTile(\n value: _selected,\n checkColor: Colors.yellow,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":203,"name":"OrientationBuilder基本使用","priority":1,"subtitle":"【builder】 : 方向组件构造器 【OrientationWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass OrientationBuilderDemo extends StatefulWidget {\n @override\n _OrientationBuilderDemoState createState() => _OrientationBuilderDemoState();\n}\n\nclass _OrientationBuilderDemoState extends State<OrientationBuilderDemo> {\n double _width = 200;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Container(\n width: _width,\n height: 200,\n child: OrientationBuilder(builder: _builder),\n color: Colors.orange,\n ),\n _buildSlider()\n ],\n );\n }\n\n //根据回调的orientation返回组件\n Widget _builder(BuildContext context, Orientation orientation) {\n switch(orientation){\n case Orientation.portrait:\n return Icon(Icons.phone_android,size: 60,);\n break;\n case Orientation.landscape:\n return RotatedBox(\n quarterTurns: 1,\n child: Icon(Icons.phone_android,size: 60,));\n break;\n default: return Container();\n }\n }\n\n Widget _buildSlider() =>Slider(\n value: _width,\n max: 350.0,\n min: 80.0,\n divisions: 17,\n onChanged: (v)=> setState(() => _width= v),\n );\n}\n"},{"id":null,"widgetId":132,"name":"CupertinoActionSheetAction基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【isDefaultAction】 : 是否默认选中 【bool】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomCupertinoActionSheetAction extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n color: Colors.grey.withAlpha(33),\n child: CupertinoActionSheetAction(\n isDefaultAction: true,\n onPressed: () => DialogAbout.show(context),\n child: Text('张风捷特烈')),\n ),\n Container(\n color: Colors.grey.withAlpha(33),\n margin: EdgeInsets.all(5),\n child: CupertinoActionSheetAction(\n isDefaultAction: false,\n onPressed: () => DialogAbout.show(context),\n child: Text('百里·巫缨')),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":125,"name":"AnimatedIcon基本使用","priority":1,"subtitle":" \n【icon】 : 动画图标数据 【AnimatedIcons】\n【size】 : 大小 【double】\n【color】 : 颜色 【Color】\n【progress】 : 动画 【Animation<double>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomAnimatedIcon extends StatefulWidget {\n @override\n _CustomAnimatedIconState createState() => _CustomAnimatedIconState();\n}\n\nclass _CustomAnimatedIconState extends State<CustomAnimatedIcon>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Wrap(\n runSpacing: 30,\n children: _buildChildren(),\n ),\n );\n }\n\n final data = {\n Colors.orange: AnimatedIcons.menu_arrow,\n Colors.blue: AnimatedIcons.ellipsis_search,\n Colors.red: AnimatedIcons.close_menu,\n Colors.green: AnimatedIcons.arrow_menu,\n Colors.cyanAccent: AnimatedIcons.play_pause,\n Colors.purple: AnimatedIcons.pause_play,\n };\n\n List<Widget> _buildChildren() => data.keys\n .map((e) => AnimatedIcon(\n size: 50,\n color: e,\n icon: data[e],\n progress: _ctrl,\n ))\n .toList();\n}\n"},{"id":null,"widgetId":130,"name":"AboutDialog基本使用","priority":1,"subtitle":" \n【applicationIcon】 : 左上图标 【Widget】\n【applicationVersion】 : 版本号 【String】\n【applicationName】 : 应用名 【String】\n【applicationLegalese】 : 应用律术 【String】\n【children】 : 子组件列表 【List<Widget>】","code":"import 'package:flutter/material.dart';\nclass CustomAboutDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: <Widget>[\n _buildAboutDialog(),\n Positioned(top: 50, right: 20, child: _buildRaisedButton(context)),\n ],\n );\n }\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildAboutDialog());\n },\n child: Text(\n 'Just Show It',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n AboutDialog _buildAboutDialog() {\n return AboutDialog(\n applicationIcon: FlutterLogo(),\n applicationVersion: 'v0.0.1',\n applicationName: 'Flutter Unit',\n applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',\n children: <Widget>[\n Container(\n margin: EdgeInsets.only(top: 20),\n width: 80,\n height: 80,\n child: Image.asset('assets/images/icon_head.png')),\n Container(\n margin: EdgeInsets.only(top: 10),\n alignment: Alignment.center,\n child: Text(\n 'The King Of Coder.',\n style: TextStyle(color: Colors.white, fontSize: 20, shadows: [\n Shadow(\n color: Colors.blue, offset: Offset(.5, .5), blurRadius: 3)\n ]),\n ))\n ],\n );\n }\n}\n"},{"id":null,"widgetId":8,"name":"FadeInImage.assetNetwork加载网络图片","priority":1,"subtitle":"【placeholder】 : 展位图地址 【String】\n【image】 : 显示图地址 【String】\n【width】: 宽 【double】\n【height】: 高 【double】\n【fadeInDuration】: 淡入时长 【Duration】\n【fadeOutDuration】: 淡出时长 【Duration】\n【fadeInCurve】: 淡入曲线 【Cubic】\n【fadeOutCurve】: 淡出曲线 【Cubic】\n【fit】: 适应模式 【BoxFit】\n【alignment】: 对齐模式 【Alignment】\n【repeat】: 重复模式 【ImageRepeat】,","code":"import 'package:flutter/material.dart';\nclass CustomFadeInImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var placeholder = \"assets/images/icon_head.png\";\n var img =\n \"https://user-gold-cdn.xitu.io/2017/8/24/\"\n \"d324efef8cbee6468a018aad7ab2ba6b?imageView2/\"\n \"1/w/180/h/180/q/85/format/webp/interlace/1\";\n return FadeInImage.assetNetwork(\n placeholder: placeholder,\n image: img,\n width: 100,\n height: 100,\n fit: BoxFit.cover,\n repeat:ImageRepeat.noRepeat,\n alignment: Alignment.center,\n fadeInDuration: Duration(seconds: 5),\n fadeInCurve: Curves.easeInCubic,\n );\n }\n}\n"},{"id":null,"widgetId":36,"name":"Placeholder的fallback属性","priority":2,"subtitle":" 当所在区域无宽高约束时，占位组件的宽高。\"\n【fallbackHeight】: 高 【double】\n【fallbackWidth】: 宽 【double】","code":"import 'package:flutter/material.dart';\nclass FallbackPlaceholder extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return UnconstrainedBox(\n child: Placeholder(\n color: Colors.blue,\n strokeWidth: 2,\n fallbackHeight: 100,\n fallbackWidth: 150,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":36,"name":"Placeholder基础属性","priority":1,"subtitle":"【color】: 颜色 【Color】\n【strokeWidth】: 线粗 【double】","code":"import 'package:flutter/material.dart';\nclass CustomPlaceholder extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 100,\n height: 100*0.618,\n child: Placeholder(\n color: Colors.orangeAccent,\n strokeWidth: 2,\n ),\n );\n }\n}"},{"id":null,"widgetId":30,"name":"IconButton属性","priority":1,"subtitle":"【child】: 子组件 【Widget】\n【icon】: 内边距 【Widget】\n【tooltip】: 长按提示文字 【String】\n【highlightColor】: 长按高亮色 【Color】\n【splashColor】: 水波纹色 【Color】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomIconButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Padding(\n padding: const EdgeInsets.all(8.0),\n child: IconButton(\n padding: EdgeInsets.only(),\n onPressed: () {},\n icon: Icon(Icons.android, size: 40, color: Colors.green),\n tooltip: \"android\",\n highlightColor: Colors.orangeAccent,\n splashColor: Colors.blue,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":14,"name":"可以接受选中事件","priority":2,"subtitle":"【selected】: 是否选中 【bool】\n【onSelected】: 选中事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass SelectInputChip extends StatefulWidget {\n @override\n _SelectInputChipState createState() => _SelectInputChipState();\n}\n\nclass _SelectInputChipState extends State<SelectInputChip> {\n bool _select = false;\n\n @override\n Widget build(BuildContext context) {\n return InputChip(\n selected: _select,\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text(\"This is a InputChip.\"),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n selectedColor: Colors.orangeAccent.withAlpha(88),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n onDeleted: () => Navigator.of(context).pushNamed('AboutMePage'),\n onSelected: (bool value) {\n setState(() {\n _select = value;\n });\n print(\"onSelected\");\n },\n );\n }\n}"},{"id":null,"widgetId":14,"name":"可以接受点击、删除事件","priority":1,"subtitle":"【onPressed】: 点击事件 【Function()】\n【onDeleted】: 删除事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass PressInputChip extends StatefulWidget {\n @override\n _PressInputChipState createState() => _PressInputChipState();\n}\n\nclass _PressInputChipState extends State<PressInputChip> {\n bool _delete = false;\n\n @override\n Widget build(BuildContext context) {\n return InputChip(\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text(\n !_delete ?\n \"This is a InputChip.\" :\n \"You are clicked delete icon.\"),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n selectedColor: Colors.orangeAccent.withAlpha(88),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n onDeleted: () => setState(() => _delete = !_delete));\n }\n}"},{"id":null,"widgetId":2,"name":"文字对齐方式","priority":4,"subtitle":"【textAlign】: 对齐方式 【TextAlign】\n下面依次是:left、right、center、justify、start、end,","code":"import 'package:flutter/material.dart';\nclass TextAlignText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: TextAlign.values\n .map((e) => Container(\n width: 120,\n color: Colors.cyanAccent.withAlpha(33),\n height: 120 * 0.618,\n child: Text(\n \" 张风捷特烈 toly \" * 3,\n textAlign: e,\n ),\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"文字的基本样式","priority":1,"subtitle":"【入参】 : 文字 【String】\n【style】: 文字样式 【TextStyle】\n【color】: 文字样式 【Color】\n【fontSize】: 文字大小 【double】\n【fontWeight】: 字重 【FontWeight】\n【fontStyle】: 字体样式 【fontStyle】\n【letterSpacing】: 字距 【double】","code":"import 'package:flutter/material.dart';\nclass CustomText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var style = TextStyle(\n color: Colors.blue,\n fontSize: 20,\n fontWeight: FontWeight.bold,\n fontStyle: FontStyle.italic,\n letterSpacing: 10,\n );\n return Container(\n width: 200,\n color: Colors.cyanAccent.withAlpha(33),\n height: 200 * 0.618 * 0.618,\n child: Text(\"toly-张风捷特烈-1994`\", style: style),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"文字方向与最大行数","priority":5,"subtitle":"【maxLines】 : 最大行数 【int】\n【【textDirection】 : 文字方向 【TextDirection】\n下面依次是:rtl、ltr,","code":"import 'package:flutter/material.dart';\nclass TextDirectionText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 40,\n runSpacing: 10,\n children: TextDirection.values\n .map((e) => Container(\n width: 120,\n color: Colors.cyanAccent.withAlpha(33),\n height: 120 * 0.618,\n child: Text(\n \" 张风捷特烈 toly \" * 10,\n textDirection: e,\n maxLines: 3,\n overflow: TextOverflow.ellipsis,\n ),\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"文字装饰线","priority":3,"subtitle":"【fontFamily】 : 文字字体 【String】\n【decoration】: 装饰线 【TextDecoration】\n【decorationColor】: 装饰线颜色 【Color】\n【decorationThickness】: 装饰线粗 【double】\n【decorationStyle】: 装饰线样式 【TextDecorationStyle】","code":"import 'package:flutter/material.dart';\nclass DecorationText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Text(\n \"19940328\",\n style: TextStyle(\n fontSize: 50,\n fontWeight: FontWeight.bold,\n decoration: TextDecoration.underline,\n decorationThickness: 3,\n decorationStyle: TextDecorationStyle.wavy,\n decorationColor: Colors.blue,\n fontStyle: FontStyle.italic,\n fontFamily: \"DancingScript\",\n letterSpacing: 10),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"是否包裹与越界效果","priority":6,"subtitle":"【softWrap】 : 是否换行 【bool】\n【overflow】 : 越界效果 【TextOverflow】\n下面softWrap=false; overflow依次是:clip、fade、ellipsis、visible,","code":"import 'package:flutter/material.dart';\nclass SoftWrapText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: TextOverflow.values\n .map((e) => Container(\n width: 150,\n color: Colors.cyanAccent.withAlpha(33),\n height: 150 * 0.618 * 0.618,\n child: Text(\" 张风捷特烈 toly \" * 5,\n overflow: e,\n softWrap: false),\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":2,"name":"文字阴影","priority":2,"subtitle":"【shadows】 : 文字 【List<Shadow>】\n【backgroundColor】: 背景颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass ShadowText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Text(\n \"张风捷特烈\",\n style: TextStyle(\n fontSize: 50,\n color: Colors.white,\n backgroundColor: Colors.black,\n shadows: [\n Shadow(\n color: Colors.cyanAccent,\n offset: Offset(1, 1),\n blurRadius: 10),\n Shadow(\n color: Colors.blue,\n offset: Offset(-0.1, 0.1),\n blurRadius: 10),\n ]),\n );\n }\n}"},{"id":null,"widgetId":6,"name":"用于显示一个图标","priority":1,"subtitle":"【入参】 :图标数据 【IconData】\n【size】 : 大小 【double】\n【color】: 颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomIcon extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Icon(\n Icons.send,\n color: Colors.orange,\n size: 60,\n ),\n Icon(\n Icons.android,\n color: Colors.green,\n size: 100,\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":6,"name":"使用自定义图标","priority":2,"subtitle":"可在iconfont网站中下载图标字体进行使用","code":"import 'package:flutter/material.dart';\nimport '../../../../app/style/TolyIcon.dart';\nclass MyIcon extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n TolyIcon.icon_search,\n TolyIcon.icon_star,\n TolyIcon.icon_layout,\n TolyIcon.icon_star_ok\n ]\n .map((e) => Icon(\n e,\n color: Colors.green,\n size: 60,\n ))\n .toList(),\n );\n }\n}\n\n"},{"id":null,"widgetId":169,"name":"文字样式-TextTheme","priority":1,"subtitle":"后代组件可以通过CupertinoTheme.of获取主题的数据进行使用。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass TextCupertinoTheme extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var queryData = CupertinoTheme.of(context).textTheme;\n var styles = {\n \"tabLabelTextStyle: \": queryData.tabLabelTextStyle,\n \"actionTextStyle: \": queryData.actionTextStyle,\n \"navActionTextStyle: \": queryData.navActionTextStyle,\n \"textStyle: \": queryData.textStyle,\n \"navTitleTextStyle: \": queryData.navTitleTextStyle,\n \"pickerTextStyle: \": queryData.pickerTextStyle,\n \"dateTimePickerTextStyle: \": queryData.dateTimePickerTextStyle,\n \"navLargeTitleTextStyle: \": queryData.navLargeTitleTextStyle,\n };\n\n return Container(\n child: Column(\n children: styles.keys.map((e) => buildItem(e, styles[e])).toList(),\n ),\n );\n }\n\n Widget buildItem(String e, TextStyle style) => Column(\n children: <Widget>[\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: <Widget>[\n Text(\n e,\n style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n ),\n Text(\n \"@toly\",\n style: style,\n )\n ],\n ),\n ),\n Divider(\n height: 1,\n )\n ],\n );\n}"},{"id":null,"widgetId":169,"name":"CupertinoThemeData的使用","priority":2,"subtitle":" \n和Theme一样可以通过指定的属性，让它们在后代中共享，不过属性较少。注意如果需要使用主题，不能在当前的context中获取。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoTheme extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CupertinoTheme(\n data: CupertinoThemeData(\n primaryColor: Colors.blue,\n primaryContrastingColor: Colors.green\n ),\n child: _ChildUseTheme());\n }\n}\n\nclass _ChildUseTheme extends StatelessWidget {\n const _ChildUseTheme({\n Key key,\n }) : super(key: key);\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Container(\n width: 50,\n height: 50,\n color: CupertinoTheme.of(context).primaryContrastingColor,\n ),\n Container(\n width: 150,\n child: Slider(value: 0.8, onChanged: (v) => {})),\n Container( width: 150,child: Divider(color:CupertinoTheme.of(context).primaryContrastingColor,thickness: 1,))\n ]);\n }\n}"},{"id":null,"widgetId":25,"name":"FlatButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【child】: 子组件 【Widget】\n【textColor】: 子组件文字颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomFlatButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return FlatButton(\n onPressed: ()=>{},\n padding: EdgeInsets.all(8),\n splashColor: Colors.green,\n child: Text(\"FlatButton\"),\n textColor: Color(0xffFfffff),\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n );\n }\n}\n"},{"id":null,"widgetId":133,"name":"SimpleDialogOption基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomSimpleDialogOption extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Container(\n alignment: Alignment.center,\n width: double.infinity,\n height: 50,\n margin: EdgeInsets.all(5),\n color: Colors.grey.withAlpha(33),\n child: SimpleDialogOption(\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Text('张风捷特烈')),\n ),\n Container(\n height: 50,\n alignment: Alignment.center,\n width: double.infinity,\n color: Colors.grey.withAlpha(33),\n margin: EdgeInsets.all(5),\n child: SimpleDialogOption(\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Text('百里·巫缨')),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":31,"name":"BackButton属性","priority":1,"subtitle":"【color】: 颜色 【Color】\n【onPressed】: 点击事件 【Function】\n onPressed为空会退出当前栈","code":"import 'package:flutter/material.dart';\nclass CustomBackButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = [Colors.red,Colors.yellow,Colors.blue,Colors.green];\n return Wrap(\n spacing: 10,\n children: data.map((e)=>BackButton(\n color: e,\n )).toList()\n );\n }\n}\n"},{"id":null,"widgetId":202,"name":"Builder的使用","priority":1,"subtitle":"【builder】 : 组件构造器 【WidgetBuilder】\n同一个类中使用`XXX.of(context)`获取某类状态对象方法会存在`上下文滞后`的错误，使用Builder解决。","code":"import 'package:flutter/material.dart';\nclass BuilderDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: AppBar(\n title: Text('Builder'),\n ),\n floatingActionButton: Builder(\n builder: (ctx) => FloatingActionButton(\n onPressed: () {\n Scaffold.of(ctx)\n .showSnackBar(SnackBar(content: Text('hello builder')));\n },\n child: Icon(Icons.add),\n ),\n ),\n ),\n );\n }\n\n\n}\n"},{"id":null,"widgetId":18,"name":"SwitchListTile的密排属性","priority":3,"subtitle":"【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass DenseSwitchListTile extends StatefulWidget {\n @override\n _DenseSwitchListTileState createState() => _DenseSwitchListTileState();\n}\n\nclass _DenseSwitchListTileState extends State<DenseSwitchListTile> {\n var _value=false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: SwitchListTile(\n value: _value,\n dense: true,\n selected: _value,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _value = !_value),\n ),\n );\n }\n}"},{"id":null,"widgetId":18,"name":"SwitchListTile的选中效果","priority":2,"subtitle":"【selected】: 是否选中 【bool】\n【inactiveThumbImage】: 未选中时圆圈图片 【ImageProvider】\n【activeThumbImage】: 选中时圆圈图片 【ImageProvider】","code":"import 'package:flutter/material.dart';\nclass SelectSwitchListTile extends StatefulWidget {\n @override\n _SelectSwitchListTileState createState() => _SelectSwitchListTileState();\n}\n\nclass _SelectSwitchListTileState extends State<SelectSwitchListTile> {\n var _value=false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: SwitchListTile(\n value: _value,\n selected: _value,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n inactiveThumbImage: AssetImage(\"assets/images/pica.gif\"),\n activeThumbImage: AssetImage(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _value = !_value),\n ),\n );\n }\n}"},{"id":null,"widgetId":18,"name":"SwitchListTile的基本表现如下","priority":1,"subtitle":"【secondary】: 左侧组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【inactiveThumbColor】: 未选中时圆圈颜色 【Color】\n【inactiveTrackColor】: 未选中滑槽颜色 【Color】\n【activeColor】: 选中时圆圈颜色 【Color】\n【activeTrackColor】: 选中滑槽颜色 【Color】\n【onChanged】: 选中事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass CustomSwitchListTile extends StatefulWidget {\n @override\n _CustomSwitchListTileState createState() => _CustomSwitchListTileState();\n}\n\nclass _CustomSwitchListTileState extends State<CustomSwitchListTile> {\n var _value=false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: SwitchListTile(\n value: _value,\n inactiveThumbColor:Colors.cyanAccent ,\n inactiveTrackColor: Colors.blue.withAlpha(88),\n activeColor: Colors.orangeAccent,\n activeTrackColor: Colors.orange,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _value = !_value),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":102,"name":"DataTable的sort","priority":2,"subtitle":" \n【sortColumnIndex】 : 列号 【int】\n【columnSpacing】 : 列间距 【double】\n【sortAscending】 : 是否顺序 【bool】","code":"import 'package:flutter/material.dart';\nclass _BeanOp {\n final int id;\n final String name;\n final String type;\n bool select;\n\n _BeanOp(this.id, this.name, this.type, this.select);\n\n @override\n String toString() {\n return '_BeanOp{id: $id, name: $name, type: $type, select: $select}';\n }\n}\n\nclass SortDataTable extends StatefulWidget {\n @override\n _SortDataTableState createState() => _SortDataTableState();\n}\n\nclass _SortDataTableState extends State<SortDataTable> {\n var data = [\n _BeanOp(101, 'DataTable', 'StatelessWidget', false),\n _BeanOp(44, 'RangeSlider', 'StatefulWidget', false),\n _BeanOp(2, 'Text', 'StatelessWidget', false),\n _BeanOp(1, 'Image', 'StatefulWidget', false),\n ];\n\n bool _sortAscending = false;\n var selectData = <_BeanOp>[];\n\n @override\n Widget build(BuildContext context) {\n return DataTable(\n columnSpacing: 20,\n sortColumnIndex: 1,\n sortAscending: _sortAscending,\n columns: [\n DataColumn(\n label: Container(\n child: Checkbox(\n value: selectData.length == data.length,\n onChanged: _onSelectAll,\n ),\n ),\n ),\n DataColumn(label: Text('id'), numeric: false, onSort: _onSortId),\n DataColumn(label: Text('名称')),\n DataColumn(label: Text('类型')),\n ],\n rows: data\n .map((e) => DataRow(selected: false, cells: [\n DataCell(Checkbox(\n value: e.select,\n onChanged: (v) => _onSelectOne(v, e),\n )),\n DataCell(Text('${e.id}')),\n DataCell(Text('${e.name}'),\n showEditIcon: true, onTap: () {}),\n DataCell(Text('${e.type}')),\n ]))\n .toList());\n }\n\n _onSortId(int index, bool ascending) {\n setState(() {\n _sortAscending = ascending;\n data.sort(\n (a, b) => ascending ? a.id.compareTo(b.id) : b.id.compareTo(a.id));\n });\n }\n\n _onSelectOne(bool selected, _BeanOp e) {\n setState(() {\n if (selected) {\n //选中\n selectData.add(e);\n } else {\n selectData.remove(e);\n }\n e.select = selected;\n print(selectData);\n });\n }\n\n _onSelectAll(bool select) {\n setState(() {\n if (select) {\n data.forEach((e) => e.select = true);\n selectData = data.map((e) => e).toList();\n } else {\n data.forEach((e) => e.select = false);\n selectData = [];\n }\n });\n }\n}"},{"id":null,"widgetId":102,"name":"DataTable基本使用","priority":1,"subtitle":" \n【columns】 : 列 【List<DataColumn>】\n【rows】 : 行 【List<DataRow>】","code":"import 'package:flutter/material.dart';\nclass _Bean {\n final int id;\n final String name;\n final String type;\n\n _Bean(this.id, this.name, this.type);\n}\n\nclass CustomDataTable extends StatelessWidget {\n final data = [\n _Bean(101, 'DataTable', 'StatelessWidget'),\n _Bean(44, 'RangeSlider', 'StatefulWidget'),\n _Bean(2, 'Text', 'StatelessWidget'),\n _Bean(1, 'Image', 'StatefulWidget'),\n ];\n\n final columns = ['id', '名称', '类型'];\n\n @override\n Widget build(BuildContext context) {\n return DataTable(\n columns: columns.map((e) => DataColumn(label: Text(e))).toList(),\n rows: data\n .map((e) => DataRow(cells: [\n DataCell(Text('${e.id}')),\n DataCell(Text('${e.name}')),\n DataCell(Text('${e.type}')),\n ]))\n .toList());\n }\n}"},{"id":null,"widgetId":4,"name":"样式用于显示文字","priority":2,"subtitle":"【style】 : 样式-3种枚举 【FlutterLogoStyle】\n【textColor】: 文字颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass FlutterLogoWithText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n FlutterLogoStyle.horizontal:Colors.blue,\n FlutterLogoStyle.markOnly:Colors.red,\n FlutterLogoStyle.stacked:Colors.green,\n };\n\n return Wrap(\n spacing: 20,\n children: data.keys.map((e) => FlutterLogo(\n size: 80,\n style: e,\n textColor: data[e],\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":4,"name":"用于显示一个FlutterLogo","priority":1,"subtitle":"【size】 : 大小 【double】\n【colors】: 颜色 【MaterialColor】","code":"import 'package:flutter/material.dart';\nclass CustomFlutterLogo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n\n var data = {\n Colors.blue:50.0,\n Colors.red:60.0,\n Colors.green:70.0,\n Colors.yellow:80.0,\n };\n return Wrap(\n children: data.keys\n .map((e) => FlutterLogo(\n size: data[e],\n colors: e,\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":193,"name":"AboutListTile基本使用","priority":1,"subtitle":" \n【icon】 : 左图标 【Widget】\n【applicationIcon】 : 左上图标 【Widget】\n【applicationVersion】 : 版本号 【String】\n【applicationName】 : 应用名 【String】\n【applicationLegalese】 : 应用律术 【String】\n【aboutBoxChildren】 : 弹框内容组件 【List<Widget>】","code":"import 'package:flutter/material.dart';\nclass AboutListTileDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return AboutListTile(\n icon: Icon(Icons.info),\n applicationIcon: FlutterLogo(),\n applicationName: 'Flutter Unit',\n applicationVersion: 'v0.0.1',\n applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',\n aboutBoxChildren: [\n Padding(\n padding: const EdgeInsets.all(10.0),\n child: Text(\n ' FlutterUnit是【张风捷特烈】的开源项目，'\n '收录Flutter的200+组件，并附加详细介绍以及操作交互，'\n '希望帮助广大编程爱好者入门Flutter。'\n '更多知识可以关注掘金账号、公众号【编程之王】。',\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":5,"name":"用于显示一个角标","priority":1,"subtitle":"【message】 : 显示的文字信息 【String】\n【location】 : 位置*4 【BannerLocation】\n【color】: 角标颜色 【Color】\n【child】: 孩子 【Widget】\n【textStyle】: 文字样式 【TextStyle】","code":"import 'package:flutter/material.dart';\nclass CustomBanner extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n BannerLocation.topStart: Colors.red,\n BannerLocation.topEnd: Colors.blue,\n BannerLocation.bottomStart: Colors.green,\n BannerLocation.bottomEnd: Colors.yellow,\n };\n\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: data.keys.map((e) =>\n Container(\n color: Color(0xffD8F5FF),\n width: 150,\n height: 150 * 0.618,\n child: Banner(\n message: \"Flutter 1.12发布\",\n location: e,\n color: data[e],\n child: Padding(\n padding: EdgeInsets.all(20),\n child: FlutterLogo(colors: Colors.blue,\n style: FlutterLogoStyle.horizontal,)),\n ),\n )).toList());\n }\n}\n"},{"id":null,"widgetId":127,"name":"AlertDialog基本使用","priority":1,"subtitle":" \n【title】 : 顶部组件 【Widget】\n【content】 : 内容组件 【Widget】\n【titleTextStyle】 : 顶部文字样式 【TextStyle】\n【contentTextStyle】 : 内容文字样式 【TextStyle】\n【titlePadding】 : 顶部内边距 【EdgeInsetsGeometry】\n【contentPadding】 : 内容内边距 【EdgeInsetsGeometry】\n【actions】 : 右下角组件列表 【List<Widget>】\n【backgroundColor】 : 右下角组件列表 【背景色】\n【elevation】 : 右下角组件列表 【背景色】\n【shape】 : 影深 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAlertDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildRaisedButton(context),\n _buildAlertDialog(),\n ],\n );\n }\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildAlertDialog());\n },\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n Widget _buildAlertDialog() {\n return AlertDialog(\n title: _buildTitle(),\n titleTextStyle: TextStyle(fontSize: 20, color: Colors.black),\n titlePadding: EdgeInsets.only(\n top: 5,\n left: 20,\n ),\n contentPadding: EdgeInsets.symmetric(horizontal: 5),\n backgroundColor: Colors.white,\n content: _buildContent(),\n actions: <Widget>[\n Icon(Icons.android, color: Colors.blue,),\n Icon(Icons.add, color: Colors.blue,),\n Icon(Icons.g_translate, color: Colors.blue,),\n Icon(Icons.games, color: Colors.blue,),\n ],\n elevation: 4,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n );\n }\n\n Widget _buildTitle() {\n return Row(\n //标题\n children: <Widget>[\n Image.asset(\n \"assets/images/icon_head.png\",\n width: 30,\n height: 30,\n ),\n SizedBox(width: 10,),\n Expanded(\n child: Text(\n \"关于\",\n style: TextStyle(fontSize: 18),\n )),\n CloseButton()\n ],\n );\n }\n\n Widget _buildContent() {\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[\n Padding(\n padding: const EdgeInsets.all(10.0),\n child: Text(\n ' FlutterUnit是【张风捷特烈】的开源项目，'\n '收录Flutter的200+组件，并附加详细介绍以及操作交互，'\n '希望帮助广大编程爱好者入门Flutter。'\n '更多知识可以关注掘金账号、公众号【编程之王】。',\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":71,"name":"Offstage基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【offstage】 : 是否消失 【bool】","code":"import 'package:flutter/material.dart';\nclass CustomOffstage extends StatefulWidget {\n @override\n _CustomOffstageState createState() => _CustomOffstageState();\n}\n\nclass _CustomOffstageState extends State<CustomOffstage> {\n bool _off = false;\n\n @override\n Widget build(BuildContext context) {\n var radBox = Container(\n height: 50,\n width: 60,\n color: Colors.red,\n child: Switch(\n value: _off,\n onChanged: (v) => setState(() => _off = v)),\n );\n\n return Container(\n width: 250,\n height: 200,\n child: Row(\n children: <Widget>[radBox, _buildOffStage(), radBox],\n ),\n );\n }\n\n Widget _buildOffStage() => Offstage(\n offstage: _off,\n child: Container(\n alignment: Alignment.center,\n height: 100,\n width: 100,\n color: Colors.blue,\n child: Text(\n \"Offstage\",\n style: TextStyle(fontSize: 20),\n ),\n ));\n}\n"},{"id":null,"widgetId":67,"name":"ClipRect基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper<Rect>】","code":"import 'package:flutter/material.dart';\nclass CustomClipRect extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ClipRect(\n child: SizedBox(\n height: 100,\n width: 100,\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n fit: BoxFit.cover,),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":279,"name":"返回按钮基本使用","priority":1,"subtitle":"【clipper】 : 裁剪器 【CustomClipper<Path>】\n【clipBehavior】 : 裁剪行为 【Clip】\n【child】 : 子组件 【Widget】\n【elevation】 : 阴影深 【double】\n【shadowColor】 : 阴影颜色 【Color】\n【color】: 颜色 【Color】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass PhysicalShapeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200,\n height: 200,\n child: PhysicalShape(\n shadowColor: Colors.orange,\n elevation: 3,\n child: Image.asset(\n 'assets/images/caver.jpeg',\n fit: BoxFit.cover,\n ),\n clipBehavior: Clip.hardEdge,\n clipper: ShapeBorderClipper(\n shape: CircleBorder(side: BorderSide.none),\n ),\n color: Colors.deepPurpleAccent),\n );\n }\n}\n"},{"id":null,"widgetId":72,"name":"RotatedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【quarterTurns】 : 旋转多少个90° 【int】","code":"import 'package:flutter/material.dart';\nclass CustomRotatedBox extends StatefulWidget {\n @override\n _CustomRotatedBoxState createState() => _CustomRotatedBoxState();\n}\n\nclass _CustomRotatedBoxState extends State<CustomRotatedBox> {\n int _quarterTurns = 0;\n\n @override\n Widget build(BuildContext context) {\n return RotatedBox(\n quarterTurns: _quarterTurns,\n child: GestureDetector(\n onTap: () => setState(() => _quarterTurns++),\n child: Icon(\n Icons.android,\n size: 60,\n color: Colors.blue,\n )),\n );\n }\n}\n"},{"id":null,"widgetId":79,"name":"LimitedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【maxHeight】 : 最大高 【double】\n【maxWidth】 : 最大宽 【double】","code":"import 'package:flutter/material.dart';\nclass CustomLimitedBox extends StatefulWidget {\n @override\n _CustomLimitedBoxState createState() => _CustomLimitedBoxState();\n}\n\nclass _CustomLimitedBoxState extends State<CustomLimitedBox> {\n var _text = '';\n\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 50,\n height: 50,\n child: Text(\"Static\"),\n );\n\n var box = LimitedBox(\n maxHeight: 60,\n maxWidth: 100,\n child: Container(color: Colors.orange, child: Text(_text)),\n );\n return Column(\n children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: <Widget>[child, UnconstrainedBox(child: box), child],\n ),\n ),\n _buildInput()\n ],\n );\n }\n\n Widget _buildInput() {\n return Padding(\n padding: const EdgeInsets.all(18.0),\n child: TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n hintText: '请输入',\n ),\n onChanged: (v) {\n setState(() {\n _text = v;\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":83,"name":"OverflowBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【minWidth】 : 最小宽 【double】\n【minHeight】 : 最小高 【double】\n【maxHeight】 : 最大高 【double】\n【maxWidth】 : 最大宽 【double】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomOverflowBox extends StatefulWidget {\n @override\n _CustomOverflowBoxState createState() => _CustomOverflowBoxState();\n}\n\nclass _CustomOverflowBoxState extends State<CustomOverflowBox> {\n var _text = '';\n\n @override\n Widget build(BuildContext context) {\n var box = OverflowBox(\n alignment: Alignment.center,\n minHeight: 50,\n minWidth: 50,\n maxWidth: 200,\n maxHeight: 120,\n child: Container(\n color: Colors.orange,\n child: Text(_text),\n ),\n// child: Text(\"张风\"),\n );\n return Column(\n children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(33),\n width: 100,\n height: 100,\n child: box),\n _buildInput()\n ],\n );\n }\n\n Widget _buildInput() {\n return Padding(\n padding: const EdgeInsets.all(18.0),\n child: TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n hintText: '请输入',\n ),\n onChanged: (v) {\n setState(() {\n _text = v;\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":166,"name":"CustomPaint绘线贝塞尔曲线","priority":2,"subtitle":" \n Flutter也支持贝塞尔曲线等复杂绘制。","code":"import 'dart:ui';\nimport 'package:flutter/material.dart';\nclass PlayBezier3Page extends StatefulWidget {\n @override\n _PlayBezier3PageState createState() => _PlayBezier3PageState();\n}\n\nclass _PlayBezier3PageState extends State<PlayBezier3Page> {\n List<Offset> _pos = <Offset>[];\n int selectPos;\n\n @override\n void initState() {\n _initPoints();\n super.initState();\n }\n\n void _initPoints() {\n _pos = List<Offset>();\n _pos.add(Offset(0, 0));\n _pos.add(Offset(60, -60));\n _pos.add(Offset(-90, -90));\n _pos.add(Offset(-120, -40));\n }\n\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n width: MediaQuery.of(context).size.width,\n child: RepaintBoundary(\n child: CustomPaint(\n painter: BezierPainter(pos: _pos, selectPos: selectPos),\n ),\n ),\n\n );\n }\n}\n\nclass BezierPainter extends CustomPainter {\n Paint _gridPaint;\n Path _gridPath;\n\n Paint _mainPaint;\n Path _mainPath;\n int selectPos;\n Paint _helpPaint;\n\n List<Offset> pos;\n\n BezierPainter({this.pos, this.selectPos}) {\n _gridPaint = Paint()..style = PaintingStyle.stroke;\n _gridPath = Path();\n\n _mainPaint = Paint()\n ..color = Colors.orange\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2;\n _mainPath = Path();\n\n _helpPaint = Paint()\n ..color = Colors.purple\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2\n ..strokeCap = StrokeCap.round;\n }\n\n @override\n void paint(Canvas canvas, Size size) {\n canvas.clipRect(Offset.zero & size);\n canvas.translate(size.width / 2, size.height / 2);\n _drawGrid(canvas, size); //绘制格线\n _drawAxis(canvas, size); //绘制轴线\n\n _mainPath.moveTo(pos[0].dx, pos[0].dy);\n _mainPath.cubicTo(pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);\n canvas.drawPath(_mainPath, _mainPaint);\n _drawHelp(canvas);\n _drawSelectPos(canvas);\n\n }\n\n @override\n bool shouldRepaint(CustomPainter oldDelegate) => false;\n\n void _drawGrid(Canvas canvas, Size size) {\n _gridPaint\n ..color = Colors.grey\n ..strokeWidth = 0.5;\n _gridPath = _buildGridPath(_gridPath, size);\n canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);\n\n canvas.save();\n canvas.scale(1, -1); //沿x轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, 1); //沿y轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, -1); //沿原点镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n }\n\n void _drawAxis(Canvas canvas, Size size) {\n canvas.drawPoints(\n PointMode.lines,\n [\n Offset(-size.width / 2, 0),\n Offset(size.width / 2, 0),\n Offset(0, -size.height / 2),\n Offset(0, size.height / 2),\n Offset(0, size.height / 2),\n Offset(0 - 7.0, size.height / 2 - 10),\n Offset(0, size.height / 2),\n Offset(0 + 7.0, size.height / 2 - 10),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, 7),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, -7),\n ],\n _gridPaint\n ..color = Colors.blue\n ..strokeWidth = 1.5);\n }\n\n Path _buildGridPath(Path path, Size size, {step = 20.0}) {\n for (int i = 0; i < size.height / 2 / step; i++) {\n path.moveTo(0, step * i);\n path.relativeLineTo(size.width / 2, 0);\n }\n for (int i = 0; i < size.width / 2 / step; i++) {\n path.moveTo(step * i, 0);\n path.relativeLineTo(\n 0,\n size.height / 2,\n );\n }\n return path;\n }\n\n void _drawHelp(Canvas canvas) {\n canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);\n canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);\n }\n\n void _drawSelectPos(Canvas canvas) {\n if (selectPos == null) return;\n canvas.drawCircle(\n pos[selectPos],\n 10,\n _helpPaint\n ..color = Colors.green\n ..strokeWidth = 2);\n }\n}"},{"id":null,"widgetId":166,"name":"CustomPaint绘线图形","priority":1,"subtitle":" \n【painter】 : 绘画器 【CustomPainter】","code":"import 'package:flutter/material.dart';\nclass ClockPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: 100,\n child:RepaintBoundary(\n child: CustomPaint(//使用CustomPaint盛放画布\n painter: ClockPainter(),\n ),\n ),\n )\n ;\n }\n}\n\nclass ClockPainter extends CustomPainter {\n Paint _paint;\n var _radius = 3.0; //小球半径\n Path _path = Path(); //画笔对象\n ClockPainter () {\n _paint = Paint()..color= Color(0xff45d0fd)..isAntiAlias=true;\n _path.addOval(Rect.fromCircle(radius: _radius, center: Offset(0, 0))); //小球路径\n }\n\n @override\n void paint(Canvas canvas, Size size) {\n print(size);\n canvas.clipRect(Offset.zero & size);\n canvas.translate(size.width/2-65*2, 0);\n renderDigit(1, canvas);//渲染数字\n canvas.translate(65, 0);//平移画布\n renderDigit(9, canvas);\n canvas.translate(65, 0); renderDigit(9, canvas);\n canvas.translate(65, 0); renderDigit(4, canvas);\n }\n //渲染数字 num ：要显示的数字 canvas ：画布\n void renderDigit(int num, Canvas canvas) {\n if (num > 10) { return; }\n for (int i = 0; i < digit[num].length; i++) {\n for (int j = 0; j < digit[num][j].length; j++) {\n if (digit[num][i][j] == 1) {\n canvas.save();\n double rX = j * 2 * (_radius + 1) + (_radius + 1); //第(i，j)个点圆心横坐标\n double rY = i * 2 * (_radius + 1) + (_radius + 1); //第(i，j)个点圆心纵坐标\n canvas.translate(rX, rY);\n canvas.drawPath(_path, _paint);\n canvas.restore();\n }\n }\n }\n }\n @override\n bool shouldRepaint(CustomPainter oldDelegate)=> false;\n}\n\nconst digit = [\n [\n [0, 0, 1, 1, 1, 0, 0],\n [0, 1, 1, 0, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 0, 1, 1, 0],\n [0, 0, 1, 1, 1, 0, 0]\n ], //0\n\n [\n [0, 0, 0, 1, 1, 0, 0],\n [0, 1, 1, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [1, 1, 1, 1, 1, 1, 1]\n ], //1\n [\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 1, 1, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 1, 1, 1, 1, 1]\n ], //2\n [\n [1, 1, 1, 1, 1, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 1, 0, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //3\n\n [\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 1, 0],\n [0, 0, 1, 1, 1, 1, 0],\n [0, 1, 1, 0, 1, 1, 0],\n [1, 1, 0, 0, 1, 1, 0],\n [1, 1, 1, 1, 1, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 1, 1]\n ], //4\n [\n [1, 1, 1, 1, 1, 1, 1],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 1, 1, 1, 1, 0],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //5\n [\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 1, 1, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 0, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //6\n [\n [1, 1, 1, 1, 1, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 0, 1, 1, 0, 0, 0]\n ], //7\n [\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //8\n [\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 1, 1, 0, 0, 0, 0]\n ], //9\n [\n [0, 0, 0, 0],\n [0, 0, 0, 0],\n [0, 1, 1, 0],\n [0, 1, 1, 0],\n [0, 0, 0, 0],\n [0, 0, 0, 0],\n [0, 1, 1, 0],\n [0, 1, 1, 0],\n [0, 0, 0, 0],\n [0, 0, 0, 0]\n ] //:\n];\n"},{"id":null,"widgetId":292,"name":"IgnorePointer基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【ignoring】 : 是否忽视事件 【bool】\n如下,Switch选中时ignoring为true，按钮事件将被锁定，无法点击。","code":"import 'package:flutter/material.dart';\nclass CustomIgnorePointer extends StatefulWidget {\n @override\n _CustomIgnorePointerState createState() => _CustomIgnorePointerState();\n}\n\nclass _CustomIgnorePointerState extends State<CustomIgnorePointer> {\n bool _ignore = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n GestureDetector(\n onTap: (){\n print('IgnorePointer');\n },\n child: IgnorePointer(\n ignoring: _ignore,\n child: _buildButton(),\n ),\n ),\n _buildSwitch(),\n Text(!_ignore ? '允许点击' : '点击已锁定')\n ],\n ),\n );\n }\n\n Widget _buildButton() => RaisedButton(\n color: Theme.of(context).primaryColor,\n child: Text(\n 'To About',\n style: TextStyle(color: Colors.white),\n ),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n\n _buildSwitch() => Switch(\n value: _ignore,\n onChanged: (v) {\n setState(() {\n _ignore = v;\n });\n });\n}\n"},{"id":null,"widgetId":287,"name":"LayoutBuilder基本认识","priority":1,"subtitle":" \n【builder】 : 布局构造器 【LayoutWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass CustomLayoutBuilder extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n print('CustomLayoutBuild');\n return Container(\n alignment: Alignment.center,\n height: 80,\n width: 150,\n color: Colors.green,\n child: LayoutBuilder(\n builder: (_, zone) {\n return Text(\n '父容器宽:${zone.maxWidth}\\n'\n '父容器高:${zone.maxHeight}',\n style: TextStyle(color: Colors.white, fontSize: 16),\n );\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":287,"name":"LayoutBuilder的展开使用","priority":3,"subtitle":" \n使用TextPainter来检测文字的行数，实现展开或收起功能。","code":"import 'package:flutter/material.dart';\nclass SimpleExpandableText extends StatefulWidget {\n\n @override\n createState() => _SimpleExpandableTextState();\n}\n\nclass _SimpleExpandableTextState extends State<SimpleExpandableText> {\n\n final text = '桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。'\n '红的像火，粉的像霞，白的像雪。'\n '花里带着甜味儿；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。'\n '花下成千成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。'\n '野花遍地是：杂样儿，有名字的，没名字的，散在草丛里，像眼睛，像星星，还眨呀眨的。';\n\n bool expand = false;\n int maxLines =3;\n\n\n final style = TextStyle(fontSize: 15, color: Colors.grey, shadows: [\n Shadow(\n color: Colors.white, offset: Offset(1,1)\n )\n ]);\n\n @override\n build(context) => Container(\n decoration: BoxDecoration(\n color: Colors.cyanAccent.withAlpha(8),\n borderRadius: BorderRadiusDirectional.all(Radius.circular(20))),\n padding: EdgeInsets.all(15),\n child: LayoutBuilder(builder: (context, size) {\n\n final painter = TextPainter(\n text: TextSpan(text: text, style: style),\n maxLines: maxLines,\n textDirection: TextDirection.ltr,\n );\n painter.layout(maxWidth: size.maxWidth);\n if (!painter.didExceedMaxLines)\n return Text(text, style: style);\n\n return Column(\n mainAxisSize: MainAxisSize.min,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n Text(text, maxLines: expand ? null : 3, style: style),\n GestureDetector(\n onTap: () => setState(() {\n expand = !expand;\n }),\n child: Text(\n expand ? '<< 收起' : '展开 >>',\n style: TextStyle(color: Colors.blue),\n ),\n ),\n ],\n );\n }),\n );\n}\n\n"},{"id":null,"widgetId":287,"name":"LayoutBuilder的适应布局","priority":2,"subtitle":" \n可以根据区域的大小进行组件展示设计。\"\n比如在不同的宽度区域显示不同的布局结构。\"\n毕竟很多地方不容易获取父组件区域，使用LayoutBuilder就会非常爽口。","code":"import 'package:flutter/material.dart';\nclass FitByLayoutBuilder extends StatefulWidget {\n @override\n _FitByLayoutBuilderState createState() => _FitByLayoutBuilderState();\n}\n\nclass _FitByLayoutBuilderState extends State<FitByLayoutBuilder> {\n double _width = 100;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Container(\n width: _width,\n child: LayoutBuilder(\n builder: (_, zone) {\n if (zone.maxWidth <= 150) {\n return _buildType1();\n } else {\n return _buildType2(zone);\n }\n },\n ),\n ),\n _buildSlider(),\n ],\n );\n }\n\n Widget _buildSlider() {\n return Slider(\n min: 50,\n max: 300,\n label: \"父宽:${_width.toStringAsFixed(1)}\",\n value: _width,\n onChanged: (v) => setState(() {\n _width = v;\n }));\n }\n\n Widget _buildType1() => Container(\n color: Colors.blue,\n child: Column(\n children: <Widget>[\n _buildTitle(),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: _buildContent(),\n ),\n ],\n ),\n );\n\n Widget _buildType2(BoxConstraints zone) => Container(\n height: 100,\n width: zone.maxWidth,\n color: Colors.orange,\n child: Row(\n children: <Widget>[\n Container(\n margin: EdgeInsets.all(10),\n height: 80,\n width: 30,\n color: Colors.grey,\n ),\n Expanded(child: _buildContent())\n ],\n ),\n );\n\n Widget _buildTitle() => Container(\n margin: EdgeInsets.only(left: 10, right: 10, top: 10),\n color: Colors.grey,\n height: 30,\n );\n\n Widget _buildContent() => Wrap(\n runSpacing: 3,\n children: <Widget>[\n Container(\n color: Colors.red,\n height: 30,\n ),\n Container(\n color: Colors.yellow,\n height: 30,\n ),\n Container(\n color: Colors.green,\n height: 30,\n ),\n ],\n );\n}\n"},{"id":null,"widgetId":86,"name":"Center基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomCenter extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(5),\n width: 200,\n height: 100,\n color: Colors.grey.withAlpha(88),\n child: Center(\n child: Container(\n width: 80,\n height: 60,\n color: Colors.cyanAccent,\n )));\n }\n}\n"},{"id":null,"widgetId":68,"name":"ClipRRect基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【borderRadius】 : 边线半径 【BorderRadius】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper<Rect>】","code":"import 'package:flutter/material.dart';\nclass CustomClipRRect extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ClipRRect(\n borderRadius: BorderRadius.all(Radius.elliptical(35, 30)),\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 150,\n height: 100,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":76,"name":"SizedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【width】 : 宽 【double】\n【height】 : 高 【double】","code":"import 'package:flutter/material.dart';\nclass CustomSizedBox extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 50,\n height: 50,\n child: Text(\"Static\"),\n );\n\n var box = SizedBox(\n width: 80,\n height: 40,\n child: Container(\n color: Colors.orange,\n child: Icon(\n Icons.android,\n color: Colors.white,\n )),\n );\n\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: Row(\n children: <Widget>[child, box, child],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":77,"name":"AspectRatio基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【aspectRatio】 : 宽高比例 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAspectRatio extends StatefulWidget {\n @override\n _CustomAspectRatioState createState() => _CustomAspectRatioState();\n}\n\nclass _CustomAspectRatioState extends State<CustomAspectRatio> {\n var _ratio = 0.75;\n\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 50,\n height: 50,\n child: Text(\"Static\"),\n );\n\n var box = AspectRatio(\n aspectRatio: _ratio,\n child: Container(\n color: Colors.orange,\n child: Icon(\n Icons.android,\n color: Colors.white,\n )),\n );\n\n return Column(\n children: <Widget>[\n _buildSlider(),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: <Widget>[child, box, child],\n ),\n ),\n ],\n );\n }\n\n Widget _buildSlider() => Slider(\n divisions: 20,\n min: 0.1,\n max: 2.0,\n label: _ratio.toStringAsFixed(2),\n value: _ratio,\n onChanged: (v) => setState(() => _ratio = v));\n}\n"},{"id":null,"widgetId":69,"name":"ClipPath基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper<Path>】","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass CustomClipPath extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ClipPath(\n clipper: ShapeBorderClipper(shape: _StarShapeBorder()),\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 150,\n height: 100,\n fit: BoxFit.cover,\n ),\n );\n }\n}\n\nclass _StarShapeBorder extends ShapeBorder {\n final Path _path = Path();\n\n @override\n EdgeInsetsGeometry get dimensions => null;\n\n @override\n Path getInnerPath(Rect rect, {TextDirection textDirection}) {\n return null;\n }\n\n @override\n Path getOuterPath(Rect rect, {TextDirection textDirection}) =>\n nStarPath(20, rect.height / 2, rect.height / 2 * 0.85,\n dx: rect.width / 2, dy: rect.height / 2);\n\n @override\n void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}\n\n Path nStarPath(int num, double R, double r, {dx = 0, dy = 0}) {\n double perRad = 2 * pi / num;\n double radA = perRad / 2 / 2;\n double radB = 2 * pi / (num - 1) / 2 - radA / 2 + radA;\n _path.moveTo(cos(radA) * R + dx, -sin(radA) * R + dy);\n for (int i = 0; i < num; i++) {\n _path.lineTo(\n cos(radA + perRad * i) * R + dx, -sin(radA + perRad * i) * R + dy);\n _path.lineTo(\n cos(radB + perRad * i) * r + dx, -sin(radB + perRad * i) * r + dy);\n }\n _path.close();\n return _path;\n }\n\n @override\n ShapeBorder scale(double t) {\n return null;\n }\n}\n"},{"id":null,"widgetId":75,"name":"Baseline基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【baseline】 : 基线位置 【double】\n【baselineType】 : 基线类型 【TextBaseline】","code":"import 'package:flutter/material.dart';\nclass CustomBaseline extends StatefulWidget {\n @override\n _CustomBaselineState createState() => _CustomBaselineState();\n}\n\nclass _CustomBaselineState extends State<CustomBaseline> {\n double _baseline=20;\n\n @override\n Widget build(BuildContext context) {\n\n var childBox = Text(\n '你好,Flutter',\n style: TextStyle(fontSize: 20,fontFamily: \"Menlo\"),\n );\n\n\n var baseline = Baseline(\n child: childBox,\n baseline: _baseline,\n baselineType: TextBaseline.alphabetic\n );\n\n return Column(\n children: <Widget>[\n _buildSlider(),\n Container(\n width: 100/0.618,\n height: 100,\n color: Colors.grey.withAlpha(22),\n child: baseline,\n ),\n ],\n );\n }\n\n Widget _buildSlider() => Slider(\n divisions: 20,\n min: 0,\n max: 60,\n label: _baseline.toString(),\n value: _baseline,\n onChanged: (v) => setState(() => _baseline = v));\n}\n"},{"id":null,"widgetId":277,"name":"线性渐变着色","priority":2,"subtitle":" \n通过LinearGradient#createShader创建线性渐变着色器\n着色器相关知识详见【绘制专辑】","code":"import 'package:flutter/material.dart';\nclass LinearShaderMask extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n ShaderMask(\n shaderCallback: _buildShader,\n child: Image.asset(\n 'assets/images/icon_head.png',\n height: 70,\n width: 70,\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 40, color: Colors.white),\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Container(\n height: 100,\n color: Colors.white,\n width: 50,\n ),\n ),\n ],\n );\n }\n\n final colors = [Colors.red, Colors.yellow, Colors.blue];\n\n Shader _buildShader(Rect bounds) => LinearGradient(\n begin: Alignment.centerLeft,\n end: Alignment.centerRight,\n tileMode: TileMode.mirror,\n colors: colors)\n .createShader(bounds);\n}\n"},{"id":null,"widgetId":277,"name":"径向渐变着色","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【shaderCallback】 : 着色器回调 【ShaderCallback】\n【blendMode】 : 混色模式 【BlendMode】\n 通过RadialGradient#createShader创建径向渐变着色器。","code":"import 'package:flutter/material.dart';\nclass RadialShaderMask extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n ShaderMask(\n shaderCallback: _buildShader,\n child: Image.asset(\n 'assets/images/icon_head.png',\n height: 70,\n width: 70,\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 40, color: Colors.white),\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Container(\n height: 100,\n color: Colors.white,\n width: 50,\n ),\n ),\n ],\n );\n }\n\n final colors = [Colors.red, Colors.yellow, Colors.blue];\n\n Shader _buildShader(Rect bounds) => RadialGradient(\n center: Alignment.topLeft,\n radius: 1.0,\n tileMode: TileMode.mirror,\n colors: colors)\n .createShader(bounds);\n}"},{"id":null,"widgetId":88,"name":"ColorFiltered基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【colorFilter】 : 滤色器 【ColorFilter】","code":"import 'package:flutter/material.dart';\nimport '../../../../app/utils/color_utils.dart';\nclass CustomColorFiltered extends StatefulWidget {\n @override\n _CustomColorFilteredState createState() => _CustomColorFilteredState();\n}\n\nclass _CustomColorFilteredState extends State<CustomColorFiltered> {\n Color _color = Colors.blue.withAlpha(88);\n\n @override\n Widget build(BuildContext context) {\n _color = ColorUtils.randomColor();\n return Column(\n children: <Widget>[\n Wrap(spacing: 10, runSpacing: 10, children: [\n _buildRandomColor(),\n ...BlendMode.values\n .map((mode) => Column(\n children: <Widget>[\n _buildChild(mode),\n SizedBox(\n height: 10,\n ),\n Text(\n mode.toString().split('.')[1],\n style: TextStyle(fontSize: 10),\n )\n ],\n ))\n .toList()\n ]),\n ],\n );\n ;\n }\n\n Widget _buildChild(m) => Container(\n width: 58,\n height: 58,\n child: ColorFiltered(\n child: Image(image: AssetImage(\"assets/images/icon_head.png\")),\n colorFilter: ColorFilter.mode(_color, m)),\n );\n\n Widget _buildRandomColor() => GestureDetector(\n onTap: () => setState(() {}),\n child: Container(\n alignment: Alignment.center,\n width: 60,\n height: 60,\n decoration: BoxDecoration(color: _color, shape: BoxShape.circle),\n child: Text('点我'),\n ),\n );\n}\n"},{"id":null,"widgetId":298,"name":"IntrinsicHeight基本使用","priority":1,"subtitle":"【child】 : 子组件 【Widget】\n如示例:左侧高可变动，中间高固定,右侧高取前两者的最高值。","code":"import 'package:flutter/material.dart';\nclass IntrinsicHeightDemo extends StatefulWidget {\n @override\n _IntrinsicHeightDemoState createState() => _IntrinsicHeightDemoState();\n}\n\nclass _IntrinsicHeightDemoState extends State<IntrinsicHeightDemo> {\n var _height =120.0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n buildChild(_height),\n SizedBox(height: 10),\n _buildSlider()\n ],\n ),\n );\n }\n\n Widget buildChild(double leftHeight) {\n return IntrinsicHeight(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n Container(\n height: leftHeight,\n width: 120,\n color: Colors.yellow,\n alignment: Alignment.center,\n child: Text(\"height:${leftHeight.toStringAsFixed(1)}\"),\n ),\n Container(\n color: Colors.blue,\n width: 150,\n height: 80,\n alignment: Alignment.center,\n child: Text(\"固定高\"),\n ),\n Container(\n color: Colors.red,\n width: 60,\n alignment: Alignment.center,\n child: Text(\"最高\"),\n )\n ],\n ),\n );\n }\n\n Widget _buildSlider() =>Slider(\n value: _height,\n max: 200.0,\n min: 30.0,\n divisions: 17,\n onChanged: (v)=> setState(() => _height= v),\n );\n}\n"},{"id":null,"widgetId":70,"name":"DecoratedBox底线装饰","priority":5,"subtitle":"通过UnderlineTabIndicator对象可指定底线,","code":"import 'package:flutter/material.dart';\nclass UnderlineTabIndicatorDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: UnderlineTabIndicator(\n insets: EdgeInsets.symmetric(horizontal: 5, vertical: -5),\n borderSide: BorderSide(color: Colors.orange, width: 2)),\n child: Icon(\n Icons.ac_unit,\n color: Colors.blue,\n size: 40,\n ),\n );\n }\n}"},{"id":null,"widgetId":70,"name":"DecoratedBox基本使用","priority":1,"subtitle":" \n【decoration】 : 装饰对象 【Decoration】\n【position】 : 前景色(左)/后景色(右) 【DecorationPosition】","code":"import 'package:flutter/material.dart';\nclass BoxDecorationDemo extends StatelessWidget {\n final rainbow = const <int>[\n 0xffff0000,\n 0xffFF7F00,\n 0xffFFFF00,\n 0xff00FF00,\n 0xff00FFFF,\n 0xff0000FF,\n 0xff8B00FF\n ];\n\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n position: DecorationPosition.background,\n decoration: BoxDecoration(\n gradient: LinearGradient(\n stops: <double>[0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],\n colors: rainbow.map((e) => Color(e)).toList()),\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20), bottomRight: Radius.circular(20)),\n boxShadow: [\n const BoxShadow(\n color: Colors.orangeAccent,\n offset: Offset(1, 1),\n blurRadius: 10,\n spreadRadius: 1),\n ]),\n child: Icon(\n Icons.android,\n size: 80,\n color: Colors.black.withAlpha(123),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":70,"name":"FlutterLogoDecoration装饰","priority":6,"subtitle":"通过FlutterLogoDecoration对象可指定Flutter图标装饰(并没有什么太大的作用),","code":"import 'package:flutter/material.dart';\nclass FlutterLogoDecorationDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: FlutterLogoDecoration(\n darkColor: Colors.orange,\n lightColor: Colors.deepPurpleAccent,\n style: FlutterLogoStyle.stacked),\n child: SizedBox(\n width: 100,\n height: 100,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":70,"name":"DecoratedBox形状装饰","priority":4,"subtitle":"通过ShapeDecoration对象可指定边线形状,","code":"import 'package:flutter/material.dart';\nclass ShapeDecorationDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: ShapeDecoration(\n shadows: [\n const BoxShadow(\n color: Colors.orangeAccent,\n offset: Offset(0, 0),\n blurRadius: 2,\n spreadRadius: 1),\n ],\n image: DecorationImage(\n fit: BoxFit.cover,\n image: AssetImage(\n 'assets/images/wy_200x300.jpg',\n )),\n shape: CircleBorder(\n side: BorderSide(width: 1.0, color: Colors.orangeAccent),\n )),\n child: SizedBox(\n height: 100,\n width: 100,\n child: Icon(\n Icons.ac_unit,\n color: Colors.white,\n size: 40,\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":70,"name":"DecoratedBox形状和图片装饰","priority":2,"subtitle":" \n【shape】 : 形状 【BoxShape】\n【image】 : 背景图片 【DecorationImage】,","code":"import 'package:flutter/material.dart';\nclass ShapeImageDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: BoxDecoration(\n shape: BoxShape.circle,\n image: DecorationImage(\n fit: BoxFit.cover,\n image: AssetImage(\n 'assets/images/wy_200x300.jpg',\n ))),\n child: SizedBox(\n height: 80,\n width: 80,\n child: Icon(\n Icons.ac_unit,\n color: Colors.white,\n size: 40,\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":70,"name":"DecoratedBox边线装饰","priority":3,"subtitle":"【border】 : 边线 【BoxBorder】,","code":"import 'package:flutter/material.dart';\nclass BorderDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n position: DecorationPosition.foreground,\n decoration: BoxDecoration(\n border: Border(\n bottom: BorderSide(color: Colors.orange, width: 2),\n top: BorderSide(color: Colors.orange, width: 2)),\n ),\n child: SizedBox(\n height: 80,\n width: 100,\n child: Image.asset(\n 'assets/images/wy_200x300.jpg',\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":85,"name":"Align其他用法","priority":2,"subtitle":" \n由于Alignment对象可指定在父容器中宽高的分率位置\n可以使用Align实现一些复杂的排布需求，比如按指定的数学方程变化位置","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass Ball extends StatelessWidget {\n Ball({\n Key key,\n this.radius = 15,\n this.color = Colors.blue,\n }) : super(key: key);\n final double radius; //半径\n final Color color; //颜色\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: radius * 2,\n height: radius * 2,\n decoration: BoxDecoration(\n shape: BoxShape.circle,\n color: color,\n ),\n );\n }\n}\n\nclass SinLayout extends StatefulWidget {\n SinLayout({\n Key key,\n }) : super(key: key);\n\n @override\n _SinLayoutState createState() => _SinLayoutState();\n}\n\nclass _SinLayoutState extends State<SinLayout> {\n var _x = 0.0; //Alignment坐标系上的x坐标\n\n @override\n Widget build(BuildContext context) {\n var item = Container(\n width: 300,\n height: 120,\n color: Colors.black.withAlpha(10),\n child: Align(\n child: Ball(\n color: Colors.orangeAccent,\n ),\n alignment: Alignment(_x, f(_x * pi)),\n ),\n );\n\n var slider = Slider(\n max: 180,\n min: -180,\n divisions: 360,\n label: \"${_x.toStringAsFixed(2)}π\",\n value: _x * 180,\n onChanged: (v) => setState(() => _x = v / 180));\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[slider, item],\n );\n }\n\n double f(x) {\n //映射函数 -- 可随意指定\n double y = sin(x);\n return y;\n }\n}\n"},{"id":null,"widgetId":278,"name":"BackdropFilter基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【filter】 : 过滤器 【ImageFilter】\nImageFilter.blur可以实现高斯模糊，指定x，y模糊因子。","code":"import 'dart:ui';\nimport 'package:flutter/material.dart';\nclass CustomBackdropFilter extends StatefulWidget {\n @override\n _CustomBackdropFilterState createState() => _CustomBackdropFilterState();\n}\n\nclass _CustomBackdropFilterState extends State<CustomBackdropFilter> {\n double _sigmaX = 1.2;\n double _sigmaY = 1.2;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Stack(\n children: <Widget>[\n _buildImage(),\n Positioned.fill(\n child: ClipRect(\n child: BackdropFilter(\n filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),\n child: Container(\n color: Colors.black.withAlpha(0),\n ),\n ),\n ),\n )\n ],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildImage() {\n return Wrap(\n spacing: 20,\n children: <Widget>[\n Container(\n height: 150,\n width: 150,\n child: Image.asset(\n 'assets/images/sabar.jpg',\n fit: BoxFit.cover,\n ),\n ),\n Container(\n height: 150,\n width: 150,\n child: Image.asset(\n 'assets/images/wy_200x300.jpg',\n fit: BoxFit.cover,\n ),\n ),\n ],\n );\n }\n\n Widget _buildSliders() => Column(\n children: <Widget>[\n Slider(\n min: 0,\n max: 4,\n value: _sigmaX,\n divisions: 360,\n label: 'x:' + _sigmaX.toStringAsFixed(1),\n onChanged: (v) {\n setState(() {\n _sigmaX = v;\n });\n }),\n Slider(\n min: 0,\n max: 4,\n value: _sigmaY,\n divisions: 360,\n label: 'beta:' + _sigmaY.toStringAsFixed(1),\n onChanged: (v) {\n setState(() {\n _sigmaY = v;\n });\n })\n ],\n );\n}\n"},{"id":null,"widgetId":85,"name":"Align基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomAlign extends StatelessWidget {\n final alignments = [\n Alignment.topLeft,\n Alignment.topCenter,\n Alignment.topRight,\n Alignment.centerLeft,\n Alignment.center,\n Alignment.centerRight,\n Alignment.bottomLeft,\n Alignment.bottomCenter,\n Alignment.bottomRight,\n ];\n\n final alignmentsInfo = [\n \"topLeft\",\n \"topCenter\",\n \"topRight\",\n \"centerLeft\",\n \"center\",\n \"centerRight\",\n \"bottomLeft\",\n \"bottomCenter\",\n \"bottomRight\",\n ];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: alignments\n .toList()\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 100,\n height: 60,\n color: Colors.grey.withAlpha(88),\n child: Align(\n child: Container(\n width: 30,\n height: 30,\n color: Colors.cyanAccent,\n ),\n alignment: mode)),\n Text(alignmentsInfo[alignments.indexOf(mode)])\n ]))\n .toList());\n }\n}"},{"id":null,"widgetId":297,"name":"IntrinsicWidth基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n如示例:上面宽可变动，中间宽固定,下面宽取前两者的最高值。","code":"import 'package:flutter/material.dart';\nclass IntrinsicWidthDemo extends StatefulWidget {\n @override\n _IntrinsicWidthDemoState createState() => _IntrinsicWidthDemoState();\n}\n\nclass _IntrinsicWidthDemoState extends State<IntrinsicWidthDemo> {\n var _height =120.0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n buildChild(_height),\n SizedBox(height: 10),\n _buildSlider()\n ],\n ),\n );\n }\n\n Widget buildChild(double leftWidth) {\n return IntrinsicWidth(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: <Widget>[\n Container(\n height: 50,\n width: leftWidth,\n color: Colors.yellow,\n alignment: Alignment.center,\n child: Text(\"width:${leftWidth.toStringAsFixed(1)}\"),\n ),\n Container(\n color: Colors.blue,\n width: 150,\n height: 60,\n alignment: Alignment.center,\n child: Text(\"固定宽\"),\n ),\n Container(\n color: Colors.red,\n height: 40,\n alignment: Alignment.center,\n child: Text(\"最宽\"),\n )\n ],\n ),\n );\n }\n\n Widget _buildSlider() =>Slider(\n value: _height,\n max: 200.0,\n min: 80.0,\n divisions: 17,\n onChanged: (v)=> setState(() => _height= v),\n );\n}\n"},{"id":null,"widgetId":82,"name":"FractionallySizedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【widthFactor】 : 宽分率 【double】\n【heightFactor】 : 高分率 【double】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomFractionallySizedBox extends StatefulWidget {\n @override\n _CustomFractionallySizedBoxState createState() =>\n _CustomFractionallySizedBoxState();\n}\n\nclass _CustomFractionallySizedBoxState\n extends State<CustomFractionallySizedBox> {\n var _hf = 0.5;\n var _wf = 0.4;\n\n @override\n Widget build(BuildContext context) {\n var box = FractionallySizedBox(\n widthFactor: _wf,\n heightFactor: _hf,\n alignment: Alignment.center,\n child: Container(color: Colors.orange),\n );\n return Column(\n children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: box),\n _buildSlider()\n ],\n );\n }\n\n Widget _buildSlider() => Column(\n children: <Widget>[\n Slider(\n divisions: 20,\n min: 0.0,\n max: 2,\n label: '宽分率:' + _wf.toStringAsFixed(1),\n value: _wf,\n onChanged: (v) => setState(() => _wf = v)),\n Slider(\n divisions: 20,\n min: 0.0,\n max: 2,\n label: '高分率:' + _hf.toStringAsFixed(1),\n value: _hf,\n onChanged: (v) => setState(() => _hf = v)),\n ],\n );\n}\n"},{"id":null,"widgetId":73,"name":"Opacity基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【opacity】 : 透明度0~1 【double】","code":"import 'package:flutter/material.dart';\nclass CustomOpacity extends StatefulWidget {\n @override\n _CustomOpacityState createState() => _CustomOpacityState();\n}\n\nclass _CustomOpacityState extends State<CustomOpacity> {\n var _opacity = 0.2;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[_buildSlider(), _buildOpacity()],\n );\n }\n // 创建Opacity\n Widget _buildOpacity() => Opacity(\n opacity: _opacity,\n child: Image.asset(// 图片\n 'assets/images/icon_head.png',\n width: 100,\n ),\n );\n Widget _buildSlider() => Slider(\n divisions: 20,\n label: _opacity.toString(),\n value: _opacity,\n onChanged: (v) => setState(() => _opacity = v));\n}\n"},{"id":null,"widgetId":264,"name":"保存Widget成为图片","priority":2,"subtitle":"通过RenderRepaintBoundary可以获取子组件的Image信息，从而获取字节保存为图片文件。","code":"import 'dart:io';\nimport 'dart:typed_data';\nimport 'dart:ui';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'package:flutter/rendering.dart';\nimport 'package:path_provider/path_provider.dart';\nimport 'dart:ui' as ui;\nimport 'node1_base.dart';\nclass RepaintBoundarySave extends StatelessWidget {\n final GlobalKey _globalKey = GlobalKey();\n\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: [\n RepaintBoundary(\n key: _globalKey,\n child: TempPlayBezier3Page(),\n ),\n Positioned(right: -10, child: _buildButton3(context))\n ],\n );\n }\n\n Widget _buildButton3(context) => MaterialButton(\n child: Icon(\n Icons.save_alt,\n size: 15,\n color: Colors.white,\n ),\n color: Colors.green,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: () async {\n var bits = await _widget2Image(_globalKey);\n var dir = await getApplicationSupportDirectory();\n var file = File(dir.path + \"/save_img.png\");\n var f = await file.writeAsBytes(bits);\n Scaffold.of(context).showSnackBar(SnackBar(\n backgroundColor: Theme.of(context).primaryColor,\n content: Text('保存成功后! 路径为:${f.path}'),\n ));\n });\n\n Future<Uint8List> _widget2Image(GlobalKey key) async {\n RenderRepaintBoundary boundary = key.currentContext.findRenderObject();\n //获得 ui.image\n ui.Image img = await boundary.toImage();\n //获取图片字节\n var byteData = await img.toByteData(format: ui.ImageByteFormat.png);\n Uint8List bits = byteData.buffer.asUint8List();\n return bits;\n }\n}\n"},{"id":null,"widgetId":264,"name":"RepaintBoundary基本使用","priority":1,"subtitle":"【child】 : 子组件 【Widget】\n比如上面的绘制视图，即使shouldRepaint为false,在滑动中会也会不断执行paint方法,使用RepaintBoundary可以避免不必要的绘制。","code":"import 'dart:ui';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass RepaintBoundaryDemo extends StatelessWidget{\n @override\n Widget build(BuildContext context) {\n return RepaintBoundary(\n child: TempPlayBezier3Page(),\n );\n }\n}\n\nclass TempPlayBezier3Page extends StatefulWidget {\n @override\n _TempPlayBezier3PageState createState() => _TempPlayBezier3PageState();\n}\n\nclass _TempPlayBezier3PageState extends State<TempPlayBezier3Page> {\n List<Offset> _pos = <Offset>[];\n int selectPos;\n\n @override\n void initState() {\n _initPoints();\n super.initState();\n }\n\n void _initPoints() {\n _pos = List<Offset>();\n _pos.add(Offset(0, 0));\n _pos.add(Offset(60, -60));\n _pos.add(Offset(-90, -90));\n _pos.add(Offset(-120, -40));\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n width: MediaQuery.of(context).size.width,\n child: CustomPaint(\n painter: TempBezierPainter(pos: _pos, selectPos: selectPos),\n ),\n );\n }\n}\n\nclass TempBezierPainter extends CustomPainter {\n Paint _gridPaint;\n Path _gridPath;\n\n Paint _mainPaint;\n Path _mainPath;\n int selectPos;\n Paint _helpPaint;\n\n List<Offset> pos;\n\n TempBezierPainter({this.pos, this.selectPos}) {\n _gridPaint = Paint()..style = PaintingStyle.stroke;\n _gridPath = Path();\n\n _mainPaint = Paint()\n ..color = Colors.orange\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2;\n _mainPath = Path();\n\n _helpPaint = Paint()\n ..color = Colors.purple\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2\n ..strokeCap = StrokeCap.round;\n }\n\n @override\n void paint(Canvas canvas, Size size) {\n print('----------Paint-------');\n canvas.clipRect(Offset.zero & size);\n canvas.translate(size.width / 2, size.height / 2);\n _drawGrid(canvas, size); //绘制格线\n _drawAxis(canvas, size); //绘制轴线\n\n _mainPath.moveTo(pos[0].dx, pos[0].dy);\n _mainPath.cubicTo(\n pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);\n canvas.drawPath(_mainPath, _mainPaint);\n _drawHelp(canvas);\n _drawSelectPos(canvas);\n }\n\n @override\n bool shouldRepaint(CustomPainter oldDelegate) => false;\n\n void _drawGrid(Canvas canvas, Size size) {\n _gridPaint\n ..color = Colors.grey\n ..strokeWidth = 0.5;\n _gridPath = _buildGridPath(_gridPath, size);\n canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);\n\n canvas.save();\n canvas.scale(1, -1); //沿x轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, 1); //沿y轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, -1); //沿原点镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n }\n\n void _drawAxis(Canvas canvas, Size size) {\n canvas.drawPoints(\n PointMode.lines,\n [\n Offset(-size.width / 2, 0),\n Offset(size.width / 2, 0),\n Offset(0, -size.height / 2),\n Offset(0, size.height / 2),\n Offset(0, size.height / 2),\n Offset(0 - 7.0, size.height / 2 - 10),\n Offset(0, size.height / 2),\n Offset(0 + 7.0, size.height / 2 - 10),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, 7),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, -7),\n ],\n _gridPaint\n ..color = Colors.blue\n ..strokeWidth = 1.5);\n }\n\n Path _buildGridPath(Path path, Size size, {step = 20.0}) {\n for (int i = 0; i < size.height / 2 / step; i++) {\n path.moveTo(0, step * i);\n path.relativeLineTo(size.width / 2, 0);\n }\n for (int i = 0; i < size.width / 2 / step; i++) {\n path.moveTo(step * i, 0);\n path.relativeLineTo(\n 0,\n size.height / 2,\n );\n }\n return path;\n }\n\n void _drawHelp(Canvas canvas) {\n canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);\n canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);\n }\n\n void _drawSelectPos(Canvas canvas) {\n if (selectPos == null) return;\n canvas.drawCircle(\n pos[selectPos],\n 10,\n _helpPaint\n ..color = Colors.green\n ..strokeWidth = 2);\n }\n}\n"},{"id":null,"widgetId":81,"name":"UnConstrainedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【constrainedAxis】 : 仍受约束的轴*2 【Axis】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomUnConstrainedBox extends StatefulWidget {\n @override\n _CustomUnConstrainedBoxState createState() => _CustomUnConstrainedBoxState();\n}\n\nclass _CustomUnConstrainedBoxState extends State<CustomUnConstrainedBox> {\n var _value = false;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: <Widget>[_buildUnconstrainedBox(), _buildConstrainedAxis()],\n );\n }\n\n Widget _buildUnconstrainedBox() {\n var child = Container(\n color: Colors.cyanAccent,\n width: 60,\n height: 60,\n child: Switch(\n value: _value,\n onChanged: (v) {\n setState(() {\n _value = v;\n });\n },\n ),\n );\n\n return Column(\n children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(22),\n width: 150,\n height: 100,\n child: _value\n ? UnconstrainedBox(alignment: Alignment.center, child: child)\n : child,\n ),\n Text(_value ? \"已解除约束\" : \"子组件受约束\")\n ],\n );\n }\n\n Widget _buildConstrainedAxis() {\n return Column(\n children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(22),\n width: 150,\n height: 100,\n child: UnconstrainedBox(\n alignment: Alignment.center,\n constrainedAxis: Axis.vertical,\n child: Container(\n color: Colors.cyanAccent,\n width: 60,\n height: 60,\n )),\n ),\n Text(\"竖直方向仍约束\")\n ],\n );\n }\n}\n"},{"id":null,"widgetId":201,"name":"AnimatedSize基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【alignment】 : 对齐方式 【AlignmentGeometry】\n【curve】 : 动画曲线 【Duration】\n【vsync】 : vsync 【TickerProvider】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedSize extends StatefulWidget {\n @override\n _CustomAnimatedSizeState createState() => _CustomAnimatedSizeState();\n}\n\nclass _CustomAnimatedSizeState extends State<CustomAnimatedSize>\n with SingleTickerProviderStateMixin {\n final double start = 100;\n final double end = 200;\n\n double _width;\n\n @override\n void initState() {\n _width = start;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n alignment: Alignment.center,\n child: AnimatedSize(\n vsync: this,\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n alignment: Alignment(0, 0),\n child: Container(\n height: 40,\n width: _width,\n alignment: Alignment.center,\n color: Colors.blue,\n child: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n ),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(\n value: _width == end,\n onChanged: (v) {\n setState(() {\n _width = v ? end : start;\n });\n });\n}\n"},{"id":null,"widgetId":89,"name":"FadeTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【opacity】 : 动画 【Animation<double>】","code":"import 'package:flutter/material.dart';\nclass CustomFadeTransition extends StatefulWidget {\n @override\n _CustomFadeTransitionState createState() => _CustomFadeTransitionState();\n}\n\nclass _CustomFadeTransitionState extends State<CustomFadeTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n color: Colors.grey.withAlpha(22),\n width: 100,\n height: 100,\n child: FadeTransition(\n opacity: CurvedAnimation(parent: _ctrl, curve: Curves.linear),\n child: Icon(Icons.android, color: Colors.green, size: 60),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":285,"name":"CustomSingleChildLayout的偏移使用","priority":2,"subtitle":" \n可以利用代理的偏移能力，对子组件进行偏移定位。","code":"import 'package:flutter/material.dart';\nclass OffSetWidgetDemo extends StatelessWidget {\n final data = [\n {\n 'offset': Offset(20, 20),\n 'direction': Direction.topLeft,\n },\n {\n 'offset': Offset(20, -15),\n 'direction': Direction.topRight,\n },\n {\n 'offset': Offset(-15, 20),\n 'direction': Direction.bottomLeft,\n },\n {\n 'offset': Offset(-15, 20),\n 'direction': Direction.bottomLeft,\n },\n {\n 'offset': Offset(15, 20),\n 'direction': Direction.bottomLeft,\n },\n {\n 'offset': Offset(-15, -15),\n 'direction': Direction.topRight,\n },\n ];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n runSpacing: 20,\n children: data\n .map((e) => Container(\n width: 150,\n height: 100,\n alignment: Alignment.topRight,\n color: Colors.grey.withAlpha(11),\n child: OffSetWidget(\n offset: e['offset'],\n direction: e['direction'],\n child: Icon(\n Icons.android,\n size: 30,\n color: Colors.green,\n ),\n )))\n .toList());\n }\n}\n\nclass OffSetWidget extends StatelessWidget {\n final Offset offset;\n final Widget child;\n final Direction direction;\n\n OffSetWidget(\n {this.offset = Offset.zero,\n this.child,\n this.direction = Direction.topLeft});\n\n @override\n Widget build(BuildContext context) {\n return CustomSingleChildLayout(\n delegate: _OffSetDelegate(offset: offset, direction: direction),\n child: child,\n );\n }\n}\n\nenum Direction { topLeft, topRight, bottomLeft, bottomRight }\n\nclass _OffSetDelegate extends SingleChildLayoutDelegate {\n final Offset offset;\n final Direction direction;\n\n _OffSetDelegate(\n {this.offset = Offset.zero, this.direction = Direction.topLeft});\n\n @override\n bool shouldRelayout(_OffSetDelegate oldDelegate) =>\n offset != oldDelegate.offset;\n\n @override\n Offset getPositionForChild(Size size, Size childSize) {\n var w = size.width;\n var h = size.height;\n var wc = childSize.width;\n var hc = childSize.height;\n\n switch (direction) {\n case Direction.topLeft:\n return offset;\n case Direction.topRight:\n return offset.translate(w - wc - offset.dx * 2, 0);\n case Direction.bottomLeft:\n return offset.translate(0, h - hc - offset.dy * 2);\n case Direction.bottomRight:\n return offset.translate(w - wc - offset.dx * 2, h - hc - offset.dy * 2);\n }\n return offset;\n }\n}\n"},{"id":null,"widgetId":285,"name":"CustomSingleChildLayout基本使用","priority":1,"subtitle":" \n【delegate】 : 代理 【SingleChildLayoutDelegate】","code":"import 'package:flutter/material.dart';\nclass CustomSingleChildLayoutDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n print('-------CustomSingleChildLayoutDemo------');\n return Container(\n width: 300,\n height: 200,\n color: Colors.grey.withAlpha(11),\n child: CustomSingleChildLayout(\n delegate: _TolySingleChildLayoutDelegate(),\n child: Container(\n color: Colors.orange,\n ),\n ),\n );\n }\n}\n\nclass _TolySingleChildLayoutDelegate extends SingleChildLayoutDelegate {\n @override\n bool shouldRelayout(SingleChildLayoutDelegate oldDelegate) {\n return true;\n }\n\n @override\n Size getSize(BoxConstraints constraints) {\n print('----getSize:----constraints:$constraints----');\n return super.getSize(constraints);\n }\n\n @override\n Offset getPositionForChild(Size size, Size childSize) {\n print('----getPositionForChild: size:$size----childSize:$childSize----');\n return Offset(size.width / 2, 0);\n }\n\n @override\n BoxConstraints getConstraintsForChild(BoxConstraints constraints) {\n print('----getConstraintsForChild:----constraints:$constraints----');\n return BoxConstraints(\n maxWidth: constraints.maxWidth / 2,\n maxHeight: constraints.maxHeight / 2,\n minHeight: constraints.maxHeight / 4,\n minWidth: constraints.maxWidth / 4,\n );\n }\n}"},{"id":null,"widgetId":74,"name":"Padding单独边距边距","priority":2,"subtitle":" \nEdgeInsets.only用来限定相同的四边边距","code":"import 'package:flutter/material.dart';\nclass PaddingOnly extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 150,\n child: Padding(\n padding: EdgeInsets.only(top:10,left: 10),\n child: _buildChild(),\n ),\n );\n }\n\n Widget _buildChild() {\n return Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Text(\"孩子\"),\n );\n }\n}"},{"id":null,"widgetId":74,"name":"Padding方向边距","priority":3,"subtitle":" \nEdgeInsets.symmetric用来限定水平和竖直方向的边距","code":"import 'package:flutter/material.dart';\nclass PaddingSymmetric extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 150,\n child: Padding(\n padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),\n child: _buildChild(),\n ),\n );\n }\n\n Widget _buildChild() {\n return Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Text(\"孩子\"),\n );\n }\n}"},{"id":null,"widgetId":74,"name":"Padding四面等边距","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【padding】 : 内四边距 【EdgeInsetsGeometry】\"\nEdgeInsets.all用来限定相同的四边边距","code":"import 'package:flutter/material.dart';\nclass PaddingAll extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 150,\n child: Padding(\n padding: EdgeInsets.all(20),\n child: _buildChild(),\n ),\n );\n }\n\n Widget _buildChild() {\n return Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Text(\"孩子\"),\n );\n }\n}"},{"id":null,"widgetId":66,"name":"ClipOval基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper<RRect>】","code":"import 'package:flutter/material.dart';\nclass CustomClipOval extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: <Widget>[\n ClipOval(\n\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 150,\n height: 100,\n ),\n ),\n ClipOval(\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 100,\n height: 100,\n fit: BoxFit.cover,\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":263,"name":"FractionalTranslation基本使用","priority":1,"subtitle":"【translation】 : 偏移分度值 【Offset】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass FractionalTranslationDemo extends StatefulWidget {\n @override\n _FractionalTranslationDemoState createState() =>\n _FractionalTranslationDemoState();\n}\n\nclass _FractionalTranslationDemoState extends State<FractionalTranslationDemo> {\n var dx = 0.0;\n var dy = 0.0;\n\n @override\n Widget build(BuildContext context) {\n print(dx);\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[\n Container(\n width: 200,\n height: 100,\n alignment: Alignment.topLeft,\n color: Colors.grey.withAlpha(33),\n child: FractionalTranslation(\n translation: Offset(dx, dy),\n child: Icon(\n Icons.android,\n color: Colors.green,\n ),\n ),\n ),\n _buildSliderX(),\n _buildSliderY()\n ],\n );\n }\n\n Widget _buildSliderX() => Slider(\n min: -2.0,\n max: 10.0,\n value: dx,\n divisions: 100,\n label: 'dx:${dx.toStringAsFixed(1)}',\n onChanged: (v) => setState(() => dx = v),\n );\n\n\n Widget _buildSliderY() => Slider(\n min: -2.0,\n max: 6.0,\n value: dy,\n divisions: 100,\n label: 'dy:${dy.toStringAsFixed(1)}',\n onChanged: (v) => setState(() => dy = v),\n );\n}\n"},{"id":null,"widgetId":80,"name":"BoxConstraints基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【minWidth】 : 最小宽 【double】\n【minHeight】 : 最小高 【double】\n【maxHeight】 : 最大高 【double】\n【maxWidth】 : 最大宽 【double】","code":"import 'package:flutter/material.dart';\nclass CustomConstrainedBox extends StatefulWidget {\n @override\n _CustomConstrainedBoxState createState() => _CustomConstrainedBoxState();\n}\n\nclass _CustomConstrainedBoxState extends State<CustomConstrainedBox> {\n var _text = '';\n\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 40,\n height: 40,\n child: Text(\"Static\"),\n );\n\n var box = ConstrainedBox(\n constraints: BoxConstraints(\n minHeight: 50,\n minWidth: 20,\n maxHeight: 80,\n maxWidth: 150,\n ),\n child: Container(color: Colors.orange, child: Text(_text)),\n );\n return Column(\n children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: <Widget>[child, UnconstrainedBox(child: box), child],\n ),\n ),\n _buildInput(),\n ],\n );\n }\n\n Widget _buildInput() {\n return Padding(\n padding: const EdgeInsets.all(18.0),\n child: TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n hintText: '请输入',\n ),\n onChanged: (v) {\n setState(() {\n _text = v;\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":87,"name":"FittedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【fit】 : 适应模式 【BoxFit】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomFittedBox extends StatefulWidget {\n @override\n _CustomFittedBoxState createState() => _CustomFittedBoxState();\n}\n\nclass _CustomFittedBoxState extends State<CustomFittedBox> {\n double _childW = 20;\n double _childH = 30;\n\n final rainbow = <int>[\n 0xffff0000,\n 0xffFF7F00,\n 0xffFFFF00,\n 0xff00FF00,\n 0xff00FFFF,\n 0xff0000FF,\n 0xff8B00FF\n ];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Wrap(\n spacing: 10,\n runSpacing: 10,\n children: BoxFit.values\n .map((mode) => Column(\n children: <Widget>[\n _buildChild(mode),\n SizedBox(\n height: 10,\n ),\n Text(mode.toString().split('.')[1])\n ],\n ))\n .toList()),\n _buildSlider()\n ],\n );\n }\n\n Widget _buildChild(BoxFit m) {\n return Container(\n color: Colors.grey.withAlpha(44),\n width: 80,\n height: 60,\n child: FittedBox(\n fit: m,\n child: Container(\n width: _childW,\n height: _childH,\n decoration: BoxDecoration(\n //添加渐变色\n gradient: LinearGradient(\n stops: <double>[0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],\n colors: rainbow.map((e) => Color(e)).toList()),\n ),\n ),\n ),\n );\n }\n\n Widget _buildSlider() => Column(\n children: <Widget>[\n Slider(\n min: 10,\n max: 150,\n divisions: 100,\n label: '子宽度:' + _childW.toStringAsFixed(1),\n value: _childW,\n onChanged: (v) => setState(() => _childW = v)),\n Slider(\n min: 10,\n max: 150,\n divisions: 100,\n label: '子高度:' + _childH.toStringAsFixed(1),\n value: _childH,\n onChanged: (v) => setState(() => _childH = v)),\n ],\n );\n}\n"},{"id":null,"widgetId":78,"name":"平移变换translationValues","priority":2,"subtitle":" \n平移x由R0C3数控制,入参为数值,表示平移长度\n平移y由R1C3数控制,入参为数值,表示平移长度\n平移z由R2C3数控制,入参为数值,表示平移长度","code":"import 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass TranslationTransform extends StatefulWidget {\n @override\n _TranslationTransformState createState() => _TranslationTransformState();\n}\n\nclass _TranslationTransformState extends State<TranslationTransform> {\n Matrix4 _m4;\n double _x = 0;\n double _y = 0;\n double _z = 0;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n _m4 = Matrix4.translationValues(_x, _y, _z);\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n Widget _buildSliders() => Column(\n children: <Widget>[\n Slider(\n min: -100,\n max: 100,\n value: _x,\n divisions: 360,\n label: 'x:${_x.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _x = v;\n });\n }),\n Slider(\n min: -100,\n max: 100,\n value: _y,\n divisions: 360,\n label: 'y:${_y.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _y = v;\n });\n }),\n Slider(\n min: -100,\n max: 100,\n value: _z,\n divisions: 360,\n label: 'z:${_z.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _z = v;\n });\n })\n ],\n );\n}\n"},{"id":null,"widgetId":78,"name":"斜切变换skew","priority":1,"subtitle":" \n斜切x由R0C1数控制,入参为弧度值,表示斜切角度\n斜切y由R1C0数控制,入参为弧度值,表示斜切角度","code":"import 'dart:math';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass SkewTransform extends StatefulWidget {\n @override\n _SkewTransformState createState() => _SkewTransformState();\n}\n\nclass _SkewTransformState extends State<SkewTransform> {\n Matrix4 _m4;\n double _alpha = 0;\n double _beta = 0;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n _m4 = Matrix4.skew(_alpha, _beta);\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n Widget _buildSliders() => Column(\n children: <Widget>[\n Slider(\n min: -pi,\n max: pi,\n value: _alpha,\n divisions: 360,\n label: 'alpha:' + (_alpha * 180 / pi).toStringAsFixed(1) + \"°\",\n onChanged: (v) {\n setState(() {\n _alpha = v;\n });\n }),\n Slider(\n min: -pi,\n max: pi,\n value: _beta,\n divisions: 360,\n label: 'beta:' + (_beta * 180 / pi).toStringAsFixed(1) + \"°\",\n onChanged: (v) {\n setState(() {\n _beta = v;\n });\n })\n ],\n );\n}"},{"id":null,"widgetId":78,"name":"透视变换rotation","priority":5,"subtitle":" \n由R3C1、R3C2、R3C3控制透视","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass R3C2 extends StatefulWidget {\n @override\n _R3C2State createState() => _R3C2State();\n}\n\nclass _R3C2State extends State<R3C2> {\n Matrix4 _m4;\n double _value = 0;\n double _rad = 0;\n\n @override\n Widget build(BuildContext context) {\n _m4 = Matrix4.identity()\n// ..setEntry(3, 0, _value) // x\n// ..setEntry(3, 1, _value)// y\n ..setEntry(3, 2, _value) // z\n ..rotateY(_rad)\n// ..rotateX(_rad)\n ;\n return Column(\n children: <Widget>[\n Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildSliders() => Column(\n children: <Widget>[\n Slider(\n min: -0.01,\n max: 0.01,\n value: _value,\n divisions: 360,\n label: 'x:${_value.toStringAsFixed(5)}',\n onChanged: (v) {\n setState(() {\n _value = v;\n });\n }),\n Slider(\n min: -pi,\n max: pi,\n value: _rad,\n divisions: 360,\n label: '角度:' + (_rad * 180 / pi).toStringAsFixed(1) + \"°\",\n onChanged: (v) {\n setState(() {\n _rad = v;\n });\n }),\n ],\n );\n}"},{"id":null,"widgetId":78,"name":"旋转变换rotation","priority":4,"subtitle":" \nx旋转由R1C1、R1C2、R2C1、R2C2控制,入参表示弧度\ny旋转由R0C0、R0C2、R2C0、R2C2控制,入参表示弧度\nz旋转由R0C0、R0C1、R1C0、R1C1控制,","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass RotateTransform extends StatefulWidget {\n @override\n _RotateTransformState createState() => _RotateTransformState();\n}\n\nclass _RotateTransformState extends State<RotateTransform> {\n Matrix4 _m4;\n double _x = 0;\n int _rotateFlag = 1;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n if (_rotateFlag == 1) {\n _m4 = Matrix4.rotationX(_x);\n } else if (_rotateFlag == 2) {\n _m4 = Matrix4.rotationY(_x);\n } else {\n _m4 = Matrix4.rotationZ(_x);\n }\n\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n final Map<int, String> map = {\n 1: 'rotationX',\n 2: 'rotationY',\n 3: 'rotationZ',\n };\n\n Widget _buildSliders() => Column(\n children: <Widget>[\n Wrap(\n children: map.keys.map((key) => _buildChild(key)).toList(),\n ),\n Slider(\n min: -pi,\n max: pi,\n value: _x,\n divisions: 360,\n label: 'x:${_x.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _x = v;\n });\n }),\n ],\n );\n\n Padding _buildChild(int key) {\n return Padding(\n padding: const EdgeInsets.all(4.0),\n child: FilterChip(\n selectedColor: Colors.orange.withAlpha(55),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n pressElevation: 5,\n elevation: 3,\n avatar: CircleAvatar(child: Text(key.toString())),\n label: Text(map[key]),\n selected: _rotateFlag == key,\n onSelected: (bool value) {\n print(map[key]);\n setState(() {\n _x = 0;\n if (value) {\n _rotateFlag = key;\n }\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":78,"name":"缩放变换diagonal3Values","priority":3,"subtitle":" \n缩放x由R0C0数控制,入参为数值,表示缩放分率\n缩放y由R1C2数控制,入参为数值,表示缩放分率\n缩放z由R2C2数控制,入参为数值,表示缩放分率","code":"import 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass ScaleTransform extends StatefulWidget {\n @override\n _ScaleTransformState createState() => _ScaleTransformState();\n}\n\nclass _ScaleTransformState extends State<ScaleTransform> {\n Matrix4 _m4;\n double _x = 1.0;\n double _y = 1.0;\n double _z = 1.0;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n _m4 = Matrix4.diagonal3Values(_x, _y, _z);\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n Widget _buildSliders() => Column(\n children: <Widget>[\n Slider(\n min: -2,\n max: 2,\n value: _x,\n divisions: 360,\n label: 'x:${_x.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _x = v;\n });\n }),\n Slider(\n min: -2,\n max: 2,\n value: _y,\n divisions: 360,\n label: 'y:${_y.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _y = v;\n });\n }),\n Slider(\n min: -2,\n max: 2,\n value: _z,\n divisions: 360,\n label: 'z:${_z.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _z = v;\n });\n })\n ],\n );\n}"},{"id":null,"widgetId":295,"name":"AbsorbPointer基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【absorbing】 : 是否吸收事件 【bool】\n如下,Switch选中时absorbing为true，按钮事件将被吸收，无法点击。","code":"import 'package:flutter/material.dart';\nclass CustomAbsorbPointer extends StatefulWidget {\n @override\n _CustomAbsorbPointerState createState() => _CustomAbsorbPointerState();\n}\n\nclass _CustomAbsorbPointerState extends State<CustomAbsorbPointer> {\n bool _absorbing = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n GestureDetector(\n onTap: (){\n print('AbsorbPointer');\n },\n child: AbsorbPointer(\n absorbing: _absorbing,\n child: _buildButton(),\n ),\n ),\n _buildSwitch(),\n Text(!_absorbing ? '允许点击' : '事件已被吸收')\n ],\n ),\n );\n }\n\n Widget _buildButton() => RaisedButton(\n color: Theme.of(context).primaryColor,\n child: Text(\n 'To About',\n style: TextStyle(color: Colors.white),\n ),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n\n _buildSwitch() => Switch(\n value: _absorbing,\n onChanged: (v) {\n setState(() {\n _absorbing = v;\n });\n });\n}\n"},{"id":null,"widgetId":84,"name":"SizedOverflowBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【size】 : 尺寸偏移 【Size】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomSizedOverflowBox extends StatefulWidget {\n\n @override\n _CustomSizedOverflowBoxState createState() => _CustomSizedOverflowBoxState();\n}\n\nclass _CustomSizedOverflowBoxState extends State<CustomSizedOverflowBox> {\n double _x = 50;\n double _y = 44;\n\n @override\n Widget build(BuildContext context) {\n var box = SizedOverflowBox(\n alignment: Alignment.bottomRight,\n size: Size(_x, _y),\n child: Container(width: 30, height: 50, color: Colors.orange),\n );\n return Column(\n children: <Widget>[\n Container(\n alignment: Alignment.topLeft,\n color: Colors.grey.withAlpha(88),\n width: 250,\n height: 60,\n child: box),\n _buildSlider()\n ],\n );\n }\n\n Widget _buildSlider() =>\n Column(\n children: <Widget>[\n Slider(\n divisions: 100,\n min: 0,\n max: 250,\n label: 'x:' + _x.toStringAsFixed(1),\n value: _x,\n onChanged: (v) => setState(() => _x = v)),\n Slider(\n divisions: 100,\n min: 0,\n max: 100,\n label: 'y:' + _y.toStringAsFixed(1),\n value: _y,\n onChanged: (v) => setState(() => _y = v)),\n\n ],\n );\n}\n"},{"id":null,"widgetId":192,"name":"SliverOpacity基本使用","priority":1,"subtitle":" \n【opacity】 : 透明度 【double】\n【sliver】 : 子组件 【Function()】","code":"import 'package:flutter/material.dart';\nclass SliverOpacityDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[\n _buildSliverAppBar(),\n SliverPadding(\n padding: EdgeInsets.only(top: 10),\n sliver: SliverOpacity(opacity: 0.2, sliver: _buildSliverGrid()))\n ],\n ),\n );\n }\n\n Widget _buildSliverGrid() => SliverGrid.extent(\n childAspectRatio: 1 / 0.618,\n maxCrossAxisExtent: 180,\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: data\n .map((e) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: e,\n child: Text(\n colorString(e),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":183,"name":"CustomScrollView基本使用","priority":1,"subtitle":" \n【slivers】 : 子组件列表 【List<Widget>】\n【reverse】 : 是否反向 【bool】\n【scrollDirection】 : 滑动方向 【Axis】\n【controller】 : 控制器 【ScrollController】","code":"import 'package:flutter/material.dart';\nclass CustomScrollViewDemo extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n anchor: 0,\n scrollDirection: Axis.vertical,\n reverse: false,\n slivers: <Widget>[_buildSliverAppBar(), _buildSliverFixedExtentList()],\n ),\n );\n }\n\n Widget _buildSliverFixedExtentList() => SliverFixedExtentList(\n itemExtent: 60,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png')),\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n title: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.black, //标题\n shadows: [\n Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2)\n ]),\n ),\n background: Image.asset(\n \"assets/images/caver.jpeg\", fit: BoxFit.cover,\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":191,"name":"SliverPadding基本使用","priority":1,"subtitle":" \n【sliver】 : 子组件 【Widget】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass SliverPaddingDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[_buildSliverAppBar(), SliverPadding(\n padding: EdgeInsets.only(top: 10),\n sliver\n : _buildSliverGrid())],\n ),\n );\n }\n\n Widget _buildSliverGrid() => SliverGrid.extent(\n childAspectRatio: 1 / 0.618,\n maxCrossAxisExtent: 180,\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: data\n .map((e) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: e,\n child: Text(\n colorString(e),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":188,"name":"SliverList基本使用","priority":1,"subtitle":" \nSliverGrid.count 指定轴向数量构造\nSliverGrid.extent 指定轴向长度构造\n属性特征同GridView,可详见之","code":"import 'package:flutter/material.dart';\nclass SliverGirdDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],\n ),\n );\n }\n\n Widget _buildSliverList() => SliverGrid.extent(\n childAspectRatio: 1 / 0.618,\n maxCrossAxisExtent: 180,\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: data\n .map((e) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: e,\n child: Text(\n colorString(e),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":184,"name":"SliverAppBar基本使用","priority":1,"subtitle":" \n【leading】 : 左侧组件 【Widget】\n【title】 : 中间组件 【Widget】\n【actions】 : 尾部组件列表 【List<Widget>】\n【floating】 : 是否浮动 【bool】\n【pinned】 : 是否顶部停留 【bool】\n【snap】 : 是否半收展 【bool】\n【bottom】 : 底部组件 【PreferredSizeWidget】\n【expandedHeight】 : 延展高度 【double】\n【elevation】 : 影深 【double】\n【flexibleSpace】 : 延展空间 【FlexibleSpaceBar】\n【backgroundColor】 : 背景色 【Color】\n【controller】 : 控制器 【ScrollController】\n snap为true时必需floating为true","code":"import 'package:flutter/material.dart';\nclass SliverAppBarDemo extends StatefulWidget {\n @override\n _SliverAppBarDemoState createState() => _SliverAppBarDemoState();\n}\n\nclass _SliverAppBarDemoState extends State<SliverAppBarDemo> {\n bool _floating = false;\n bool _pinned = false;\n bool _snap = false;\n\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildTool(),\n Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[\n _buildSliverAppBar(),\n _buildSliverFixedExtentList()\n ],\n ),\n ),\n ],\n );\n }\n\n Widget _buildSliverAppBar() {\n print(_floating);\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n floating: _floating,\n pinned: _pinned,\n snap: _snap,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(//伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n Widget _buildSliverFixedExtentList() => SliverFixedExtentList(\n itemExtent: 60,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n Widget _buildTool() {\n return Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Wrap(\n direction: Axis.vertical,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Text('floating'),\n Switch(\n value: _floating,\n onChanged: (v) {\n if(_snap&&!v){\n _snap =false;\n }\n setState(() => _floating = v);\n }),\n ],\n ),\n Wrap(\n direction: Axis.vertical,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Text('pinned'),\n Switch(\n value: _pinned,\n onChanged: (v) => setState(() => _pinned = v)),\n ],\n ) ,Wrap(\n direction: Axis.vertical,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Text('snap'),\n Switch(\n value: _snap,\n onChanged: (v) {\n if(_floating){\n setState(() => _snap = v);\n }\n\n }),\n ],\n )\n ],\n );\n }\n}\n"},{"id":null,"widgetId":185,"name":"SliverList基本使用","priority":1,"subtitle":" \n【delegate】 : 孩子代理 【SliverChildDelegate】","code":"import 'package:flutter/material.dart';\nclass SliverListDemo extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],\n ),\n );\n }\n\n Widget _buildSliverList() => SliverList(\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":307,"name":"SliverOverlapAbsorber基本使用","priority":1,"subtitle":" \n【sliver】 : 子组件 【Widget】\n【handle】 : *处理器 【SliverOverlapAbsorberHandle】\n如果不使用SliverOverlapAbsorber和SliverOverlapInjector组件,NestedScrollView的内容会和头部栏重叠。","code":"import 'package:flutter/material.dart';\nclass SliverOverlapAbsorberDemo extends StatelessWidget {\n final _tabs = ['风神传', '封妖志', \"幻将录\", \"永恒传说\"];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 200,\n child: Scaffold(\n body: DefaultTabController(\n length: _tabs.length,\n child: NestedScrollView(\n headerSliverBuilder:\n (BuildContext context, bool innerBoxIsScrolled) {\n return <Widget>[\n SliverOverlapAbsorber(\n handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),\n sliver: SliverAppBar(\n title: const Text('旷古奇书'),\n pinned: true,\n elevation: 6, //影深\n expandedHeight: 220.0,\n forceElevated: innerBoxIsScrolled, //为true时展开有阴影\n flexibleSpace: FlexibleSpaceBar(\n background: Image.asset(\n \"assets/images/wy_300x200_filter.jpg\",\n fit: BoxFit.cover,\n ),\n ),\n bottom: TabBar(\n tabs: _tabs\n .map((String name) => Tab(text: name,))\n .toList(),\n ),\n ),\n ),\n ];\n },\n body: _buildTabBarView(),\n ),\n ),\n ));\n }\n\n Widget _buildTabBarView() {\n return TabBarView(\n children: _tabs.map((String name) {\n return SafeArea(\n top: false,\n bottom: false,\n child: Builder(\n builder: (BuildContext context) {\n return CustomScrollView(\n key: PageStorageKey<String>(name),\n slivers: <Widget>[\n SliverOverlapInjector(\n handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),\n ),\n SliverPadding(\n padding: const EdgeInsets.all(8.0),\n sliver: SliverFixedExtentList(\n itemExtent: 48.0,\n delegate: SliverChildBuilderDelegate(\n (BuildContext context, int index) {\n return ListTile(\n title: Text('《$name》 第 $index章'),\n );\n },\n childCount: 50,\n ),\n ),\n ),\n ],\n );\n },\n ),\n );\n }).toList(),\n );\n }\n}\n"},{"id":null,"widgetId":186,"name":"SliverFixedExtentList基本使用","priority":1,"subtitle":" \n【itemExtent】 : 主轴方向强迫长度 【double】\n【delegate】 : 孩子代理 【SliverChildDelegate】","code":"import 'package:flutter/material.dart';\nclass SliverFixedExtentListDemo extends StatefulWidget {\n @override\n _SliverFixedExtentListDemoState createState() => _SliverFixedExtentListDemoState();\n}\n\nclass _SliverFixedExtentListDemoState extends State<SliverFixedExtentListDemo> {\n final data = <Color>[\n Colors.orange[50],\n Colors.orange[100],\n Colors.orange[200],\n Colors.orange[300],\n Colors.orange[400],\n Colors.orange[500],\n Colors.orange[600],\n Colors.orange[700],\n Colors.orange[800],\n Colors.orange[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],\n ),\n );\n }\n\n Widget _buildSliverList() => SliverFixedExtentList(\n itemExtent: 50,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":189,"name":"SliverToBoxAdapter基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass SliverToBoxAdapterDemo extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[\n _buildSliverAppBar(),\n _buildCommonWidget(),\n _buildSliverList()\n ],\n ),\n );\n }\n\n Widget _buildCommonWidget() => SliverToBoxAdapter(\n child: Container(\n padding: EdgeInsets.symmetric(horizontal: 10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n selected: true,\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n ),\n ),\n );\n\n Widget _buildSliverList() => SliverList(\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 2,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":308,"name":"SliverOverlapInjector基本使用","priority":1,"subtitle":" \n【sliver】 : 子组件 【Widget】\n【handle】 : *处理器 【SliverOverlapAbsorberHandle】\n如果不使用SliverOverlapAbsorber和SliverOverlapInjector组件,NestedScrollView的内容会和头部栏重叠。","code":"import 'package:flutter/material.dart';\nclass SliverOverlapInjectorDemo extends StatelessWidget {\n final _tabs = ['风神传', '封妖志', \"幻将录\", \"永恒传说\"];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 200,\n child: Scaffold(\n body: DefaultTabController(\n length: _tabs.length,\n child: NestedScrollView(\n headerSliverBuilder:\n (BuildContext context, bool innerBoxIsScrolled) {\n return <Widget>[\n SliverOverlapAbsorber(\n handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),\n sliver: SliverAppBar(\n title: const Text('旷古奇书'),\n pinned: true,\n elevation: 6, //影深\n expandedHeight: 220.0,\n forceElevated: innerBoxIsScrolled, //为true时展开有阴影\n flexibleSpace: FlexibleSpaceBar(\n background: Image.asset(\n \"assets/images/wy_300x200_filter.jpg\",\n fit: BoxFit.cover,\n ),\n ),\n bottom: TabBar(\n tabs: _tabs\n .map((String name) => Tab(text: name,))\n .toList(),\n ),\n ),\n ),\n ];\n },\n body: _buildTabBarView(),\n ),\n ),\n ));\n }\n\n Widget _buildTabBarView() {\n return TabBarView(\n children: _tabs.map((String name) {\n return SafeArea(\n top: false,\n bottom: false,\n child: Builder(\n builder: (BuildContext context) {\n return CustomScrollView(\n key: PageStorageKey<String>(name),\n slivers: <Widget>[\n SliverOverlapInjector(\n handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),\n ),\n SliverPadding(\n padding: const EdgeInsets.all(8.0),\n sliver: SliverFixedExtentList(\n itemExtent: 48.0,\n delegate: SliverChildBuilderDelegate(\n (BuildContext context, int index) {\n return ListTile(\n title: Text('《$name》 第 $index章'),\n );\n },\n childCount: 50,\n ),\n ),\n ),\n ],\n );\n },\n ),\n );\n }).toList(),\n );\n }\n}\n"},{"id":null,"widgetId":187,"name":"SliverFillViewport基本使用","priority":1,"subtitle":" \n【viewportFraction】 : 视口分率 【double】\n【delegate】 : 孩子代理 【SliverChildDelegate】","code":"import 'package:flutter/material.dart';\nclass SliverFillViewportDemo extends StatefulWidget {\n @override\n _SliverFillViewportDemoState createState() => _SliverFillViewportDemoState();\n}\n\nclass _SliverFillViewportDemoState extends State<SliverFillViewportDemo> {\n final data = <Color>[\n Colors.orange[50],\n Colors.orange[100],\n Colors.orange[200],\n Colors.orange[300],\n Colors.orange[400],\n Colors.orange[500],\n Colors.orange[600],\n Colors.orange[700],\n Colors.orange[800],\n Colors.orange[900],\n ];\n var _viewportFraction = 0.5;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildTool(),\n Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],\n ),\n ),\n ],\n );\n }\n\n Widget _buildSliverList() => SliverFillViewport(\n viewportFraction: _viewportFraction,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n _buildTool() {\n return Slider(\n value: _viewportFraction,\n min: 0.01,\n divisions: 20,\n label: _viewportFraction.toStringAsFixed(1),\n max: 2.0,\n onChanged: (v) => setState(() => _viewportFraction = v));\n }\n}\n"},{"id":null,"widgetId":196,"name":"FlexibleSpaceBar基本使用","priority":1,"subtitle":" \n【title】 : 标题组件 【Widget】\n【titlePadding】 : 标题间距 【EdgeInsetsGeometry】\n【collapseMode】 : 折叠模式 【CollapseMode】\n【stretchModes】 : 延伸模式 【List<StretchMode>】\n【background】 : 背景组件 【Widget】\n【centerTitle】 : 是否居中 【bool】","code":"import 'package:flutter/material.dart';\nclass FlexibleSpaceBarDemo extends StatelessWidget {\n\n final data = <Color>[\n Colors.blue[50],\n Colors.blue[100],\n Colors.blue[200],\n Colors.blue[300],\n Colors.blue[400],\n Colors.blue[500],\n Colors.blue[600],\n Colors.blue[700],\n Colors.blue[800],\n Colors.blue[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return\n Container(\n height: 300,\n child: CustomScrollView(\n slivers: <Widget>[\n _buildSliverAppBar(),\n _buildSliverFixedExtentList()\n ],\n ),\n );\n }\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n actions: _buildActions(),\n pinned: true,\n backgroundColor: Colors.blue,\n flexibleSpace: FlexibleSpaceBar(//伸展处布局\n centerTitle: false,\n title: Text('张风捷特烈',style: TextStyle(shadows: [\n Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2)\n ]),),\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n stretchModes: [StretchMode.blurBackground,StretchMode.zoomBackground],\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n Widget _buildSliverFixedExtentList() => SliverFixedExtentList(\n itemExtent: 60,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":190,"name":"SliverPersistentHeader基本使用","priority":1,"subtitle":" \n【delegate】 : 代理 【SliverPersistentHeaderDelegate】\n【floating】 : 是否浮动 【bool】\n【pinned】 : 是否顶部停留 【bool】","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass SliverPersistentHeaderDemo extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 500,\n child: CustomScrollView(\n slivers: <Widget>[\n _buildSliverAppBar(),\n _buildPersistentHeader('袅缈岁月，青丝银发',Color(0xffe7fcc9)),\n _buildCommonWidget(),\n _buildPersistentHeader('以梦为马，不负韶华',Color(0xffcca4ff)),\n _buildSliverList()\n ],\n ),\n );\n }\n\n Widget _buildCommonWidget() => SliverToBoxAdapter(\n child: Container(\n padding: EdgeInsets.symmetric(horizontal: 10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n selected: true,\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n ),\n ),\n );\n Widget _buildPersistentHeader(String text,Color color) => SliverPersistentHeader(\n pinned: true,\n delegate: _SliverDelegate(\n minHeight: 40.0,\n maxHeight: 100.0,\n child: Container(\n color: color,\n child: Center(\n child: Text(text, style: TextStyle(\n fontSize: 18,\n shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]),\n ),\n )),\n ));\n\n Widget _buildSliverList() => SliverList(\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 2,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List<Widget> _buildActions() => <Widget>[\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n\n\nclass _SliverDelegate extends SliverPersistentHeaderDelegate {\n _SliverDelegate({\n @required this.minHeight,\n @required this.maxHeight,\n @required this.child,\n });\n\n final double minHeight; //最小高度\n final double maxHeight; //最大高度\n final Widget child; //孩子\n\n @override\n double get minExtent => minHeight;\n\n @override\n double get maxExtent => max(maxHeight, minHeight);\n\n @override\n Widget build(\n BuildContext context, double shrinkOffset, bool overlapsContent) {\n return new SizedBox.expand(child: child);\n }\n\n @override //是否需要重建\n bool shouldRebuild(_SliverDelegate oldDelegate) {\n return maxHeight != oldDelegate.maxHeight ||\n minHeight != oldDelegate.minHeight ||\n child != oldDelegate.child;\n }\n}"},{"id":null,"widgetId":312,"name":"PerformanceOverlay基本使用","priority":1,"subtitle":"使用PerformanceOverlay.allEnabled可以开始所有的监测项。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass PerformanceOverlayDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return PerformanceOverlay.allEnabled(\n\n );\n }\n}\n\n"},{"id":null,"widgetId":197,"name":"ErrorWidget基本使用","priority":1,"subtitle":" \n入参 : 显示信息 【Object】","code":"import 'package:flutter/material.dart';\nclass ErrorWidgetDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ErrorWidget(\n 'I am Error ErrorWidget\\n'\n 'But now, there has no error.'\n ),\n );\n }\n}\n"},{"id":null,"widgetId":110,"name":"Table基本使用","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【columnWidths】 : 列宽 【Map<int, TableColumnWidth>】\n【defaultColumnWidth】 : 默认列宽 【TableColumnWidth】\n【border】 : 边线 【TableBorder】\n【textDirection】 : 文字方向 【TextDirection】\n【defaultVerticalAlignment】 : 单元格竖直方向对齐模式 【TableCellVerticalAlignment】","code":"import 'package:flutter/material.dart';\nclass CustomTable extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var title = _ItemBean(\"单位称\", \"量纲\", \"单位\", \"单位名称\", \"单位符号\");\n var m = _ItemBean(\"长度\", \"L\", \"1m\", \"米\", \"m\");\n var kg = _ItemBean(\"质量\", \"M\", \"1Kg\", \"千克\", \"Kg\");\n var s = _ItemBean(\"时间\", \"T\", \"1s\", \"秒\", \"s\");\n var a = _ItemBean(\"安培\", \"Ι\", \"1A\", \"安培\", \"A\");\n var k = _ItemBean(\"热力学温度\", \"θ\", \"1K\", \"开尔文\", \"K\");\n var mol = _ItemBean(\"物质的量\", \"N\", \"1mol\", \"摩尔\", \"mol\");\n var cd = _ItemBean(\"发光强度\", \"J\", \"1cd\", \"坎德拉\", \"cd\");\n\n var data = <_ItemBean>[title, m, kg, s, a, k, mol, cd];\n\n return SingleChildScrollView(\n scrollDirection: Axis.horizontal,\n child: Table(\n columnWidths: const <int, TableColumnWidth>{\n 0: FixedColumnWidth(80.0),\n 1: FixedColumnWidth(80.0),\n 2: FixedColumnWidth(80.0),\n 3: FixedColumnWidth(80.0),\n 4: FixedColumnWidth(80.0),\n },\n defaultVerticalAlignment: TableCellVerticalAlignment.middle,\n border: TableBorder.all(\n color: Colors.orangeAccent, width: 1.0, style: BorderStyle.solid),\n children: data\n .map((item) => TableRow(children: <Widget>[\n Center(\n child: Text(\n item.name,\n style: TextStyle(color: Colors.blue),\n )),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.symbol)),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.unitSymbol)),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.unitName)),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.unit)),\n ),\n ]))\n .toList(),\n ),\n );\n }\n}\n\nclass _ItemBean {\n String name;\n String symbol;\n String unit;\n String unitName;\n String unitSymbol;\n\n _ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);\n}\n"},{"id":null,"widgetId":313,"name":"RawImage基本使用","priority":1,"subtitle":"【image】 : 图片 【ui.Image】\n【width】 : 宽 【int】\n【height】: 高 【int】\n【isAntiAlias】: 是否抗锯齿 【bool】\n【filterQuality】: 过滤质量 【FilterQuality】\n很多属性同Image,详见之.","code":"import 'dart:async';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'dart:ui' as ui;\nclass RawImageDemo extends StatefulWidget {\n @override\n _RawImageDemoState createState() => _RawImageDemoState();\n}\n\nclass _RawImageDemoState extends State<RawImageDemo> {\n ui.Image _image;\n\n @override\n void initState() {\n super.initState();\n _loadImageFromAssets('assets/images/icon_head.png');\n }\n\n @override\n Widget build(BuildContext context) {\n if (_image == null)\n return Container(\n width: 80,\n height: 80,\n );\n\n return Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n RawImage(\n image: _image,\n width: 150,\n height: 150,\n isAntiAlias: true,\n filterQuality: FilterQuality.high,\n ),\n Text('isAntiAlias: true'),\n Text('FilterQuality.high')\n ],\n ),\n Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n RawImage(\n image: _image,\n width: 150,\n height: 150,\n isAntiAlias: false,\n ),\n Text('isAntiAlias: false'),\n Text('FilterQuality.low')\n ],\n ),\n ],\n );\n }\n\n void _loadImageFromAssets(String name) async {\n _image = await loadImageByProvider(AssetImage(name));\n\n setState(() {});\n }\n\n //通过ImageProvider读取Image\n Future<ui.Image> loadImageByProvider(\n ImageProvider provider, {\n ImageConfiguration config = ImageConfiguration.empty,\n }) async {\n Completer<ui.Image> completer = Completer<ui.Image>(); //完成的回调\n ImageStreamListener listener;\n ImageStream stream = provider.resolve(config); //获取图片流\n listener = ImageStreamListener((ImageInfo frame, bool sync) {\n //监听\n final ui.Image image = frame.image;\n completer.complete(image); //完成\n stream.removeListener(listener); //移除监听\n });\n stream.addListener(listener); //添加监听\n return completer.future; //返回\n }\n}\n"},{"id":null,"widgetId":338,"name":"ButtonBarTheme基本使用","priority":1,"subtitle":"可指定ButtonBarThemeData数据属性为【后代】的ButtonBar组件设置默认样式，如对齐方式、样式、边距等。也可以用ButtonBarTheme.of获取ButtonBar的主题属性。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass ButtonBarThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonBarTheme(\n child: TempButtonBar(),\n data: ButtonBarTheme.of(context).copyWith(\n alignment: MainAxisAlignment.center,\n buttonPadding: EdgeInsets.symmetric(horizontal: 6),\n overflowDirection: VerticalDirection.up,\n buttonMinWidth: 150,\n buttonHeight: 30,\n buttonTextTheme: ButtonTextTheme.primary));\n }\n}\n\nclass TempButtonBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonBar(\n alignment: MainAxisAlignment.center,\n children: <Widget>[\n RaisedButton(\n color: Colors.blue, child: Text(\"1.Raised\"), onPressed: () {}),\n OutlineButton(child: Text(\"2.Outline\"), onPressed: () {}),\n FlatButton(\n color: Colors.blue,\n onPressed: () {},\n child: Text(\"3.Flat\"),\n )\n ],\n );\n }\n}\n"},{"id":null,"widgetId":329,"name":"DividerTheme使用","priority":1,"subtitle":" \n属性参数与Divider类似，可以通过DividerTheme.of获取分割线主题数据，\"\n也可以为DividerTheme【后代】的分割线设置默认样式，包括颜色、粗细、高度等。","code":"import 'package:flutter/material.dart';\nclass DividerThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DividerTheme(\n data: DividerThemeData(\n color: Colors.orange,\n thickness: 2,\n space: 10,\n indent: 10,\n endIndent: 10,\n\n ),\n child: Wrap(\n spacing: 10,\n children: <Widget>[\n Divider(),\n Divider(),\n Divider(),\n Divider(),\n Divider(),\n Container(\n height: 100,\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n VerticalDivider(),\n VerticalDivider(),\n VerticalDivider(),\n VerticalDivider(),\n VerticalDivider(),\n ],\n ),\n )\n ],\n ),\n );\n }\n}"},{"id":null,"widgetId":334,"name":"ListTileTheme基本使用","priority":1,"subtitle":"可指定ListTileThemeData数据属性为【后代】的ListTile组件设置默认样式，如样式、颜色、装饰、边距等。也可以用ListTileTheme.of获取ListTile的主题属性。","code":"import 'package:flutter/material.dart';\nclass ListTileThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ListTileTheme(\n dense: false,\n style: ListTileStyle.list,\n selectedColor: Colors.blue,\n contentPadding: EdgeInsets.only(left: 15,right: 15,top: 5,bottom: 5),\n iconColor: Colors.purple,\n textColor: Colors.orange,\n child: _ListTileSimple(),\n );\n }\n}\n\nclass _ListTileSimple extends StatefulWidget {\n @override\n _ListTileSimpleState createState() => _ListTileSimpleState();\n}\n\nclass _ListTileSimpleState extends State<_ListTileSimple> {\n bool _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n selected: _selected,\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n trailing: Icon(Icons.more_vert),\n onTap: () => setState(() => _selected = !_selected),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":106,"name":"Expanded基本使用","priority":1,"subtitle":" \n【child】 : 孩子 【Widget】\n【flex】 : 剩余空间分配占比 【int】","code":"import 'package:flutter/material.dart';\nimport '../../../../app/utils/color_utils.dart';\nclass CustomExpended extends StatefulWidget {\n @override\n _CustomExpendedState createState() => _CustomExpendedState();\n}\n\nclass _CustomExpendedState extends State<CustomExpended> {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n buildRow([0, 0, 0]),\n SizedBox(height: 10,),\n buildRow([0, 0, 1]),\n SizedBox(height: 10,),\n buildRow([1, 1, 1]),\n SizedBox(height: 10,),\n buildRow([2, 3, 3]),\n ],\n ),\n );\n }\n\n Widget buildRow(List<int> num) {\n return Row(\n children: num.map((e) => Expanded(\n flex: e,\n child: Container(\n alignment: Alignment.center,\n width: 50,\n height: 50,\n color: ColorUtils.randomColor(),\n child: Text(\n 'flex=$e',\n style: TextStyle(color: Colors.white),\n ),\n ),\n )).toList());\n }\n}\n"},{"id":null,"widgetId":181,"name":"DropDownButtonHideUnderline使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】,","code":"import 'package:flutter/material.dart';\nclass CustomDropDownButtonHideUnderline extends StatefulWidget {\n @override\n _CustomDropDownButtonHideUnderlineState createState() =>\n _CustomDropDownButtonHideUnderlineState();\n}\n\nclass _CustomDropDownButtonHideUnderlineState\n extends State<CustomDropDownButtonHideUnderline> {\n Color _color = Colors.red;\n final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n final _info = [\"红色\", \"黄色\", \"蓝色\", \"绿色\"];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: <Widget>[\n Container(\n margin: EdgeInsets.symmetric(horizontal: 20),\n width: 50,\n height: 50,\n color: _color,\n ),\n DropdownButtonHideUnderline(\n child: DropdownButton<Color>(\n value: _color,\n elevation: 1,\n icon: Icon(\n Icons.expand_more,\n size: 20,\n color: _color,\n ),\n items: _buildItems(),\n onChanged: (v) => setState(() => _color = v)),\n ),\n ],\n );\n }\n\n List<DropdownMenuItem<Color>> _buildItems() => _colors\n .map((e) => DropdownMenuItem<Color>(\n value: e,\n child: Text(\n _info[_colors.indexOf(e)],\n style: TextStyle(color: e),\n )))\n .toList();\n}\n"},{"id":null,"widgetId":331,"name":"SliderTheme使用","priority":1,"subtitle":" \n可通过SliderTheme.of获取Slider主题数据对象，其中包含大量属性用于对Slider的设定。\"\n可以为ButtonTheme【后代】的按钮组件设置默认样式，包括颜色、形状、尺寸等。","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass SliderThemeDemo extends StatefulWidget {\n @override\n _SliderThemeDemoState createState() => _SliderThemeDemoState();\n}\n\nclass _SliderThemeDemoState extends State<SliderThemeDemo> {\n var _bliss = 0.5;\n\n @override\n Widget build(BuildContext context) {\n return SliderTheme(\n data: SliderTheme.of(context).copyWith(activeTrackColor: Colors.orange),\n child: Slider(\n min: 0.0,\n max: 200.0,\n divisions: 10,\n label: \"${_bliss.toStringAsFixed(1)}\",\n onChanged: (double value) {\n setState(() {\n _bliss = value;\n });\n },\n value: _bliss,\n ),\n );\n }\n}"},{"id":null,"widgetId":333,"name":"TooltipTheme基本使用","priority":1,"subtitle":"可指定TooltipThemeData数据属性为【后代】的Tooltip组件设置默认样式，如装饰、文字样式、显示时长、边距等。也可以用TooltipTheme.of获取Tooltip的主题属性。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass TooltipThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return TooltipTheme(\n child: TempTooltip(),\n data: TooltipTheme.of(context).copyWith(\n preferBelow: false,\n padding: EdgeInsets.all(5),\n verticalOffset: 20,\n margin: EdgeInsets.all(2),\n textStyle: TextStyle(\n color: Colors.red,\n shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]),\n decoration: BoxDecoration(boxShadow: [\n BoxShadow(\n color: Colors.orangeAccent,\n offset: Offset(1, 1),\n blurRadius: 8)\n ])));\n }\n}\n\nclass TempTooltip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n Tooltip(\n message: \"天王盖地虎\",\n child: Icon(Icons.info_outline)),\n Tooltip(\n message: \"宝塔镇河妖\",\n child: Icon(Icons.info_outline)),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":331,"name":"SliderTheme对Slider的样式定制","priority":2,"subtitle":" \n通过thumbShape和valueIndicatorShape可以对Slider进行样式定制。\"\n注: 本例参考flutter-gallery中的SlideDemo","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass DIYSliderTheme extends StatefulWidget {\n @override\n _DIYSliderThemeState createState() => _DIYSliderThemeState();\n}\n\nclass _DIYSliderThemeState extends State<DIYSliderTheme> {\n var _bliss = 0.5;\n\n @override\n Widget build(BuildContext context) {\n final ThemeData theme = Theme.of(context);\n\n return SliderTheme(\n data: theme.sliderTheme.copyWith(\n activeTrackColor: Colors.deepPurple,\n inactiveTrackColor: Colors.blue.withAlpha(55),\n activeTickMarkColor: theme.colorScheme.onSurface.withOpacity(0.7),\n inactiveTickMarkColor: theme.colorScheme.surface.withOpacity(0.7),\n overlayColor: theme.colorScheme.onSurface.withOpacity(0.12),\n thumbColor: Colors.deepPurple,\n valueIndicatorColor: Colors.deepPurpleAccent,\n thumbShape: _CustomThumbShape(),\n valueIndicatorShape: _CustomValueIndicatorShape(),\n valueIndicatorTextStyle: theme.accentTextTheme.body2\n .copyWith(color: theme.colorScheme.onSurface),\n ),\n child: Slider(\n min: 0.0,\n max: 200.0,\n divisions: 10,\n label: \"${_bliss.toStringAsFixed(1)}\",\n onChanged: (double value) {\n setState(() {\n _bliss = value;\n });\n },\n value: _bliss,\n ),\n );\n }\n}\n\nclass _CustomThumbShape extends SliderComponentShape {\n static const double _thumbSize = 4.0;\n static const double _disabledThumbSize = 3.0;\n\n @override\n Size getPreferredSize(bool isEnabled, bool isDiscrete) {\n return isEnabled\n ? const Size.fromRadius(_thumbSize)\n : const Size.fromRadius(_disabledThumbSize);\n }\n\n static final Animatable<double> sizeTween = Tween<double>(\n begin: _disabledThumbSize,\n end: _thumbSize,\n );\n\n @override\n void paint(PaintingContext context, Offset center,\n {Animation<double> activationAnimation,\n Animation<double> enableAnimation,\n bool isDiscrete,\n TextPainter labelPainter,\n RenderBox parentBox,\n SliderThemeData sliderTheme,\n TextDirection textDirection,\n double value,\n double textScaleFactor,\n Size sizeWithOverflow}) {\n final Canvas canvas = context.canvas;\n final ColorTween colorTween = ColorTween(\n begin: sliderTheme.disabledThumbColor,\n end: sliderTheme.thumbColor,\n );\n final double size = _thumbSize * sizeTween.evaluate(enableAnimation);\n final Path thumbPath = _downTriangle(size, center);\n canvas.drawPath(\n thumbPath, Paint()..color = colorTween.evaluate(enableAnimation));\n }\n}\n\nPath _upTriangle(double size, Offset thumbCenter) =>\n _downTriangle(size, thumbCenter, invert: true);\n\nPath _downTriangle(double size, Offset thumbCenter, {bool invert = false}) {\n final Path thumbPath = Path();\n final double height = sqrt(3.0) / 2.0;\n final double centerHeight = size * height / 3.0;\n final double halfSize = size / 2.0;\n final double sign = invert ? -1.0 : 1.0;\n thumbPath.moveTo(\n thumbCenter.dx - halfSize, thumbCenter.dy + sign * centerHeight);\n thumbPath.lineTo(thumbCenter.dx, thumbCenter.dy - 2.0 * sign * centerHeight);\n thumbPath.lineTo(\n thumbCenter.dx + halfSize, thumbCenter.dy + sign * centerHeight);\n thumbPath.close();\n return thumbPath;\n}\n\nclass _CustomValueIndicatorShape extends SliderComponentShape {\n static const double _indicatorSize = 4.0;\n static const double _disabledIndicatorSize = 3.0;\n static const double _slideUpHeight = 30.0;\n\n @override\n Size getPreferredSize(bool isEnabled, bool isDiscrete) {\n return Size.fromRadius(isEnabled ? _indicatorSize : _disabledIndicatorSize);\n }\n\n static final Animatable<double> sizeTween = Tween<double>(\n begin: _disabledIndicatorSize,\n end: _indicatorSize,\n );\n\n @override\n void paint(PaintingContext context, Offset center,\n {Animation<double> activationAnimation,\n Animation<double> enableAnimation,\n bool isDiscrete,\n TextPainter labelPainter,\n RenderBox parentBox,\n SliderThemeData sliderTheme,\n TextDirection textDirection,\n double value,\n double textScaleFactor,\n Size sizeWithOverflow}) {\n final Canvas canvas = context.canvas;\n final ColorTween enableColor = ColorTween(\n begin: sliderTheme.disabledThumbColor,\n end: sliderTheme.valueIndicatorColor,\n );\n final Tween<double> slideUpTween = Tween<double>(\n begin: 0.0,\n end: _slideUpHeight,\n );\n final double size = _indicatorSize * sizeTween.evaluate(enableAnimation);\n final Offset slideUpOffset =\n Offset(0.0, -slideUpTween.evaluate(activationAnimation));\n final Path thumbPath = _upTriangle(size, center + slideUpOffset);\n final Color paintColor = enableColor\n .evaluate(enableAnimation)\n .withAlpha((255.0 * activationAnimation.value).round());\n canvas.drawPath(\n thumbPath,\n Paint()..color = paintColor,\n );\n canvas.drawLine(\n center,\n center + slideUpOffset,\n Paint()\n ..color = paintColor\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2.0);\n labelPainter.paint(\n canvas,\n center +\n slideUpOffset +\n Offset(-labelPainter.width / 2.0, -labelPainter.height - 4.0));\n }\n}\n"},{"id":null,"widgetId":328,"name":"ChipTheme基本使用","priority":1,"subtitle":"可指定ChipThemeData数据属性为【后代】的Chip类型组件设置默认样式，属性和Chip属性类似，如阴影、颜色、边距、形状、文字样式等。也可以用ChipTheme.of获取Chip的主题数据。","code":"import 'package:flutter/material.dart';\nclass ChipThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ChipTheme(\n data: ChipTheme.of(context).copyWith(\n selectedColor: Colors.orange.withAlpha(55),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n pressElevation: 5,\n elevation: 3,\n ),\n child: CustomFilterChip(),\n );\n }\n}\n\nclass CustomFilterChip extends StatefulWidget {\n @override\n _CustomFilterChipState createState() => _CustomFilterChipState();\n}\n\nclass _CustomFilterChipState extends State<CustomFilterChip> {\n final Map<String, String> map = {\n 'A': 'Ant',\n 'B': 'Bug',\n 'C': 'Cat',\n 'D': 'Dog',\n };\n List<String> _selected = <String>[];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Wrap(\n children: map.keys.map((key) => _buildChild(key)).toList(),\n ),\n Container(\n padding: EdgeInsets.all(10),\n child: Text('您已选择: ${_selected.join(', ')}')),\n ],\n );\n }\n\n Padding _buildChild(String key) {\n return Padding(\n padding: const EdgeInsets.all(4.0),\n child: FilterChip(\n avatar: CircleAvatar(child: Text(key)),\n label: Text(map[key]),\n selected: _selected.contains(map[key]),\n onSelected: (bool value) {\n setState(() {\n if (value) {\n _selected.add(map[key]);\n } else {\n _selected.removeWhere((name) => name == map[key]);\n }\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":315,"name":"LayoutId使用场景","priority":1,"subtitle":" \n【id】 : 标识id 【Object】\n【child】 : 子组件 【Widget】","code":"import 'dart:io';\nimport 'package:flutter/material.dart';\nclass LayoutIdDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n height: 150,\n color: Colors.grey.withAlpha(33),\n child: CustomMultiChildLayout(\n delegate: CornerCustomMultiChildLayout(\n padding:EdgeInsets.only(left: 10,top: 5,right: 10,bottom: 5),\n ),\n children: [\n LayoutId(id: CornerType.topLeft, child: Box50(Colors.red)),\n LayoutId(id: CornerType.topRight, child: Box50(Colors.yellow)),\n LayoutId(id: CornerType.bottomLeft, child: Box50(Colors.blue)),\n LayoutId(id: CornerType.bottomRight, child: Box50(Colors.green)),\n ],\n ),\n );\n }\n}\n\n// 50 颜射盒\nclass Box50 extends StatelessWidget {\n final Color color;\n Box50(this.color);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 50,\n height: 50,\n color: color,\n );\n }\n}\n\n\nenum CornerType{\n topLeft,\n topRight,\n bottomLeft,\n bottomRight\n}\n\n\nclass CornerCustomMultiChildLayout extends MultiChildLayoutDelegate{\n final EdgeInsets padding;\n \n CornerCustomMultiChildLayout({this.padding = EdgeInsets.zero});\n\n @override\n void performLayout(Size size) {\n if (hasChild(CornerType.topLeft)) {\n layoutChild(CornerType.topLeft, BoxConstraints.loose(size));\n positionChild(CornerType.topLeft, Offset.zero.translate(padding.left, padding.top));\n }\n if (hasChild(CornerType.topRight)) {\n var childSize = layoutChild(CornerType.topRight, BoxConstraints.loose(size));\n positionChild(CornerType.topRight, Offset(size.width-childSize.width,0).translate(-padding.right, padding.top));\n }\n if (hasChild(CornerType.bottomLeft)) {\n var childSize = layoutChild(CornerType.bottomLeft, BoxConstraints.loose(size));\n positionChild(CornerType.bottomLeft, Offset(0,size.height-childSize.height).translate(padding.left, -padding.bottom));\n }\n if (hasChild(CornerType.bottomRight)) {\n var childSize = layoutChild(CornerType.bottomRight, BoxConstraints.loose(size));\n positionChild(CornerType.bottomRight, Offset(size.width-childSize.width,size.height-childSize.height).translate(-padding.right, -padding.bottom));\n }\n }\n\n @override\n bool shouldRelayout(CornerCustomMultiChildLayout oldDelegate) => oldDelegate.padding!=padding;\n \n}\n\n"},{"id":null,"widgetId":327,"name":"MaterialBannerTheme基本使用","priority":1,"subtitle":"可指定MaterialBannerThemeData数据属性为【后代】的MaterialBanner组件设置默认样式，如背景色、边距、文字样式等。也可以用MaterialBannerTheme.of获取MaterialBanner的主题数据。","code":"import 'package:flutter/material.dart';\nclass MaterialBannerThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialBannerTheme(\n data: MaterialBannerTheme.of(context).copyWith(\n backgroundColor: Colors.purple,\n padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2),\n leadingPadding:EdgeInsetsDirectional.only(end: 16.0) ,\n contentTextStyle: TextStyle(color: Colors.white),\n ),\n child: _MaterialBannerDemo(),\n );\n }\n}\n\n\nclass _MaterialBannerDemo extends StatelessWidget {\n final info =\n 'A banner displays an important, succinct message, and provides actions for users to address. '\n 'A user action is required for itto be dismissed.';\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[MaterialBanner(\n content: Text(info),\n leading: Icon(Icons.warning, color: Colors.yellow),\n actions: <Widget>[\n RaisedButton(\n color: Colors.white,\n onPressed: () {},\n child: Text(\n 'I KNOW',\n style: TextStyle(\n color: Colors.purple,\n fontWeight: FontWeight.bold,\n fontSize: 14),\n ),\n ),\n\n RaisedButton(\n color: Colors.white,\n onPressed: () {},\n child: Text(\n 'I IGNORE',\n style: TextStyle(\n color: Colors.purple,\n fontWeight: FontWeight.bold,\n fontSize: 14),\n ),\n ),\n ],\n )],\n );\n }\n}"},{"id":null,"widgetId":109,"name":"Flexible基本使用","priority":1,"subtitle":" \n【child】 : 孩子 【Widget】\n【fit】 : 适应模式*2 【FlexFit】\n【flex】 : 剩余空间分配占比 【int】","code":"import 'package:flutter/material.dart';\nclass CustomFlexible extends StatefulWidget {\n @override\n _CustomFlexibleState createState() => _CustomFlexibleState();\n}\n\nclass _CustomFlexibleState extends State<CustomFlexible> {\n double _width = 300.0;\n bool _loose = false;\n\n @override\n Widget build(BuildContext context) {\n return Column(children: <Widget>[\n Container(\n color: Colors.grey.withAlpha(33),\n width: _width,\n padding: EdgeInsets.all(8.0),\n child: Row(\n children: <Widget>[\n Flexible(\n flex: 2,\n child: Container(\n alignment: Alignment.center,\n height: 50,\n color: Colors.red,\n child: Text(\n 'flex=2',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n Flexible(\n flex: 3,\n child: Container(\n alignment: Alignment.center,\n height: 50,\n color: Colors.blue,\n child: Text(\n 'flex=3',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n Flexible(\n flex: 4,\n fit: _loose?FlexFit.loose:FlexFit.tight,\n child: Container(\n constraints: BoxConstraints(maxWidth: 60),\n alignment: Alignment.center,\n height: 50,\n color: Colors.green,\n child: Text(\n 'flex=4 \\nfit:${_loose?'loose':'tight'}',\n style: TextStyle(color: Colors.white),\n ),\n ),\n )\n ],\n )),\n _buildOp()\n ]);\n }\n\n Widget _buildOp() {\n return Row(\n children: <Widget>[\n Switch(\n value: _loose,\n onChanged: (v) => setState(() => _loose = v)),\n Expanded(\n child: Slider(\n divisions: 10,\n min: 100,\n max: 350,\n value: _width,\n onChanged: (v) => setState(() => _width = v)),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":180,"name":"ScrollConfiguration基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【behavior】 : 滑动行为 【ScrollBehavior】\n 可以使用ScrollConfiguration让ListView无蓝色阴影","code":"import 'package:flutter/material.dart';\nclass CustomScrollConfiguration extends StatelessWidget {\n final data = <Color>[\n Colors.cyan[50],\n Colors.cyan[100],\n Colors.cyan[200],\n Colors.cyan[300],\n Colors.cyan[400],\n Colors.cyan[500],\n Colors.cyan[600],\n Colors.cyan[700],\n Colors.cyan[800],\n Colors.cyan[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ScrollConfiguration(\n behavior: NoScrollBehavior(), child: _buildListView()),\n );\n }\n\n Widget _buildListView() => ListView(\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n\nclass NoScrollBehavior extends ScrollBehavior {\n @override\n Widget buildViewportChrome(\n BuildContext context, Widget child, AxisDirection axisDirection) =>\n child;\n}\n"},{"id":null,"widgetId":108,"name":"Positioned基本使用","priority":1,"subtitle":" \n【child】 : 组件 【Widget】\n【top】 : 到父顶距离 【double】\n【right】 : 到父右距离 【double】\n【left】 : 到父左距离 【double】\n【bottom】 : 到父底距离 【double】","code":"import 'package:flutter/material.dart';\nclass CustomPositioned extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var yellowBox = Container(\n color: Colors.yellow,\n height: 100,\n width: 100,\n );\n\n var redBox = Container(\n color: Colors.red,\n height: 90,\n width: 90,\n );\n\n var greenBox = Container(\n color: Colors.green,\n height: 80,\n width: 80,\n );\n\n var cyanBox = Container(\n color: Colors.cyanAccent,\n height: 70,\n width: 70,\n );\n\n return Container(\n width: 200,\n height: 120,\n color: Colors.grey.withAlpha(33),\n child: Stack(\n children: <Widget>[\n yellowBox,\n redBox,\n Positioned(top: 20, left: 20, child: greenBox),\n Positioned(\n child: cyanBox,\n bottom: 10,\n right: 10,\n )\n ],\n ));\n }\n}\n"},{"id":null,"widgetId":332,"name":"ToggleButtonsTheme基本使用","priority":1,"subtitle":"可指定ToggleButtonsThemeData数据属性为【后代】的ToggleButtons组件设置默认样式，如边框样式、颜色、装饰等。也可以用ToggleButtonsTheme.of获取ToggleButtons的主题数据。","code":"import 'package:flutter/material.dart';\nclass ToggleButtonsThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ToggleButtonsTheme(\n data: ToggleButtonsTheme.of(context).copyWith(\n borderWidth: 1,\n borderColor: Colors.orangeAccent,\n selectedBorderColor: Colors.blue,\n splashColor: Colors.purple.withAlpha(66),\n borderRadius: BorderRadius.circular(10),\n selectedColor: Colors.red,\n fillColor: Colors.green.withAlpha(11),\n ),\n child: _ToggleButtonsSimple(),\n );\n }\n}\n\n\nclass _ToggleButtonsSimple extends StatefulWidget {\n @override\n _ToggleButtonsSimpleState createState() => _ToggleButtonsSimpleState();\n}\n\nclass _ToggleButtonsSimpleState extends State<_ToggleButtonsSimple> {\n var _isSelected = [true, false, false];\n\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: <Widget>[\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected = _isSelected.map((e) => false).toList();\n _isSelected[value] = true;\n }),\n );\n }\n}"},{"id":null,"widgetId":167,"name":"MediaQuery获取数据信息","priority":1,"subtitle":" \nMediaQuery.of(context)可以获取MediaQueryData","code":"import 'package:flutter/material.dart';\nclass CustomMediaQuery extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var queryData = MediaQuery.of(context);\n var data = {\n \"size\": queryData.size,\n \"devicePixelRatio\": queryData.devicePixelRatio.toStringAsFixed(1),\n \"textScaleFactor\": queryData.textScaleFactor.toStringAsFixed(1),\n \"platformBrightness\": queryData.platformBrightness,\n \"padding\": queryData.padding,\n \"viewInsets\": queryData.viewInsets,\n \"systemGestureInsets\": queryData.padding,\n \"viewPadding\": queryData.padding,\n \"physicalDepth\": queryData.padding,\n \"alwaysUse24HourFormat\": queryData.padding,\n \"accessibleNavigation\": queryData.alwaysUse24HourFormat,\n \"invertColors\": queryData.invertColors,\n \"highContrast\": queryData.highContrast,\n \"disableAnimations\": queryData.disableAnimations,\n \"boldText\": queryData.boldText,\n };\n\n return Container(\n height: 200,\n color: Colors.grey.withAlpha(11),\n child:ListView(\n children: data.keys.map((e) => buildItem(e, data)).toList(),\n ),\n );\n }\n\n Widget buildItem(String e, Map<String, Object> data) => Column(\n children: <Widget>[\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: <Widget>[\n Text(\n e,\n style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n ),\n Text(\n data[e].toString(),\n style: TextStyle(fontSize: 16, color: Colors.orange),\n )\n ],\n ),\n ),\n Divider(\n height: 1,\n )\n ],\n );\n}\n\n\n"},{"id":null,"widgetId":325,"name":"IconTheme使用","priority":1,"subtitle":" \n可以通过IconTheme.of获取图标主题数据，也可以为IconTheme【后代】的图标组件设置默认样式，包括颜色、透明度、尺寸。","code":"import 'package:flutter/material.dart';\nclass IconThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return IconTheme(\n data: IconThemeData(\n color: Colors.purple,\n opacity: 1.0,\n size: 30\n ),\n child: Wrap(\n spacing: 10,\n children: <Widget>[\n Icon(Icons.add),\n Icon(Icons.ac_unit),\n Icon(Icons.g_translate),\n Icon(Icons.remove)\n ],\n ),\n );\n }\n}"},{"id":null,"widgetId":324,"name":"DefaultTextStyle使用","priority":1,"subtitle":" \n各属性同Text，详见之。\n其功能是: 设置默认的文字样式应用于【后代组件】,注意后代组件也可以指定自身的样式","code":"import 'package:flutter/material.dart';\nclass DefaultTextStyleDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DefaultTextStyle(\n style: TextStyle(\n fontSize: 18,\n color: Colors.blue,\n decoration: TextDecoration.underline),\n child: Wrap(\n spacing: 5,\n children: <Widget>[\n Text(\"Hello,\",),\n FlutterLogo(),\n Text(\"Flutter\",style: TextStyle(color: Colors.red),),\n Text(\"Unit.\"),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":330,"name":"PopupMenuTheme基本使用","priority":1,"subtitle":"可指定PopupMenuThemeData数据属性为【后代】的PopupMenuButton组件设置默认样式，如形状、影深、颜色、文字样式等。也可以用PopupMenuTheme.of获取PopupMenu的主题数据。","code":"import 'package:flutter/material.dart';\nclass PopupMenuThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return PopupMenuTheme(\n data: PopupMenuTheme.of(context).copyWith(\n color: Colors.orangeAccent,\n elevation: 1,\n textStyle: TextStyle(color: Colors.white),\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20),\n bottomRight: Radius.circular(20),\n topRight: Radius.circular(5),\n bottomLeft: Radius.circular(5),\n )),\n ),\n child: _PopupMenuButtonSimple(),\n );\n }\n}\n\nclass _PopupMenuButtonSimple extends StatefulWidget {\n @override\n _PopupMenuButtonSimpleState createState() => _PopupMenuButtonSimpleState();\n}\n\nclass _PopupMenuButtonSimpleState extends State<_PopupMenuButtonSimple> {\n final map = {\n \"关于\": Icons.info_outline,\n \"帮助\": Icons.help_outline,\n \"反馈\": Icons.add_comment,\n };\n\n @override\n Widget build(BuildContext context) {\n return PopupMenuButton<String>(\n itemBuilder: (context) => buildItems(),\n offset: Offset(0, 50),\n onSelected: print,\n onCanceled: () => print('onCanceled'),\n );\n }\n\n List<PopupMenuItem<String>> buildItems() {\n return map.keys\n .toList()\n .map((e) => PopupMenuItem<String>(\n value: e,\n child: Wrap(\n spacing: 6,\n children: <Widget>[\n Icon(\n map[e],\n ),\n Text(e),\n ],\n )))\n .toList();\n }\n}"},{"id":null,"widgetId":326,"name":"ButtonTheme使用","priority":1,"subtitle":" \n属性参数同MaterialButton，可以通过ButtonTheme.of获取按钮主题数据，\"\n也可以为ButtonTheme【后代】的按钮组件设置默认样式，包括颜色、形状、尺寸等。","code":"import 'package:flutter/material.dart';\nclass ButtonThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonTheme(\n buttonColor: Colors.orange,\n splashColor: Colors.blue,\n minWidth: 40,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n child: Wrap(\n spacing: 10,\n children: <Widget>[\n RaisedButton(onPressed: (){},child: Icon(Icons.add)),\n FlatButton(onPressed: (){},child: Icon(Icons.add)),\n OutlineButton(onPressed: (){},child: Icon(Icons.add)),\n MaterialButton(onPressed: (){},child: Icon(Icons.add)),\n ],\n ),\n );\n }\n}"},{"id":null,"widgetId":161,"name":"IndexedStack基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【Lis<Widget>】\n【alignment】 : 对齐方式 【AlignmentGeometry】\n【index】 : 当前显示组件 【int】","code":"import 'package:flutter/material.dart';\nclass CustomIndexedStack extends StatefulWidget {\n @override\n _CustomIndexedStackState createState() => _CustomIndexedStackState();\n}\n\nclass _CustomIndexedStackState extends State<CustomIndexedStack> {\n var _index = 1;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n Container(\n width: 200,\n height: 100,\n color: Colors.grey.withAlpha(33),\n child: IndexedStack(\n index: _index,\n children: <Widget>[\n Container(\n color: Colors.red,\n width: 80,\n height: 80,\n ),\n Positioned(\n bottom: 10,\n right: 10,\n child: Container(\n color: Colors.blue,\n width: 80,\n height: 80,\n ),\n )\n ],\n ),\n ),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(\n value: _index == 0,\n onChanged: (v) => setState(() => _index = v ? 0 : 1),\n );\n}\n"},{"id":null,"widgetId":340,"name":"Viewport的基本使用","priority":1,"subtitle":"【offset】 : *视口偏移量 【ViewportOffset】\n【cacheExtentStyle】: 预加载类型 【CacheExtentStyle】\n【cacheExtent】: 预加载量 【double】\n【axisDirection】: 滑动方向 【AxisDirection】\n【slivers】: 子Sliver组件集 【List<Widget>】\n【anchor】: 锚点 【double】\n可以运行这些代码，查看ColorItem的构建情况，128个色条并非一次性全部构建。","code":"import 'package:flutter/gestures.dart';\nimport 'package:flutter/material.dart';\nimport 'package:flutter/rendering.dart';\nclass ViewportDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 250,\n child: Scrollable(\n axisDirection: AxisDirection.down,\n physics: BouncingScrollPhysics(),\n dragStartBehavior: DragStartBehavior.start,\n viewportBuilder: (ctx, position) => Viewport(\n axisDirection: AxisDirection.down,\n cacheExtent: 200,\n anchor: 0,\n cacheExtentStyle: CacheExtentStyle.pixel,\n offset: position,\n slivers: <Widget>[_buildSliverList()],\n ),\n ),\n );\n }\n\n Widget _buildSliverList() => SliverList(\n delegate: SliverChildBuilderDelegate(\n (_, int index) =>ColorItem(color: data[index],),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n\nclass ColorItem extends StatefulWidget {\n final Color color;\n\n ColorItem({Key key,this.color}) : super(key: key);\n @override\n _ColorItemState createState() => _ColorItemState();\n}\n\nclass _ColorItemState extends State<ColorItem> {\n\n @override\n void initState() {\n super.initState();\n print('-----initState----${colorString(widget.color)}-----------');\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.only(top: 1),\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: widget.color,\n child: Text(\n colorString(widget.color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n }\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":341,"name":"CustomMultiChildLayout基本使用","priority":1,"subtitle":" \n【children】 : 子组件集 【List<Widget>】\n【delegate】 : 布局代理 【MultiChildLayoutDelegate】","code":"import 'dart:io';\nimport 'package:flutter/material.dart';\nclass CustomMultiChildLayoutDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n height: 150,\n color: Colors.grey.withAlpha(33),\n child: CustomMultiChildLayout(\n delegate: CornerCustomMultiChildLayout(\n padding:EdgeInsets.only(left: 10,top: 5,right: 10,bottom: 5),\n ),\n children: [\n LayoutId(id: CornerType.topLeft, child: Box50(Colors.red)),\n LayoutId(id: CornerType.topRight, child: Box50(Colors.yellow)),\n LayoutId(id: CornerType.bottomLeft, child: Box50(Colors.blue)),\n LayoutId(id: CornerType.bottomRight, child: Box50(Colors.green)),\n ],\n ),\n );\n }\n}\n\n// 50 颜射盒\nclass Box50 extends StatelessWidget {\n final Color color;\n Box50(this.color);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 50,\n height: 50,\n color: color,\n );\n }\n}\n\n\nenum CornerType{\n topLeft,\n topRight,\n bottomLeft,\n bottomRight\n}\n\n\nclass CornerCustomMultiChildLayout extends MultiChildLayoutDelegate{\n final EdgeInsets padding;\n \n CornerCustomMultiChildLayout({this.padding = EdgeInsets.zero});\n\n @override\n void performLayout(Size size) {\n if (hasChild(CornerType.topLeft)) {\n layoutChild(CornerType.topLeft, BoxConstraints.loose(size));\n positionChild(CornerType.topLeft, Offset.zero.translate(padding.left, padding.top));\n }\n if (hasChild(CornerType.topRight)) {\n var childSize = layoutChild(CornerType.topRight, BoxConstraints.loose(size));\n positionChild(CornerType.topRight, Offset(size.width-childSize.width,0).translate(-padding.right, padding.top));\n }\n if (hasChild(CornerType.bottomLeft)) {\n var childSize = layoutChild(CornerType.bottomLeft, BoxConstraints.loose(size));\n positionChild(CornerType.bottomLeft, Offset(0,size.height-childSize.height).translate(padding.left, -padding.bottom));\n }\n if (hasChild(CornerType.bottomRight)) {\n var childSize = layoutChild(CornerType.bottomRight, BoxConstraints.loose(size));\n positionChild(CornerType.bottomRight, Offset(size.width-childSize.width,size.height-childSize.height).translate(-padding.right, -padding.bottom));\n }\n }\n\n @override\n bool shouldRelayout(CornerCustomMultiChildLayout oldDelegate) => oldDelegate.padding!=padding;\n \n}\n\n"},{"id":null,"widgetId":96,"name":"Column基本使用","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【mainAxisAlignment】 : 主轴对齐 【MainAxisAlignment】\n【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】\n【textBaseline】 : 文字基线 【TextBaseline】\n【verticalDirection】 : 竖直方向 【VerticalDirection】\n【mainAxisSize】 : 主轴尺寸 【MainAxisSize】","code":"import 'package:flutter/material.dart';\nclass CustomColumn extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildTitle(),\n _buildContent(context),\n ],\n );\n }\n\n Widget _buildTitle() {\n return Container(\n height: 70,\n color: Color(0x4484FFFF),\n child: Row(\n children: <Widget>[\n Padding(\n child: Icon(\n Icons.add_location,\n size: 30,\n color: Colors.pink,\n ),\n padding: EdgeInsets.only(left: 25, right: 20),\n ),\n Expanded(\n child: Text(\n \"附近\",\n style: TextStyle(fontSize: 18),\n ),\n ),\n Padding(\n child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),\n padding: EdgeInsets.only(right: 25),\n ),\n ],\n ));\n }\n\n Widget _buildContent(ctx) => Container(\n width: MediaQuery.of(ctx).size.width,\n color: Colors.orangeAccent,\n height: 100,\n child: Icon(\n Icons.android,\n size: 50,\n color: Colors.white,\n ),\n );\n}\n"},{"id":null,"widgetId":342,"name":"ListView的基本使用","priority":1,"subtitle":"【mainAxis】 : 主轴方向 【Axis】\n【reverse】: 是否反向 【bool】\n【children】: 子组件集 【List<Widget>】","code":"import 'package:flutter/gestures.dart';\nimport 'package:flutter/material.dart';\nimport 'package:flutter/rendering.dart';\nclass ListBodyDemo extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: ListView(\n children: <Widget>[\n ListBody(\n mainAxis: Axis.vertical,\n reverse: false,\n children: <Widget>[\n Container(color: Colors.red, height: 50.0,),\n Container(color: Colors.orange, height: 50.0,),\n Container(color: Colors.yellow, height: 50.0,),\n ],\n ),\n Container(color: Colors.green, height: 80.0,),\n ListBody(\n mainAxis: Axis.vertical,\n reverse: false,\n children: <Widget>[\n Container(color: Colors.blue, height: 50.0,),\n Container(color: Colors.indigo, height: 50.0,),\n Container(color: Colors.purple, height: 50.0,),\n ],\n )\n ]\n ),\n );\n }\n}\n"},{"id":null,"widgetId":95,"name":"Row基本使用","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【mainAxisAlignment】 : 主轴对齐 【MainAxisAlignment】\n【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】\n【textBaseline】 : 文字基线 【TextBaseline】\n【verticalDirection】 : 竖直方向 【VerticalDirection】\n【mainAxisSize】 : 主轴尺寸 【MainAxisSize】","code":"import 'package:flutter/material.dart';\nclass CustomRow extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 70,\n color: Color(0x4484FFFF),\n child: Row(\n children: <Widget>[\n Padding(\n child: Icon(\n Icons.add_location,\n size: 30,\n color: Colors.pink,\n ),\n padding: EdgeInsets.only(left: 25, right: 20),\n ),\n Expanded(\n child: Text(\n \"附近\",\n style: TextStyle(fontSize: 18),\n ),\n ),\n Padding(\n child: Icon(Icons.keyboard_arrow_right, color: Colors.black38),\n padding: EdgeInsets.only(right: 25),\n ),\n ],\n ));\n }\n}\n"},{"id":null,"widgetId":98,"name":"Wrap的textDirection属性","priority":4,"subtitle":" \n【textDirection】 : 文字方向 【TextDirection】","code":"import 'package:flutter/material.dart';\nclass TextDirectionWrap extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: TextDirection.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 100,\n color: Colors.grey.withAlpha(88),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n final yellowBox = Container(\n color: Colors.yellow,\n height: 30,\n width: 50,\n );\n\n final redBox = Container(\n color: Colors.red,\n height: 40,\n width: 40,\n );\n final greenBox = Container(\n color: Colors.green,\n height: 40,\n width: 20,\n );\n final blackBox = Container(\n color: Colors.black,\n height: 10,\n width: 10,\n );\n final purpleBox = Container(\n color: Colors.purple,\n height: 20,\n width: 20,\n );\n final orangeBox = Container(\n color: Colors.orange,\n height: 80,\n width: 20,\n );\n final cyanBox = Container(\n color: Colors.cyanAccent,\n height: 10,\n width: 20,\n );\n\n _buildItem(mode) => Wrap(\n textDirection: mode,\n runSpacing: 10,\n spacing: 10,\n children: <Widget>[\n yellowBox, redBox, greenBox, cyanBox,\n blackBox, purpleBox, orangeBox,\n ],\n );\n}\n"},{"id":null,"widgetId":98,"name":"Wrap的基础用法","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【spacing】 : 主轴条目间距 【double】\n【runSpacing】 : 交叉轴条目间距 【double】\n【direction】 : 主轴对齐 【Axis】","code":"import 'package:flutter/material.dart';\nclass DirectionWrap extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: Axis.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 100,\n color: Colors.grey.withAlpha(33),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n final yellowBox = Container(\n color: Colors.yellow,\n height: 30,\n width: 50,\n );\n\n final redBox = Container(\n color: Colors.red,\n height: 40,\n width: 40,\n );\n final greenBox = Container(\n color: Colors.green,\n height: 40,\n width: 20,\n );\n final blackBox = Container(\n color: Colors.black,\n height: 10,\n width: 10,\n );\n final purpleBox = Container(\n color: Colors.purple,\n height: 20,\n width: 20,\n );\n final orangeBox = Container(\n color: Colors.orange,\n height: 80,\n width: 20,\n );\n final cyanBox = Container(\n color: Colors.cyanAccent,\n height: 10,\n width: 20,\n );\n\n _buildItem(mode) => Wrap(\n direction: mode,\n runSpacing: 10,\n spacing: 10,\n children: <Widget>[\n yellowBox, redBox, greenBox, cyanBox,\n blackBox, purpleBox, orangeBox,\n ],\n );\n}"},{"id":null,"widgetId":98,"name":"Wrap的verticalDirection属性","priority":5,"subtitle":" \n【verticalDirection】 : 竖直方向 【VerticalDirection】","code":"import 'package:flutter/material.dart';\nclass VerticalDirectionWrap extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: VerticalDirection.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 100,\n color: Colors.grey.withAlpha(88),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n final yellowBox = Container(\n color: Colors.yellow,\n height: 30,\n width: 50,\n );\n\n final redBox = Container(\n color: Colors.red,\n height: 40,\n width: 40,\n );\n final greenBox = Container(\n color: Colors.green,\n height: 40,\n width: 20,\n );\n final blackBox = Container(\n color: Colors.black,\n height: 10,\n width: 10,\n );\n final purpleBox = Container(\n color: Colors.purple,\n height: 20,\n width: 20,\n );\n final orangeBox = Container(\n color: Colors.orange,\n height: 80,\n width: 20,\n );\n final cyanBox = Container(\n color: Colors.cyanAccent,\n height: 10,\n width: 20,\n );\n\n _buildItem(mode) => Wrap(\n verticalDirection: mode,\n direction: Axis.vertical,\n runSpacing: 10,\n spacing: 10,\n children: <Widget>[\n yellowBox, redBox, greenBox, cyanBox,\n blackBox, purpleBox, orangeBox,\n ],\n );\n}"},{"id":null,"widgetId":98,"name":"Wrap的alignment属性","priority":2,"subtitle":" \n【alignment】 : 主轴对齐 【WrapAlignment】","code":"import 'package:flutter/material.dart';\nclass WrapAlignmentWrap extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: WrapAlignment.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 100,\n color: Colors.grey.withAlpha(88),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n final yellowBox = Container(\n color: Colors.yellow,\n height: 30,\n width: 50,\n );\n\n final redBox = Container(\n color: Colors.red,\n height: 40,\n width: 40,\n );\n final greenBox = Container(\n color: Colors.green,\n height: 40,\n width: 20,\n );\n final blackBox = Container(\n color: Colors.black,\n height: 10,\n width: 10,\n );\n final purpleBox = Container(\n color: Colors.purple,\n height: 20,\n width: 20,\n );\n final orangeBox = Container(\n color: Colors.orange,\n height: 80,\n width: 20,\n );\n final cyanBox = Container(\n color: Colors.cyanAccent,\n height: 10,\n width: 20,\n );\n\n _buildItem(mode) => Wrap(\n alignment: mode,\n runSpacing: 10,\n spacing: 10,\n children: <Widget>[\n yellowBox, redBox,\n greenBox, cyanBox,\n blackBox, purpleBox,\n orangeBox,\n ],\n );\n}"},{"id":null,"widgetId":98,"name":"Wrap的crossAxisAlignment属性","priority":3,"subtitle":" \n【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】","code":"import 'package:flutter/material.dart';\nclass CrossAxisAlignmentWrap extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: WrapCrossAlignment.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 100,\n color: Colors.grey.withAlpha(88),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n final yellowBox = Container(\n color: Colors.yellow,\n height: 30,\n width: 50,\n );\n\n final redBox = Container(\n color: Colors.red,\n height: 40,\n width: 40,\n );\n final greenBox = Container(\n color: Colors.green,\n height: 40,\n width: 20,\n );\n final blackBox = Container(\n color: Colors.black,\n height: 10,\n width: 10,\n );\n final purpleBox = Container(\n color: Colors.purple,\n height: 20,\n width: 20,\n );\n final orangeBox = Container(\n color: Colors.orange,\n height: 80,\n width: 20,\n );\n final cyanBox = Container(\n color: Colors.cyanAccent,\n height: 10,\n width: 20,\n );\n\n _buildItem(mode) => Wrap(\n crossAxisAlignment: mode,\n runSpacing: 10,\n spacing: 10,\n children: <Widget>[\n yellowBox, redBox,\n greenBox, cyanBox,\n blackBox, purpleBox,\n orangeBox,\n ],\n );\n}"},{"id":null,"widgetId":101,"name":"RichText基本使用","priority":1,"subtitle":" \n【text】 : 文字 【TextSpan】\n 其他属性与Text相同,详见之。","code":"import 'package:flutter/material.dart';\nimport '../../../../app/utils/color_utils.dart';\nclass CustomRichText extends StatelessWidget {\n final str = \" 发光强度简称光强，国际单位是（坎德拉）简写cd。\"\n \"1cd是指光源在指定方向的单位立体角内发出的光通量。\"\n \"光源辐射是均匀时，则光强为I=F/Ω，Ω为立体角，单位为球面度（sr）,F为光通量，\"\n \"单位是流明，对于点光源由I=F/4π 。光亮度是表示发光面明亮程度的，\"\n \"指发光表面在指定方向的发光强度与垂直且指定方向的发光面的面积之比，\"\n \"单位是坎德拉/平方米。对于一个漫散射面，尽管各个方向的光强和光通量不同，\"\n \"但各个方向的亮度都是相等的。电视机的荧光屏就是近似于这样的漫散射面，\"\n \"所以从各个方向上观看图像，都有相同的亮度感。\";\n\n @override\n Widget build(BuildContext context) {\n return Padding(\n padding: const EdgeInsets.only(\n left: 10.0,\n right: 10,\n ),\n child: RichText(\n text: TextSpan(\n children: str\n .split(\"\")\n .map((str) => TextSpan(\n text: str,\n style: TextStyle(\n fontSize: 14, color: ColorUtils.randomColor())))\n .toList())),\n );\n }\n}\n"},{"id":null,"widgetId":97,"name":"Stack基本使用","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【textDirection】 : 孩子排布方向 【MainAxisAlignment】\n【alignment】 : 对齐方式 【AlignmentGeometry】\n【overflow】 : 溢出模式 【Overflow】\n【fit】 : 适应模式 【StackFit】","code":"import 'package:flutter/material.dart';\nclass CustomStack extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var yellowBox = Container(\n color: Colors.yellow,\n height: 100,\n width: 100,\n );\n\n var redBox = Container(\n color: Colors.red,\n height: 90,\n width: 90,\n );\n\n var greenBox = Container(\n color: Colors.green,\n height: 80,\n width: 80,\n );\n\n var cyanBox = Container(\n color: Colors.cyanAccent,\n height: 70,\n width: 70,\n );\n\n return Container(\n width: 200,\n height: 120,\n color: Colors.grey.withAlpha(33),\n child: Stack(\n textDirection: TextDirection.rtl,\n fit: StackFit.loose,\n alignment: Alignment.topRight,\n overflow: Overflow.clip,\n children: <Widget>[yellowBox, redBox, greenBox, cyanBox],\n ),\n );\n }\n}"},{"id":null,"widgetId":97,"name":"Stack和Positioned结合使用","priority":2,"subtitle":" \nPositioned组件只能用与Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。","code":"import 'package:flutter/material.dart';\nclass PositionedStack extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var yellowBox = Container(\n color: Colors.yellow,\n height: 100,\n width: 100,\n );\n\n var redBox = Container(\n color: Colors.red,\n height: 90,\n width: 90,\n );\n\n var greenBox = Container(\n color: Colors.green,\n height: 80,\n width: 80,\n );\n\n var cyanBox = Container(\n color: Colors.cyanAccent,\n height: 70,\n width: 70,\n );\n\n return Container(\n width: 200,\n height: 120,\n color: Colors.grey.withAlpha(33),\n child: Stack(\n children: <Widget>[yellowBox, redBox, greenBox,\n Positioned(\n child: cyanBox,\n bottom: 10,\n right: 10,\n )\n ],\n ));\n }\n}\n"},{"id":null,"widgetId":101,"name":"RichText包含其他组件","priority":2,"subtitle":" \n使用WidgetSpan来承载普通组件，作为RichText的内容","code":"import 'package:flutter/material.dart';\nclass RichTextWithWidget extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n height: 60,\n alignment: Alignment.center,\n child: Text('暂不支持Web')\n// RichText(\n// text: TextSpan(\n// text: 'hello ',\n// style: TextStyle(color: Colors.black, fontSize: 18),\n// children: <InlineSpan>[\n// WidgetSpan(\n// child: Image.asset(\n// 'assets/images/icon_head.png',\n// width: 30,\n// ),\n// alignment: PlaceholderAlignment.baseline,\n// baseline: TextBaseline.ideographic),\n// TextSpan(\n// text: ' , welcome to ',\n// style: TextStyle(color: Colors.blue, fontSize: 18),\n// ),\n// WidgetSpan(\n// child: FlutterLogo(),\n// alignment: PlaceholderAlignment.baseline,\n// baseline: TextBaseline.ideographic),\n// TextSpan(\n// text: ' .\\n',\n// ),\n// TextSpan(\n// text: 'focus me on ',\n// style: TextStyle(color: Colors.orange, fontSize: 16),\n// ),\n// TextSpan(\n// text: 'https://github.com/toly1994328',\n// style: TextStyle(\n// color: Colors.blue,\n// fontSize: 18,\n// decoration: TextDecoration.underline),\n// ),\n// TextSpan(\n// text: ' .\\n',\n// ),\n// ],\n// ),\n// ),\n );\n }\n}\n"},{"id":null,"widgetId":94,"name":"Flex垂直方向顺序","priority":4,"subtitle":" \n【verticalDirection】 : 垂直方向顺序 【VerticalDirection】","code":"import 'package:flutter/material.dart';\nclass VerticalDirectionFlex extends StatelessWidget {\n\n final redBox= Container(\n color: Colors.red,\n height: 30,\n width: 40,\n );\n\n final blueBox= Container(\n color: Colors.blue,\n height: 20,\n width: 30,\n );\n\n final greenBox= Container(\n color: Colors.green,\n height: 20,\n width: 20,\n );\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n runSpacing: 5,\n children: VerticalDirection.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 80,\n color: Colors.grey.withAlpha(33),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n _buildItem(mode) => Flex(\n direction: Axis.vertical,\n verticalDirection: mode,\n children: <Widget>[\n blueBox, redBox, greenBox\n ],\n );\n}\n"},{"id":null,"widgetId":94,"name":"Flex水平方向顺序","priority":5,"subtitle":" \n【textDirection】 : 水平方向顺序 【TextDirection】","code":"import 'package:flutter/material.dart';\nclass TextDirectionFlex extends StatelessWidget {\n\n final redBox= Container(\n color: Colors.red,\n height: 30,\n width: 40,\n );\n\n final blueBox= Container(\n color: Colors.blue,\n height: 20,\n width: 30,\n );\n\n final greenBox= Container(\n color: Colors.green,\n height: 20,\n width: 20,\n );\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n runSpacing: 5,\n children: TextDirection.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 80,\n color: Colors.grey.withAlpha(33),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n _buildItem(mode) => Flex(\n direction: Axis.horizontal,\n textDirection: mode,\n children: <Widget>[\n blueBox, redBox, greenBox\n ],\n );\n}"},{"id":null,"widgetId":94,"name":"Flex主轴对齐方式","priority":2,"subtitle":" \n【mainAxisAlignment】 : 主轴对齐 【MainAxisAlignment】","code":"import 'package:flutter/material.dart';\nclass MainAxisAlignmentFlex extends StatelessWidget {\n\n final redBox= Container(\n color: Colors.red,\n height: 30,\n width: 40,\n );\n\n final blueBox= Container(\n color: Colors.blue,\n height: 20,\n width: 30,\n );\n\n final greenBox= Container(\n color: Colors.green,\n height: 20,\n width: 20,\n );\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n runSpacing: 5,\n children: MainAxisAlignment.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 80,\n color: Colors.grey.withAlpha(33),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n _buildItem(mode) => Flex(\n direction: Axis.horizontal,\n mainAxisAlignment: mode,\n children: <Widget>[\n blueBox, redBox, greenBox\n ],\n );\n}"},{"id":null,"widgetId":94,"name":"Flex的排布方向","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【direction】 : 方向 【Axis】","code":"import 'package:flutter/material.dart';\nclass DirectionFlex extends StatelessWidget {\n\n final redBox= Container(\n color: Colors.red,\n height: 30,\n width: 40,\n );\n\n final blueBox= Container(\n color: Colors.blue,\n height: 20,\n width: 30,\n );\n\n final greenBox= Container(\n color: Colors.green,\n height: 20,\n width: 20,\n );\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: Axis.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 80,\n color: Colors.grey.withAlpha(33),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n _buildItem(mode) => Flex(\n direction: mode,\n children: <Widget>[\n blueBox, redBox, greenBox\n ],\n );\n}"},{"id":null,"widgetId":94,"name":"Flex交叉轴对齐方式","priority":3,"subtitle":" \n【crossAxisAlignment】 : 交叉轴对齐 【CrossAxisAlignment】","code":"import 'package:flutter/material.dart';\nclass CrossAxisAlignmentFlex extends StatelessWidget {\n\n final redBox= Container(\n color: Colors.red,\n height: 30,\n width: 40,\n );\n\n final blueBox= Container(\n color: Colors.blue,\n height: 20,\n width: 30,\n );\n\n final greenBox= Container(\n color: Colors.green,\n height: 20,\n width: 20,\n );\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n runSpacing: 5,\n children: CrossAxisAlignment.values\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 160,\n height: 80,\n color: Colors.grey.withAlpha(33),\n child: _buildItem(mode)),\n Text(mode.toString().split('.')[1])\n ]))\n .toList());\n }\n\n _buildItem(mode) => Flex(\n direction: Axis.horizontal,\n crossAxisAlignment: mode,\n textBaseline: TextBaseline.alphabetic,\n children: <Widget>[\n blueBox, redBox, greenBox\n ],\n );\n}"},{"id":null,"widgetId":99,"name":"Flow圆形排布","priority":1,"subtitle":" \n【children】 : 组件列表 【List<Widget>】\n【delegate】 : 代理 【FlowDelegate】","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass CircleFlow extends StatelessWidget {\n final data = List.generate(\n 16,\n (index) => index.isEven\n ? \"assets/images/icon_head.png\"\n : \"assets/images/wy_300x200.jpg\");\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n height: 300,\n alignment: Alignment.center,\n child: Flow(\n delegate: _CircleFlowDelegate(),\n children: data\n .map((e) => CircleAvatar(backgroundImage: AssetImage(e)))\n .toList(),\n ),\n );\n }\n}\n\nclass _CircleFlowDelegate extends FlowDelegate {\n @override //绘制孩子的方法\n void paintChildren(FlowPaintingContext context) {\n double radius = context.size.shortestSide / 2;\n print(context.getChildSize(0));\n var count = context.childCount;\n var perRad = 2 * pi / count;\n for (int i = 0; i < count; i++) {\n var cSizeX = context.getChildSize(i).width / 2;\n var cSizeY = context.getChildSize(i).height / 2;\n\n var offsetX = (radius - cSizeX) * cos(i * perRad) + radius;\n var offsetY = (radius - cSizeY) * sin(i * perRad) + radius;\n context.paintChild(i,\n transform: Matrix4.translationValues(\n offsetX - cSizeX, offsetY - cSizeY, 0.0));\n }\n }\n\n @override\n bool shouldRepaint(FlowDelegate oldDelegate) {\n return true;\n }\n}\n"},{"id":null,"widgetId":99,"name":"Flow圆形与动画结合","priority":2,"subtitle":" \n通过动画来更改周围组件的位置实现效果","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass BurstFlow extends StatefulWidget {\n static final data = List.generate(\n 16,\n (index) => index.isEven\n ? \"assets/images/icon_head.png\"\n : \"assets/images/wy_300x200.jpg\");\n static final show = Container(\n width: 300,\n height: 300,\n alignment: Alignment.center,\n child: BurstFlow(\n children: data\n .map((e) => CircleAvatar(backgroundImage: AssetImage(e)))\n .toList(),\n menu: CircleAvatar(\n backgroundImage: AssetImage('assets/images/icon_head.png'),\n )));\n\n final List<Widget> children;\n final Widget menu;\n\n BurstFlow({@required this.children, @required this.menu});\n\n @override\n _BurstFlowState createState() => _BurstFlowState();\n}\n\nclass _BurstFlowState extends State<BurstFlow>\n with SingleTickerProviderStateMixin {\n AnimationController _controller;\n double _rad = 0.0;\n bool _closed = true;\n\n @override\n void initState() {\n _controller = AnimationController(\n duration: Duration(milliseconds: 1000), vsync: this)\n ..addListener(() => setState(\n () => _rad = (_closed ? (_controller.value) : 1 - _controller.value)))\n ..addStatusListener((status) {\n if (status == AnimationStatus.completed) {\n _closed = !_closed;\n }\n });\n super.initState();\n }\n\n @override\n void dispose() {\n _controller.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Flow(\n delegate: _BurstFlowDelegate(_rad),\n children: [\n ...widget.children,\n InkWell(\n onTap: () {\n _controller.reset();\n _controller.forward();\n },\n child: widget.menu)\n ],\n );\n }\n}\n\nclass _BurstFlowDelegate extends FlowDelegate {\n final double rad;\n\n _BurstFlowDelegate(this.rad);\n\n @override //绘制孩子的方法\n void paintChildren(FlowPaintingContext context) {\n double radius = context.size.shortestSide / 2;\n var count = context.childCount - 1;\n var perRad = 2 * pi / count;\n for (int i = 0; i < count; i++) {\n print(i);\n var cSizeX = context.getChildSize(i).width / 2;\n var cSizeY = context.getChildSize(i).height / 2;\n var offsetX = rad * (radius - cSizeX) * cos(i * perRad) + radius;\n var offsetY = rad * (radius - cSizeY) * sin(i * perRad) + radius;\n context.paintChild(i,\n transform: Matrix4.translationValues(\n offsetX - cSizeX, offsetY - cSizeY, 0.0));\n }\n context.paintChild(context.childCount - 1,\n transform: Matrix4.translationValues(\n radius - context.getChildSize(context.childCount - 1).width / 2,\n radius - context.getChildSize(context.childCount - 1).height / 2,\n 0.0));\n }\n\n @override\n bool shouldRepaint(FlowDelegate oldDelegate) {\n return true;\n }\n}\n"},{"id":null,"widgetId":179,"name":"ListWheelScrollView基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【perspective】 : 透视度 【double】\n【itemExtent】 : item高 【EdgeInsets】\n【onSelectedItemChanged】 : 选中回调 【ValueChanged<int> 】","code":"import 'package:flutter/material.dart';\nclass CustomListWheelScrollView extends StatefulWidget {\n @override\n _CustomListWheelScrollViewState createState() => _CustomListWheelScrollViewState();\n}\n\nclass _CustomListWheelScrollViewState extends State<CustomListWheelScrollView> {\n var data = <Color>[\n Colors.orange[50],\n Colors.orange[100],\n Colors.orange[200],\n Colors.orange[300],\n Colors.orange[400],\n Colors.orange[500],\n Colors.orange[600],\n Colors.orange[700],\n Colors.orange[800],\n Colors.orange[900],\n ];\n\n Color _color = Colors.blue;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildCircle(),\n Container(\n height: 150,\n width: 300,\n child: ListWheelScrollView(\n perspective: 0.006,\n itemExtent: 50,\n onSelectedItemChanged: (index){\n print('onSelectedItemChanged:$index');\n setState(() => _color=data[index]);\n },\n children: data.map((color) => _buildItem(color)).toList(),\n ),\n ),\n ],\n );\n }\n\n Widget _buildCircle() => Container(\n margin: EdgeInsets.only(bottom: 5),\n width: 30,\n height: 30,\n decoration: BoxDecoration(\n color: _color,\n shape: BoxShape.circle\n ),\n );\n\n Widget _buildItem(Color color) {\n return Container(\n key: ValueKey(color) ,\n alignment: Alignment.center,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":104,"name":"DragTarget基本使用","priority":1,"subtitle":" \n【builder】 : 组件构造器 【DragTargetBuilder<T>】\n【onWillAccept】 : 拖入时 【Function(T)】\n【onAccept】 : 拖拽成功 【Function(T)】\n【onLeave】 : 拖入再脱出 【Function(T)】","code":"import 'package:flutter/material.dart';\nclass CustomDragTarget extends StatefulWidget {\n @override\n _CustomDragTargetState createState() => _CustomDragTargetState();\n}\n\nclass _CustomDragTargetState extends State<CustomDragTarget> {\n Color _color = Colors.grey;\n String _info = 'DragTarget';\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(height: 20,),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n List<Widget> _buildColors() {\n var colors = [\n Colors.red,\n Colors.yellow,\n Colors.blue,\n Colors.green,\n Colors.orange,\n Colors.purple,\n Colors.cyanAccent\n ];\n return colors\n .map(\n (e) => Draggable<Color>(\n child: Container(\n width: 30,\n height: 30,\n alignment: Alignment.center,\n child: Text(\n colors.indexOf(e).toString(),\n style: TextStyle(\n color: Colors.white, fontWeight: FontWeight.bold),\n ),\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n ),\n data: e,\n feedback: Container(\n width: 25,\n height: 25,\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n )),\n )\n .toList();\n }\n\n Widget _buildDragTarget() {\n return DragTarget<Color>(\n onLeave: (data) => setState(() => _info='onLeave'),\n onAccept: (data) => setState(() {\n _info='onAccept';\n _color = data;\n }),\n onWillAccept: (data) {\n setState(() {\n _info='onWillAccept';\n });\n print(\"onWillAccept: data = $data \");\n return data != null;\n },\n builder: (context, candidateData, rejectedData) => Container(\n width: 150.0,\n height: 50.0,\n color: _color,\n child: Center(\n child: Text(\n _info,\n style: TextStyle(color: Colors.white),\n ),\n )));\n }\n}"},{"id":null,"widgetId":173,"name":"StreamBuilder基本使用","priority":1,"subtitle":" \n【stream】 : 子组件 【Stream<T>】\n【initialData】 : 初始数据 【T】\n【builder】 : 点击事件 【AsyncWidgetBuilder<T>】","code":"import 'dart:async';\nimport 'package:flutter/material.dart';\nclass CustomStreamBuilder extends StatefulWidget {\n @override\n _CustomStreamBuilderState createState() => _CustomStreamBuilderState();\n}\n\nclass _CustomStreamBuilderState extends State<CustomStreamBuilder> {\n CountGenerator _generator = CountGenerator()..increment();\n\n @override\n void dispose() {\n _generator.dispose(); //关闭控制器\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: <Widget>[\n FlatButton(\n color: Colors.blue,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n child: Icon(\n Icons.add,\n color: Colors.white,\n ),\n onPressed: () async {\n await _generator.increment();\n },\n ),\n _buildStreamBuilder(),\n FlatButton(\n color: Colors.blue,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n child: Icon(\n Icons.remove,\n color: Colors.white,\n ),\n onPressed: () async {\n await _generator.minus();\n },\n ),\n ],\n ),\n );\n }\n\n Widget _buildStreamBuilder() => StreamBuilder<int>(\n stream: _generator.state,\n builder: (BuildContext context, AsyncSnapshot snap) {\n print(snap);\n if (snap.connectionState == ConnectionState.done) {\n return Text('Done');\n }\n if (snap.connectionState == ConnectionState.active) {\n return Text(\n snap.data.toString(),\n style: Theme.of(context).textTheme.display1,\n );\n }\n if (snap.connectionState == ConnectionState.waiting) {\n return CircularProgressIndicator();\n }\n if (snap.hasError) {\n return Text('Error');\n }\n return Container();\n });\n}\n\nclass CountGenerator {\n int _count = 0; //计数器数据\n final StreamController<int> _controller = StreamController(); //控制器\n\n Stream<int> get state => _controller.stream; //获取状态流\n int get count => _count; //获取计数器数据\n\n void dispose() {//关闭控制器\n _controller.close();\n }\n\n Future<void> increment() async {//增加记数方法\n _controller.add(++_count);\n }\n\n Future<void> minus() async {//增加记数方法\n _controller.add(--_count);\n }\n}\n"},{"id":null,"widgetId":57,"name":"AppBar基本使用","priority":1,"subtitle":" \n【leading】 : 左侧组件 【Widget】\n【title】 : 中间组件 【Widget】\n【actions】 : 右侧组件 【List<Widget>】\n【elevation】 : 影深 【double】\n【shape】 : 形状 【ShapeBorder】\n【backgroundColor】 : 影深 【背景色】\n【centerTitle】 : 中间是否居中 【bool】","code":"import 'package:flutter/material.dart';\nimport '../PopupMenuButton/node1_base.dart';\nclass CustomAppBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return AppBar(\n title: Text('风雅六社'),\n leading: BackButton(),\n backgroundColor: Colors.amber[500],\n elevation: 2,\n centerTitle: true,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20),\n bottomRight: Radius.circular(20),\n topRight: Radius.circular(5),\n bottomLeft: Radius.circular(5),\n )),\n actions: <Widget>[\n IconButton(\n icon: Icon(Icons.star),\n tooltip: 'like',\n onPressed: () {\n // do nothing\n }),\n CustomPopupMenuButton()\n ],\n );\n }\n}\n"},{"id":null,"widgetId":57,"name":"AppBar与TabBar、TabBarView联用","priority":2,"subtitle":" \n【bottom】 : 底部组件 【PreferredSizeWidget】","code":"import 'package:flutter/material.dart';\nimport '../PopupMenuButton/node1_base.dart';\nclass TabAppBar extends StatefulWidget {\n @override\n _TabAppBarState createState() => _TabAppBarState();\n}\n\nclass _TabAppBarState extends State<TabAppBar>\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Container(\n height: 180,\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage(\n \"assets/images/sabar.jpg\",\n ),\n fit: BoxFit.cover)),\n child: _buildAppBar(),\n ),\n Container(\n height: 150, color: Color(0xff916BF0), child: _buildTableBarView())\n ],\n );\n }\n\n Widget _buildAppBar() => AppBar(\n title: Text('风雅六社'),\n elevation: 1,\n leading: BackButton(),\n backgroundColor: Colors.amber[500].withAlpha(33),\n centerTitle: true,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20),\n topRight: Radius.circular(20),\n )),\n actions: <Widget>[\n IconButton(\n icon: Icon(Icons.star),\n tooltip: 'like',\n onPressed: () {\n // do nothing\n }),\n CustomPopupMenuButton()\n ],\n bottom: TabBar(\n isScrollable: true,\n controller: _tabController,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n ),\n );\n\n Widget _buildTableBarView() => TabBarView(\n controller: _tabController,\n children: tabs\n .map((e) => Center(\n child: Text(\n e,\n style: TextStyle(color: Colors.white, fontSize: 20),\n )))\n .toList());\n}\n"},{"id":null,"widgetId":152,"name":"Ink基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【padding】 : 内边距 【EdgeInsetsGeometry】\n【decoration】 : 装饰 【Decoration】\n【width】 : 宽 【double】\n【height】 : 高 【double】\n【color】 : 颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomInk extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Material(\n color: Colors.orangeAccent,\n child: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(\n child: Ink(\n padding: EdgeInsets.all(10),\n decoration: BoxDecoration(\n color: Colors.yellow,\n borderRadius: BorderRadius.all(Radius.circular(20))\n ),\n\n width: 200.0,\n height: 100.0,\n child: InkWell(\n onTap: () {\n },\n child: Center(\n child: Text('Hello'),\n )),\n ),\n ),\n ),\n );\n }\n}\n\n"},{"id":null,"widgetId":152,"name":"Ink.image图片水波纹","priority":2,"subtitle":" \n 其中属性与Image组件一致，详见Image组件","code":"import 'package:flutter/material.dart';\nclass InkImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Material(\n color: Colors.grey[800],\n child: Center(\n child: Ink.image(\n image: AssetImage('assets/images/sabar.jpg'),\n fit: BoxFit.cover,\n width: 300.0,\n height: 200.0,\n child: InkWell(\n onTap: () {},\n child: Align(\n alignment: Alignment.topLeft,\n child: Padding(\n padding: const EdgeInsets.all(10.0),\n child: Text('Chaos',\n style: TextStyle(\n fontWeight: FontWeight.w900, color: Colors.black)),\n ),\n )),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":198,"name":"Form基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onChanged】 : 表单变化回调 【VoidCallback】\n【onWillPop】 : 返回回调 【WillPopCallback】","code":"import 'package:flutter/material.dart';\nclass CustomForm extends StatefulWidget {\n @override\n _CustomFormState createState() => _CustomFormState();\n}\n\nclass _CustomFormState extends State<CustomForm> {\n GlobalKey<FormState> _formKey = GlobalKey<FormState>();\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Form(\n onWillPop: () => _willPop(context),\n key: _formKey,\n onChanged: () {\n print('Form---onChanged');\n },\n child:\n Stack(\n alignment: Alignment.centerRight,\n children: <Widget>[\n Container(\n width: 350,\n child: UnconstrainedBox(\n child: Container(\n width: 200,\n height: 70,\n child: TextFormField(\n style: TextStyle(textBaseline: TextBaseline.alphabetic),\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n labelText: 'username',\n ),\n validator: _validateUsername,\n ),\n ),\n ),\n ),\n Positioned(\n top: 0, right: 0, child: _buildSubmitButton(context)),\n ],\n ),\n ),\n );\n }\n\n String _validateUsername(value) {\n if (value.isEmpty) {\n return '用户名不能为空';\n }\n return null;\n }\n\n RaisedButton _buildSubmitButton(BuildContext context) {\n return RaisedButton(\n color: Colors.blue,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: _onSubmit,\n child: Icon(\n Icons.check,\n color: Colors.white,\n ),\n );\n }\n\n _onSubmit(){\n if (_formKey.currentState.validate()) {\n FocusScope.of(context).requestFocus(FocusNode());\n Navigator.of(context).pop();\n }\n }\n\n Future<bool> _willPop(context) async {\n return await showDialog(\n context: context,\n builder: (context) => AlertDialog(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n title: Text('提示'),\n content: Text('你确定要离开此页吗?'),\n actions: <Widget>[\n FlatButton(\n onPressed: () => Navigator.of(context).pop(true),\n child: Text('确定'),\n ),\n FlatButton(\n onPressed: () => Navigator.of(context).pop(false),\n child: Text('取消'),\n ),\n ],\n ),\n ) ??\n false;\n }\n}\n"},{"id":null,"widgetId":50,"name":"Tooltip基本使用","priority":1,"subtitle":" \n【preferBelow】 : 是否首选下方 【bool】\n【padding】 : 内边距 【EdgeInsetsGeometry】\n【margin】 : 外边距 【EdgeInsetsGeometry】\n【message】 : 消息内容 【String】\n【showDuration】 : 展示时间 【Duration】\n【waitDuration】 : 悬浮出现时间 【Duration】\n【child】 : 孩子 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomTooltip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Tooltip(\n preferBelow: true,\n padding: EdgeInsets.all(5),\n margin: EdgeInsets.all(5),\n message: \"天王盖地虎\",\n showDuration: Duration(seconds: 3),\n waitDuration: Duration(milliseconds: 200),\n child: Icon(Icons.info_outline),\n );\n }\n}\n"},{"id":null,"widgetId":50,"name":"Tooltip的装饰","priority":2,"subtitle":" \n【decoration】 : 装饰对象 【Decoration】\n【textStyle】 : 文字样式 【double】","code":"import 'package:flutter/material.dart';\nclass DecorationTooltip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Tooltip(\n preferBelow: false,\n padding: EdgeInsets.all(5),\n margin: EdgeInsets.all(2),\n message: \"宝塔镇河妖\",\n textStyle: TextStyle(\n color: Colors.red,\n shadows: [Shadow(color: Colors.white,\n offset: Offset(1, 1))]),\n decoration: BoxDecoration(boxShadow: [\n BoxShadow(\n color: Colors.orangeAccent,\n offset: Offset(1, 1), blurRadius: 8)\n ]),\n child: Icon(Icons.info_outline));\n }\n}\n"},{"id":null,"widgetId":175,"name":"RawMaterialButton高亮和形状","priority":2,"subtitle":" \n【highlightElevation】 : 高亮影深 【double】\n【shape】 : 形状 【ShapeBorder】","code":"import 'package:flutter/material.dart';\nclass ShapeRawMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n spacing: 20,\n children: <Widget>[\n RawMaterialButton(\n elevation: 2,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n fillColor: Colors.green,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n onLongPress: ()=>print('onLongPress'),\n child: Icon(Icons.remove),\n onPressed: ()=>print('onPressed'),\n ),\n RawMaterialButton(\n shape:RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(15))),\n elevation: 0,\n highlightElevation: 0,\n fillColor: Colors.blue,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n onLongPress: ()=>print('onLongPress'),\n child: Text('Push'),\n onPressed: ()=>print('onPressed'),\n ),\n RawMaterialButton(\n elevation: 2,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n fillColor: Colors.red,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n onLongPress: ()=>print('onLongPress'),\n child: Icon(Icons.add),\n onPressed: ()=>print('onPressed'),\n ),\n\n ],\n ),\n );\n }\n}"},{"id":null,"widgetId":49,"name":"RefreshIndicator基本使用","priority":1,"subtitle":" \n【child】 : 孩子(可滑动) 【Widget】\n【displacement】 : 指示器悬浮高度 【double】\n【color】 : 指示器颜色 【Color】,","code":"import 'package:flutter/material.dart';\nclass CustomRefreshIndicator extends StatefulWidget {\n @override\n _CustomRefreshIndicatorState createState() => _CustomRefreshIndicatorState();\n}\n\nclass _CustomRefreshIndicatorState extends State<CustomRefreshIndicator> {\n int _count = 0;\n\n @override\n Widget build(BuildContext context) {\n\n return Container(\n height: 200,\n width: 200,\n child: RefreshIndicator(\n onRefresh: _increment,\n displacement: 20,\n color: Colors.orange,\n backgroundColor: Colors.white,\n child: SingleChildScrollView(\n child: Container(\n alignment: Alignment.center,\n width: 200,\n height: 300,\n color: Colors.blue,\n child: Text('$_count',style: TextStyle(color: Colors.white,fontSize: 40)),\n ),\n ),\n ),\n );\n }\n\n Future<void> _increment() async {\n await Future.delayed(Duration(seconds: 2));\n setState(() {\n _count++;\n });\n }\n}\n"},{"id":null,"widgetId":175,"name":"RawMaterialButton基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【elevation】 : 影深 【double】\n【fillColor】 : 填充色 【Color】\n【splashColor】 : 水波纹色 【Color】\n【textStyle】 : 文字样式 【TextStyle】\n【onLongPress】 : 长按事件 【Function()】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomRawMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n spacing: 20,\n children: <Widget>[\n RawMaterialButton(\n elevation: 2,\n fillColor: Colors.green,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n onLongPress: ()=>print('onLongPress'),\n child: Icon(Icons.remove),\n onPressed: ()=>print('onPressed'),\n ),\n RawMaterialButton(\n elevation: 2,\n fillColor: Colors.blue,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n onLongPress: ()=>print('onLongPress'),\n child: Text('Push'),\n onPressed: ()=>print('onPressed'),\n ),\n RawMaterialButton(\n elevation: 2,\n fillColor: Colors.red,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n onLongPress: ()=>print('onLongPress'),\n child: Icon(Icons.add),\n onPressed: ()=>print('onPressed'),\n ),\n\n ],\n ),\n );\n }\n}"},{"id":null,"widgetId":112,"name":"SlideTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【textDirection】 : x轴方向 【TextDirection】\n【position】 : 动画 【Animation<Offset>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomSlideTransition extends StatefulWidget {\n @override\n _CustomSlideTransitionState createState() => _CustomSlideTransitionState();\n}\n\nclass _CustomSlideTransitionState extends State<CustomSlideTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n width: MediaQuery.of(context).size.width,\n color: Colors.grey.withAlpha(33),\n height: 100,\n child: SlideTransition(\n textDirection: TextDirection.ltr,\n position: Tween<Offset>(\n begin: Offset.zero,\n end: Offset(0.2, 0.2),\n ).animate(_ctrl),\n child: Container(\n child: Icon(Icons.android, color: Colors.green, size: 60)),\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":45,"name":"Radio基本使用","priority":1,"subtitle":" \n【value】 : 选钮值 【T】\n【groupValue】 : 当前匹配值 【T】\n【activeColor】 : 激活颜色 【Color】\n【onChanged】 : 改变时回调 【Function(T)】","code":"import 'package:flutter/material.dart';\nclass CustomRadio extends StatefulWidget {\n @override\n _CustomRadioState createState() => _CustomRadioState();\n}\n\nclass _CustomRadioState extends State<CustomRadio> {\n var data = <double>[1, 2, 3, 4, 5];\n double _value = 1;\n\n @override\n Widget build(BuildContext context) {\n return Row(\n mainAxisSize: MainAxisSize.min,\n children: data\n .map((e) => Radio<double>(\n activeColor: Colors.orangeAccent,\n value: e,\n groupValue: _value,\n onChanged: (v) => setState(() => _value = v)))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":165,"name":"PageView基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【onPageChanged】 : 点击事件 【ValueChanged<int>】","code":"import 'package:flutter/material.dart';\nclass CustomPageView extends StatelessWidget {\n final data = <Color>[\n Colors.green[50],\n Colors.green[100],\n Colors.green[200],\n Colors.green[300],\n Colors.green[400],\n Colors.green[500],\n Colors.green[600],\n Colors.green[700],\n Colors.green[800],\n Colors.green[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 150,\n child: PageView(\n onPageChanged: (position){\n print(position);\n },\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 90,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white,\n fontSize:24,shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":165,"name":"PageView控制器简单实用","priority":3,"subtitle":" \n【controller】 : 页面控制器 【PageController】","code":"import 'package:flutter/material.dart';\nclass CtrlPageView extends StatefulWidget {\n @override\n _CtrlPageViewState createState() => _CtrlPageViewState();\n}\n\nclass _CtrlPageViewState extends State<CtrlPageView> {\n final data = <Color>[\n Colors.orange[50],\n Colors.orange[100],\n Colors.orange[200],\n Colors.orange[300],\n Colors.orange[400],\n Colors.orange[500],\n Colors.orange[600],\n Colors.orange[700],\n Colors.orange[800],\n Colors.orange[900],\n ];\n\n PageController _controller;\n\n @override\n void dispose() {\n _controller.dispose();\n super.dispose();\n }\n\n @override\n void initState() {\n super.initState();\n _controller=PageController(\n viewportFraction: 0.8,\n initialPage: (data.length/2).round()\n );\n\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 150,\n child: PageView(\n controller: _controller,\n onPageChanged: (position) {\n print(position);\n },\n children: data\n .map((color) =>\n Container(\n alignment: Alignment.center,\n width: 90,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white,\n fontSize: 24, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":165,"name":"PageView滑动方向","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向 【bool】","code":"import 'package:flutter/material.dart';\nclass DirectionPageView extends StatelessWidget {\n final data = <Color>[\n Colors.orange[50],\n Colors.orange[100],\n Colors.orange[200],\n Colors.orange[300],\n Colors.orange[400],\n Colors.orange[500],\n Colors.orange[600],\n Colors.orange[700],\n Colors.orange[800],\n Colors.orange[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 150,\n child: PageView(\n scrollDirection: Axis.vertical,\n reverse: true,\n onPageChanged: (position) {\n print(position);\n },\n children: data\n .map((color) =>\n Container(\n alignment: Alignment.center,\n width: 90,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white,\n fontSize: 24, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":60,"name":"BottomNavigationBar基本使用","priority":1,"subtitle":" \n【currentIndex】 : 当前索引 【int】\n【elevation】 : 影深 【double】\n【type】 : 类型*2 【BottomNavigationBarType】\n【fixedColor】 : type为fix的颜色 【Color】\n【backgroundColor】 : 背景色 【Color】\n【iconSize】 : 图标大小 【double】\n【selectedLabelStyle】 : 选中文字样式 【TextStyle】\n【unselectedLabelStyle】 : 未选中文字样式 【TextStyle】\n【showUnselectedLabels】 : 显示未选中标签 【bool】\n【showSelectedLabels】 : 显示选中标签 【bool】\n【items】 : 条目 【List<BottomNavigationBarItem>】\n【onTap】 : 点击事件 【Function(int)】","code":"import 'package:flutter/material.dart';\nclass CustomBottomNavigationBar extends StatefulWidget {\n @override\n _CustomBottomNavigationBarState createState() =>\n _CustomBottomNavigationBarState();\n}\n\nclass _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {\n var _position = 0;\n BottomNavigationBarType _type = BottomNavigationBarType.shifting;\n final iconsMap = {\n //底栏图标\n \"图鉴\": Icons.home, \"动态\": Icons.toys,\n \"喜欢\": Icons.favorite, \"手册\": Icons.class_,\n \"我的\": Icons.account_circle,\n };\n final _colors = [\n Colors.red,\n Colors.yellow,\n Colors.blue,\n Colors.green,\n Colors.purple,\n ];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n crossAxisAlignment: CrossAxisAlignment.end,\n children: <Widget>[\n _buildOp(),\n _buildBottomNavigationBar(),\n ],\n );\n }\n\n bool get isShifting => _type == BottomNavigationBarType.shifting;\n\n BottomNavigationBar _buildBottomNavigationBar() {\n return BottomNavigationBar(\n onTap: (position) => setState(() => _position = position),\n currentIndex: _position,\n elevation: 1,\n type: _type,\n fixedColor: isShifting ? Colors.white : _colors[_position],\n backgroundColor: Colors.white,\n iconSize: 25,\n selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),\n showUnselectedLabels: false,\n showSelectedLabels: true,\n items: iconsMap.keys\n .map((key) => BottomNavigationBarItem(\n title: Text(\n key,\n ),\n icon: Icon(iconsMap[key]),\n backgroundColor: _colors[_position]))\n .toList(),\n );\n }\n\n Widget _buildOp() {\n return Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n Text(\n _type.toString(),\n style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),\n ),\n Switch(\n value: _type == BottomNavigationBarType.shifting,\n onChanged: (b) {\n setState(() => _type = b\n ? BottomNavigationBarType.shifting\n : BottomNavigationBarType.fixed);\n }),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":60,"name":"可结合PageView进行切页","priority":2,"subtitle":" \n在onTap时进行使用控制器进行切页","code":"import 'package:flutter/material.dart';\nclass BottomNavigationBarWithPageView extends StatefulWidget {\n @override\n _BottomNavigationBarWithPageViewState createState() =>\n _BottomNavigationBarWithPageViewState();\n}\n\nclass _BottomNavigationBarWithPageViewState\n extends State<BottomNavigationBarWithPageView> {\n var _position = 0;\n final iconsMap = {\n //底栏图标\n \"图鉴\": Icons.home, \"动态\": Icons.toys,\n \"喜欢\": Icons.favorite, \"手册\": Icons.class_,\n \"我的\": Icons.account_circle,\n };\n final _colors = [\n Colors.red,\n Colors.yellow,\n Colors.blue,\n Colors.green,\n Colors.purple,\n ];\n PageController _controller; //页面控制器，初始0\n\n @override\n void initState() {\n _controller = PageController(\n initialPage: _position,\n );\n super.initState();\n }\n\n @override\n void dispose() {\n _controller.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Container(\n color: Colors.orange.withAlpha(88),\n width: MediaQuery.of(context).size.width,\n height: 150,\n child: PageView(\n controller: _controller,\n children: iconsMap.keys\n .map((e) => Center(\n child: Text(\n e,\n style: TextStyle(color: Colors.white, fontSize: 20),\n ),\n ))\n .toList(),\n ),\n ),\n _buildBottomNavigationBar()\n ],\n ),\n );\n }\n\n BottomNavigationBar _buildBottomNavigationBar() {\n return BottomNavigationBar(\n onTap: (position) {\n _controller.jumpToPage(position);\n setState(() => _position = position);\n },\n currentIndex: _position,\n elevation: 1,\n type: BottomNavigationBarType.shifting,\n fixedColor: Colors.white,\n iconSize: 25,\n selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),\n showUnselectedLabels: false,\n showSelectedLabels: true,\n items: iconsMap.keys\n .map((key) => BottomNavigationBarItem(\n title: Text(\n key,\n ),\n icon: Icon(iconsMap[key]),\n backgroundColor: _colors[_position]))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":59,"name":"TabBarView需要与TabBar联用","priority":1,"subtitle":" \n【controller】 : 控制器 【TabController】\n【children】 : 孩子们 【指示器颜色】\n【physics】 : 表现 【ScrollPhysics】","code":"import 'package:flutter/material.dart';\nclass CustomTabBarView extends StatefulWidget {\n @override\n _CustomTabBarViewState createState() => _CustomTabBarViewState();\n}\n\nclass _CustomTabBarViewState extends State<CustomTabBarView> with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n _buildTabBar(),\n Container(\n color: Colors.purple,\n width: MediaQuery.of(context).size.width,\n height: 200,\n child: _buildTableBarView())\n ],\n ),\n );\n }\n\n Widget _buildTabBar() => TabBar(\n onTap: (tab) => print(tab),\n labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n unselectedLabelStyle: TextStyle(fontSize: 16),\n isScrollable: true,\n controller: _tabController,\n labelColor: Colors.blue,\n indicatorWeight: 3,\n indicatorPadding: EdgeInsets.symmetric(horizontal: 10),\n unselectedLabelColor: Colors.grey,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n );\n\n Widget _buildTableBarView() => TabBarView(\n controller: _tabController,\n children: tabs.map((e) => Center(\n child: Text(e, style: TextStyle(color: Colors.white, fontSize: 20),\n ))).toList());\n}\n"},{"id":null,"widgetId":144,"name":"CupertinoContextMenuAction基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【isDefaultAction】 : 是否默认选中 【bool】\n【trailingIcon】 : 尾部 【bool】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoContextMenuAction extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Container(\n width: 200,\n margin: EdgeInsets.all(5),\n child: CupertinoContextMenuAction(\n trailingIcon: CupertinoIcons.settings,\n isDefaultAction: true,\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Text('张风捷特烈')),\n ),\n Container(\n width: 200,\n margin: EdgeInsets.all(5),\n child: CupertinoContextMenuAction(\n trailingIcon: CupertinoIcons.home,\n isDefaultAction: false,\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Text('百里·巫缨')),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":91,"name":"ScaleTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【scale】 : 动画 【Animation<double>】","code":"import 'package:flutter/material.dart';\nclass CustomScaleTransition extends StatefulWidget {\n @override\n _CustomScaleTransitionState createState() => _CustomScaleTransitionState();\n}\n\nclass _CustomScaleTransitionState extends State<CustomScaleTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n color: Colors.grey.withAlpha(22),\n width: 100,\n height: 100,\n child: ScaleTransition(\n scale: CurvedAnimation(parent: _ctrl, curve: Curves.linear),\n child: Icon(Icons.android, color: Colors.green, size: 60),\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":53,"name":"SelectableText对齐属性","priority":2,"subtitle":" \n【textAlign】 : 对齐方式*6 【textAlign】\n【textDirection】 : 文字方向*2 【TextDirection】","code":"import 'package:flutter/material.dart';\nclass AlignSelectableText extends StatefulWidget {\n @override\n _AlignSelectableTextState createState() => _AlignSelectableTextState();\n}\n\nclass _AlignSelectableTextState extends State<AlignSelectableText> {\n final text =\n \"The [SelectableText] widget displays a string of text with a single style.\"\n \"The string might break across multiple lines or might all be displayed on\"\n \"the same line depending on the layout constraints.\";\n var _textAlign = TextAlign.left;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSelector(),\n SelectableText(\n text,\n style: TextStyle(fontSize: 18, color: Colors.red),\n cursorColor: Colors.green,\n cursorRadius: Radius.circular(3),\n cursorWidth: 5,\n showCursor: true,\n textAlign: _textAlign,\n textDirection: TextDirection.ltr,\n\n autofocus: false,\n ),\n ],\n );\n }\n\n Widget _buildSelector() {\n return Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n Text(\n \"textAlign属性选择:\",\n style: TextStyle(\n fontSize: 16, color: Colors.blue, fontWeight: FontWeight.bold),\n ),\n DropdownButton<TextAlign>(\n underline: Container(),\n value: _textAlign,\n items: TextAlign.values\n .map((e) => DropdownMenuItem<TextAlign>(\n value: e,\n child: Text(e.toString()),\n ))\n .toList(),\n onChanged: (e) {\n setState(() {\n _textAlign = e;\n });\n }),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":53,"name":"SelectableText基本使用","priority":1,"subtitle":" \n【入参】 : 显示文字 【String】\n【style】 : 文字样式 【TextStyle】\n【cursorRadius】 : 光标半径 【Radius】\n【cursorColor】 : 光标颜色 【Color】\n【cursorWidth】 : 光标宽度 【double】\n【showCursor】 : 是否显示光标 【bool】\n【autofocus】 : 自动聚焦 【bool】","code":"import 'package:flutter/material.dart';\nclass CustomSelectableText extends StatelessWidget {\n final text = \" 始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，\"\n \"臣以神遇而不以目视，官知止而神欲行。依乎天理，批大郤，导大窾，因其固然，\"\n \"技经肯綮之未尝，而况大軱乎！良庖岁更刀，割也；族庖月更刀，折也。\"\n \"今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于硎。彼节者有间，而刀刃者无厚；\"\n \"以无厚入有间，恢恢乎其于游刃必有余地矣，是以十九年而刀刃若新发于硎。\"\n \"虽然，每至于族，吾见其难为，怵然为戒，视为止，行为迟。动刀甚微，謋然已解，如土委地。\"\n \"提刀而立，为之四顾，为之踌躇满志，善刀而藏之.\";\n\n @override\n Widget build(BuildContext context) {\n return SelectableText(\n text,\n style: TextStyle(fontSize: 18, color: Colors.orange),\n cursorColor: Colors.green,\n cursorRadius: Radius.circular(3),\n cursorWidth: 5,\n showCursor: true,\n autofocus: false,\n );\n }\n}\n"},{"id":null,"widgetId":137,"name":"CupertinoDatePicker基本使用","priority":1,"subtitle":" \n【initialDateTime】 : 初始日期 【DateTime】\n【minimumYear】 : 最小年份 【int】\n【maximumYear】 : 最大年份 【int】\n【onDateTimeChanged】 : 点击回调 【Function(DateTime)】\n【minuteInterval】 : 分钟间隔 【int】\n【use24hFormat】 : 是否是24小时制 【bool】\n【backgroundColor】 : 背景色 【Color】\n【mode】 : 模式*3 【CupertinoDatePickerMode】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoDatePicker extends StatefulWidget {\n @override\n _CustomCupertinoDatePickerState createState() =>\n _CustomCupertinoDatePickerState();\n}\n\nclass _CustomCupertinoDatePickerState extends State<CustomCupertinoDatePicker> {\n DateTime _date = DateTime.now();\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Text(\n '当前日期:${_date.toIso8601String()}',\n style: TextStyle(color: Colors.grey, fontSize: 16),\n ),\n _buildInfoTitle('CupertinoDatePickerMode.dateAndTime'),\n buildPicker(CupertinoDatePickerMode.dateAndTime),\n _buildInfoTitle('CupertinoDatePickerMode.date'),\n buildPicker(CupertinoDatePickerMode.date),\n _buildInfoTitle('CupertinoDatePickerMode.time'),\n buildPicker(CupertinoDatePickerMode.time),\n ],\n );\n }\n\n Container buildPicker(CupertinoDatePickerMode mode) {\n return Container(\n margin: EdgeInsets.all(10),\n height: 150,\n child: CupertinoDatePicker(\n mode: mode,\n initialDateTime: DateTime.now(),\n// maximumDate: DateTime(2018,8,8),\n// minimumDate: DateTime(2030,8,8),\n minimumYear: 2018,\n maximumYear: 2030,\n use24hFormat: false,\n minuteInterval: 1,\n backgroundColor: CupertinoColors.white,\n onDateTimeChanged: (date) {\n print(date);\n setState(() => _date = date);\n },\n ),\n );\n }\n\n Widget _buildInfoTitle(info){\n return Padding(\n padding: const EdgeInsets.only(left: 20,top: 20,bottom: 5),\n child: Text(\n info,\n style: TextStyle(color: Colors.blue, fontSize: 16,fontWeight: FontWeight.bold),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":150,"name":"InkWell其他属性","priority":2,"subtitle":" \n【child】 : 子组件 【Widget】\n【onHighlightChanged】 : 高亮变化回调 【Function(bool)】\n【highlightColor】 : 高亮色 【Color】\n【splashColor】 : 水波纹色 【Color】\n【radius】 : 水波半径 【double】","code":"import 'package:flutter/material.dart';\nclass ColorInkWell extends StatefulWidget {\n @override\n _ColorInkWellState createState() => _ColorInkWellState();\n}\n\nclass _ColorInkWellState extends State<ColorInkWell> {\n var _info = 'Push';\n\n @override\n Widget build(BuildContext context) {\n return InkWell(\n onTap: () => {},\n splashColor: Colors.blueAccent,\n highlightColor: Colors.orange,\n onHighlightChanged: (v) =>\n setState(() => _info = 'onHighlightChanged:$v'),\n radius: 50,\n child: Container(\n alignment: Alignment.center,\n width: 180,\n height: 50,\n child: Text(_info),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":150,"name":"InkWell基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onTap】 : 点击事件 【Function()】\n【onDoubleTap】 : 双击事件 【Function()】\n【onTapCancel】 : 点击取消 【Function()】\n【onLongPress】 : 长按事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomInkWell extends StatefulWidget {\n @override\n _CustomInkWellState createState() => _CustomInkWellState();\n}\n\nclass _CustomInkWellState extends State<CustomInkWell> {\n var _info = 'Push';\n\n @override\n Widget build(BuildContext context) {\n return InkWell(\n onTap: () => setState(() => _info = 'onTap'),\n onDoubleTap: () => setState(() => _info = 'onDoubleTap'),\n onLongPress: () => setState(() => _info = 'onLongPress'),\n onTapCancel: () => setState(() => _info = 'onTapCancel'),\n child: Container(\n alignment: Alignment.center,\n width: 120,\n height: 50,\n child: Text(_info),\n ),\n );\n }\n}"},{"id":null,"widgetId":114,"name":"DefaultTextStyleTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【textAlign】 : 文字对齐方式 【TextAlign】\n【softWrap】 : 是否包裹 【bool】\n【maxLines】 : 最大行数 【int】\n【overflow】 : 溢出模式 【TextOverflow】\n【style】 : 动画 【Animation<TextStyle>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomDefaultTextStyleTransition extends StatefulWidget {\n @override\n _CustomDefaultTextStyleTransitionState createState() =>\n _CustomDefaultTextStyleTransitionState();\n}\n\nclass _CustomDefaultTextStyleTransitionState\n extends State<CustomDefaultTextStyleTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 100,\n child: DefaultTextStyleTransition(\n textAlign: TextAlign.start,\n softWrap: true,\n maxLines: 1,\n overflow: TextOverflow.ellipsis,\n style: TextStyleTween(\n begin: TextStyle(color: Colors.blue, fontSize: 50, shadows: [\n Shadow(\n offset: Offset(1, 1), color: Colors.black, blurRadius: 3)\n ]),\n end: TextStyle(color: Colors.white, fontSize: 20, shadows: [\n Shadow(\n offset: Offset(1, 1), color: Colors.purple, blurRadius: 3)\n ])).animate(_ctrl),\n child: Text('张风捷特烈'),\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":176,"name":"Dismissible基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【background】 : 左底 【Widget】\n【secondaryBackground】 : 右底 【Widget】\n【key】 : 键 【Key】\n【confirmDismiss】 : 确认回调 【DismissDirectionCallback】\n【onDismissed】 : 消失回调 【DismissDirectionCallback】,","code":"import 'package:flutter/material.dart';\nclass CustomDismissible extends StatefulWidget {\n @override\n _CustomDismissibleState createState() => _CustomDismissibleState();\n}\n\nclass _CustomDismissibleState extends State<CustomDismissible> {\n var data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView(\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data.map((color) => _buildItem(color)).toList(),\n ),\n );\n }\n\n Widget _buildItem(Color color) {\n return Dismissible(\n background: Container(\n color: Colors.green,\n alignment: Alignment(-0.9, 0),\n child: Icon(\n Icons.check,\n color: Colors.white,\n ),\n ),\n secondaryBackground: Container(\n alignment: Alignment(0.9, 0),\n child: Icon(\n Icons.close,\n color: Colors.white,\n ),\n color: Colors.red,\n ),\n key: ValueKey(color),\n onDismissed: (d) {\n data.remove(color);\n },\n confirmDismiss: (e) async {\n if (e == DismissDirection.endToStart) {\n return true;\n } else {\n return false;\n }\n },\n child: Container(\n alignment: Alignment.center,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":115,"name":"RelativePositionedTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【size】 : 左和上的偏移量 【Size】\n【rect】 : 动画 【Animation<Rect>】\n PositionedTransition组件只能在Stack内起作用","code":"import 'package:flutter/material.dart';\nclass CustomRelativePositionedTransition extends StatefulWidget {\n @override\n _CustomRelativePositionedTransitionState createState() =>\n _CustomRelativePositionedTransitionState();\n}\n\nclass _CustomRelativePositionedTransitionState\n extends State<CustomRelativePositionedTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n color: Colors.grey.withAlpha(33),\n width: 200,\n height: 100,\n child: Stack(\n children: <Widget>[\n RelativePositionedTransition(\n size: Size(200, 100),\n rect: RectTween(\n begin: Rect.fromLTRB(0, 0, 50, 50),\n end: Rect.fromLTRB(0, 0, 50, 50).translate(100, 50),\n ).animate(_ctrl),\n child: Icon(\n Icons.android,\n color: Colors.green,\n size: 50,\n ),\n )\n ],\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":176,"name":"Dismissible基本使用","priority":2,"subtitle":" \n【direction】 : 方向 【DismissDirection】\n【crossAxisEndOffset】 : 偏移 【double】,","code":"import 'package:flutter/material.dart';\nclass DirectionDismissible extends StatefulWidget {\n @override\n _CustomDirectionDismissibleState createState() => _CustomDirectionDismissibleState();\n}\n\nclass _CustomDirectionDismissibleState extends State<DirectionDismissible> {\n var data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView(\n scrollDirection: Axis.horizontal,\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data.map((color) => _buildItem(color)).toList(),\n ),\n );\n }\n\n Widget _buildItem(Color color) {\n return Dismissible(\n direction: DismissDirection.vertical,\n background: Container(\n color: Colors.green,\n alignment: Alignment( 0,-0.9,),\n child: Icon(\n Icons.check,\n color: Colors.white,\n ),\n ),\n crossAxisEndOffset: 0.5,\n secondaryBackground: Container(\n alignment: Alignment( 0,0.9,),\n child: Icon(\n Icons.close,\n color: Colors.white,\n ),\n color: Colors.red,\n ),\n key: ValueKey(color),\n onDismissed: (d) {\n data.remove(color);\n },\n confirmDismiss: (e) async {\n print(e);\n if (e == DismissDirection.up) {\n return true;\n } else {\n return false;\n }\n },\n child: Container(\n alignment: Alignment.center,\n width: 80,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":251,"name":"NestedScrollView基本用法","priority":1,"subtitle":" \n【controller】 : 滑动控制器 【ScrollController】\n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向 【bool】\n【physics】 : 滑顶样式 【ScrollPhysics】\n【dragStartBehavior】 : 开始拖动行为 【DragStartBehavior】\n【headerSliverBuilder】 : *头部构造器 【NestedScrollViewHeaderSliversBuilder】\n【body】 : *内容 【Widget】","code":"import 'package:flutter/material.dart';\nclass NestedScrollViewDemo extends StatelessWidget {\n final _tabs = ['风神传', '封妖志', \"幻将录\", \"永恒传说\"];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 200,\n child: Scaffold(\n body: DefaultTabController(\n length: _tabs.length,\n child: NestedScrollView(\n headerSliverBuilder:\n (BuildContext context, bool innerBoxIsScrolled) {\n return <Widget>[\n SliverOverlapAbsorber(\n handle: NestedScrollView.sliverOverlapAbsorberHandleFor(\n context),\n sliver: SliverAppBar(\n title: const Text('旷古奇书'),\n pinned: true,\n elevation: 6, //影深\n expandedHeight: 220.0,\n forceElevated: innerBoxIsScrolled, //为true时展开有阴影\n flexibleSpace: FlexibleSpaceBar(\n background: Image.asset(\n \"assets/images/wy_300x200_filter.jpg\",\n fit: BoxFit.cover,\n ),\n ),\n bottom: TabBar(\n tabs: _tabs\n .map((String name) => Tab(text: name,))\n .toList(),\n ),\n ),\n ),\n ];\n },\n body: _buildTabBarView(),\n ),\n ),\n ));\n }\n\n Widget _buildTabBarView() {\n return TabBarView(\n children: _tabs.map((String name) {\n return SafeArea(\n top: false,\n bottom: false,\n child: Builder(\n builder: (BuildContext context) {\n return CustomScrollView(\n key: PageStorageKey<String>(name),\n slivers: <Widget>[\n SliverOverlapInjector(\n handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),\n ),\n SliverPadding(\n padding: const EdgeInsets.all(8.0),\n sliver: SliverFixedExtentList(\n itemExtent: 48.0,\n delegate: SliverChildBuilderDelegate(\n (BuildContext context, int index) {\n return ListTile(\n title: Text('《$name》 第 $index章'),\n );\n },\n childCount: 50,\n ),\n ),\n ),\n ],\n );\n },\n ),\n );\n }).toList(),\n );\n }\n}\n"},{"id":null,"widgetId":24,"name":"CupertinoButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【pressedOpacity】: 按下时透明度 【double】\n【child】: 子组件 【Widget】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【borderRadius】: 圆角半径 【BorderRadius】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n CupertinoColors.activeBlue:4.0,\n Colors.blue:6.0,\n CupertinoColors.activeOrange:8.0,\n };\n return Wrap(\n spacing: 20,\n children:data.keys.map((e)=> CupertinoButton(\n padding: EdgeInsets.zero,\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n color: e,\n pressedOpacity: 0.4,\n borderRadius: BorderRadius.all(Radius.circular(data[e])),\n child: Text(\"iOS\"),\n )).toList()\n );\n }\n}\n\n"},{"id":null,"widgetId":61,"name":"BottomAppBar基本用法","priority":1,"subtitle":" \n【elevation】 : 影深 【double】\n【shape】 : 形状 【NotchedShape】\n【notchMargin】 : 间隔距离 【double】\n【color】 : 颜色 【Color】\n【child】 : 孩子 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomBottomAppBar extends StatefulWidget {\n @override\n _CustomBottomAppBarState createState() => _CustomBottomAppBarState();\n}\n\nclass _CustomBottomAppBarState extends State<CustomBottomAppBar> {\n var _position = 0;\n var _location = FloatingActionButtonLocation.centerDocked;\n final iconsMap = {\n \"图鉴\": Icons.home,\n \"动态\": Icons.toys,\n \"喜欢\": Icons.favorite,\n \"手册\": Icons.class_,\n };\n var activeColor = Colors.blue.withAlpha(240);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: 180,\n child: Scaffold(\n backgroundColor: Colors.purple.withAlpha(22),\n floatingActionButton: FloatingActionButton(\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Icon(Icons.add),\n ),\n bottomNavigationBar: _buildBottomAppBar(),\n floatingActionButtonLocation: _location,\n body: _buildContent(),\n ),\n );\n }\n\n Widget _buildBottomAppBar() {\n return BottomAppBar(\n elevation: 1,\n shape: CircularNotchedRectangle(),\n notchMargin: 5,\n color: Colors.red,\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceAround,\n children: info.asMap().keys.map((i) => _buildChild(i)).toList()\n ..insertAll(isCenter ? 2 : 4, [SizedBox(width: 30)])),\n );\n }\n\n Container _buildContent() {\n return Container(\n alignment: Alignment.center,\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Text(\n '当前页索引:$_position',\n style: TextStyle(color: Colors.blue, fontSize: 18),\n ),\n Switch(\n value: isCenter,\n onChanged: (v) {\n setState(() {\n _location = v\n ? FloatingActionButtonLocation.centerDocked\n : FloatingActionButtonLocation.endDocked;\n });\n }),\n ],\n ),\n );\n }\n\n List<String> get info => iconsMap.keys.toList();\n\n bool get isCenter => _location == FloatingActionButtonLocation.centerDocked;\n\n Widget _buildChild(int i) {\n var active = i == _position;\n return Padding(\n padding: const EdgeInsets.all(8.0),\n child: GestureDetector(\n onTap: () => setState(() => _position = i),\n child: Wrap(\n direction: Axis.vertical,\n alignment: WrapAlignment.center,\n children: <Widget>[\n Icon(\n iconsMap[info[i]],\n color: active ? activeColor : Colors.white,\n size: 30,\n ),\n Text(info[i],\n style: TextStyle(\n color: active ? activeColor : Colors.white, fontSize: 14)),\n ],\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":153,"name":"RawChip点击效果","priority":1,"subtitle":" \n【label】: 中间组件 【Widget】\n【padding】 : 内边距 【EdgeInsetsGeometry】\n【labelPadding】 : label边距 【EdgeInsetsGeometry】\n【shadowColor】: 阴影色 【Color】\n【avatar】: 左侧组件 【Widget】\n【elevation】: 影深 【double】\n【pressElevation】: 点击时影深 【double】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass PressRawChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: RawChip(\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text('张风捷特烈'),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n elevation: 3,\n pressElevation: 5,\n shadowColor: Colors.orangeAccent,\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":153,"name":"RawChip选中和删除效果","priority":2,"subtitle":" \n【selected】: 是否选中 【bool】\n【deleteIconColor】: 尾部图标色 【Color】\n【selectedColor】: 选中色 【Color】\n【deleteIcon】: 尾部组件 【Widget】\n【onSelected】: 选中事件 【Function(bool)】\n【onDeleted】 : 尾部事件 【Function()】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass SelectRawChip extends StatefulWidget {\n @override\n _SelectRawChipState createState() => _SelectRawChipState();\n}\n\nclass _SelectRawChipState extends State<SelectRawChip> {\n bool _selected = false;\n @override\n Widget build(BuildContext context) {\n return Container(\n child: RawChip(\n selected: _selected,\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n deleteIconColor: Colors.red,\n selectedColor: Colors.orangeAccent.withAlpha(44),\n label: Text('张风捷特烈'),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n elevation: 3,\n pressElevation: 5,\n shadowColor: Colors.orangeAccent,\n onSelected: (v)=> setState(() => _selected=v),\n onDeleted: () => Navigator.of(context).pushNamed('AboutMePage'),\n ),\n );\n }\n}"},{"id":null,"widgetId":46,"name":"CircularProgressIndicator基本使用","priority":1,"subtitle":" \n【value】 : 进度 【double】\n【backgroundColor】 : 背景色 【Color】\n【valueColor】 : 进度颜色 【Animation<Color>】\n【strokeWidth】 : 线宽 【double】","code":"import 'package:flutter/material.dart';\nclass CustomCircularProgressIndicator extends StatefulWidget {\n @override\n _CustomCircularProgressIndicatorState createState() =>\n _CustomCircularProgressIndicatorState();\n}\n\nclass _CustomCircularProgressIndicatorState\n extends State<CustomCircularProgressIndicator> {\n\n var data = <double>[0.2,0.4,0.6,0.8,null];\n\n @override\n Widget build(BuildContext context) {\n\n return Wrap(\n spacing: 10,\n children:data.map((e)=>Container(\n width: 50,\n height: 50,\n child: CircularProgressIndicator(\n value: e,\n backgroundColor: Colors.grey.withAlpha(33),\n valueColor: AlwaysStoppedAnimation(Colors.orange),\n strokeWidth: 5,\n ),\n )).toList(),\n );\n }\n}\n"},{"id":null,"widgetId":100,"name":"AnimatedCrossFade动画曲线","priority":2,"subtitle":" \n【firstCurve】 : 第一曲线 【Curve】\n【secondCurve】 : 第二曲线 【Curve】\n【sizeCurve】 : 尺寸变化曲线 【CrossFadeState】","code":"import 'package:flutter/material.dart';\nclass CurveAnimatedCrossFade extends StatefulWidget {\n @override\n _CurveAnimatedCrossFadeState createState() => _CurveAnimatedCrossFadeState();\n}\n\nclass _CurveAnimatedCrossFadeState extends State<CurveAnimatedCrossFade> {\n var _crossFadeState = CrossFadeState.showFirst;\n\n bool get isFirst=> _crossFadeState == CrossFadeState.showFirst;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: <Widget>[\n Container(\n child: AnimatedCrossFade(\n firstCurve: Curves.easeInCirc,\n secondCurve: Curves.easeInToLinear,\n sizeCurve: Curves.bounceOut,\n firstChild: Container(\n alignment: Alignment.center,\n width: 200,\n height: 80,\n color: Colors.orange ,\n child: FlutterLogo(colors: Colors.blue,size: 50,),\n ),\n secondChild: Container(\n width: 200,\n height: 150,\n alignment: Alignment.center,\n color: Colors.blue,\n child: FlutterLogo(\n textColor: Colors.white,\n colors: Colors.orange,size: 100,style: FlutterLogoStyle.stacked,),\n ),\n duration: Duration(milliseconds: 1000),\n crossFadeState: _crossFadeState,\n ),\n ),\n _buildSwitch(),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(value: isFirst, onChanged: (v){\n setState(() {\n _crossFadeState= v?CrossFadeState.showFirst:CrossFadeState.showSecond;\n });\n });\n}\n"},{"id":null,"widgetId":47,"name":"LinearProgressIndicator基本使用","priority":1,"subtitle":" \n【value】 : 进度 【double】\n【backgroundColor】 : 背景色 【Color】\n【valueColor】 : 进度颜色 【Animation<Color>】\n value为null时会不停循环","code":"import 'package:flutter/material.dart';\nclass CustomLinearProgressIndicator extends StatefulWidget {\n @override\n _CustomLinearProgressIndicatorState createState() =>\n _CustomLinearProgressIndicatorState();\n}\n\nclass _CustomLinearProgressIndicatorState\n extends State<CustomLinearProgressIndicator> {\n var data = <double>[0.2, 0.4, 0.6, 0.8, null];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: data\n .map((e) => Container(\n width: 50,\n height: 3,\n child:LinearProgressIndicator(\n value: e,\n backgroundColor: Colors.grey.withAlpha(33),\n valueColor: AlwaysStoppedAnimation(Colors.orange),\n ),\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":100,"name":"AnimatedCrossFade基本使用","priority":1,"subtitle":" \n【firstChild】 : 第一孩子 【Widget】\n【secondChild】 : 第二孩子 【Widget】\n【crossFadeState】 : 显示第几个 【CrossFadeState】\n【duration】 : 时长 【Duration】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedCrossFade extends StatefulWidget {\n @override\n _CustomAnimatedCrossFadeState createState() =>\n _CustomAnimatedCrossFadeState();\n}\n\nclass _CustomAnimatedCrossFadeState extends State<CustomAnimatedCrossFade> {\n var _crossFadeState = CrossFadeState.showFirst;\n\n bool get isFirst => _crossFadeState == CrossFadeState.showFirst;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: <Widget>[\n Container(\n child: AnimatedCrossFade(\n firstChild: Container(\n alignment: Alignment.center,\n width: 200,\n height: 150,\n color: Colors.orange,\n child: FlutterLogo(colors: Colors.blue, size: 100,),\n ),\n secondChild: Container(\n width: 200,\n height: 150,\n alignment: Alignment.center,\n color: Colors.blue,\n child: FlutterLogo(\n textColor: Colors.white,\n colors: Colors.orange,\n size: 100,\n style: FlutterLogoStyle.stacked,),\n ),\n duration: Duration(milliseconds: 600),\n\n crossFadeState: _crossFadeState,\n ),\n ),\n _buildSwitch(),\n ],\n\n );\n }\n\n Widget _buildSwitch() =>\n Switch(value: isFirst, onChanged: (v) {\n setState(() {\n _crossFadeState =\n v ? CrossFadeState.showFirst : CrossFadeState.showSecond;\n });\n });\n}"},{"id":null,"widgetId":65,"name":"MaterialApp基本用法","priority":1,"subtitle":" \n【theme】 : 主题 【ThemeData】\n【title】 : 任务栏标题 【String】\n【onGenerateRoute】 : 路由生成器 【RouteFactory】\n【home】 : 主页 【Widget】","code":"import 'package:flutter/material.dart';\nimport '../../../../app/router.dart';\nimport '../../StatefulWidget/Scaffold/node1_base.dart';\nclass CustomMaterialApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 200,\n child: MaterialApp(\n title: 'Flutter Demo',\n onGenerateRoute: Router.generateRoute,\n theme: ThemeData(\n primarySwatch: Colors.blue,\n ),\n home: CustomScaffold(),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":245,"name":"CupertinoTextField常用样式属性","priority":2,"subtitle":"【style】 : 输入文字样式 【TextStyle】\n【prefix】: 前缀组件 【Widget】\n【prefixMode】: 前缀模式 【OverlayVisibilityMode】\n【suffix】: 后缀组件 【Widget】\n【suffixMode】: 后缀模式 【OverlayVisibilityMode】\n【cursorColor】: 游标颜色 【Color】\n【cursorWidth】: 游标宽度 【double】\n【cursorRadius】: 游标圆角 【Radius】\n【readOnly】: 是否只读 【bool】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CupertinoTextFieldStyle extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child:\n CupertinoTextField(\n style: TextStyle(color: Colors.blue),\n prefix: Icon(CupertinoIcons.add),\n prefixMode: OverlayVisibilityMode.notEditing,\n suffix: Icon(CupertinoIcons.clear),\n suffixMode: OverlayVisibilityMode.editing,\n cursorColor: Colors.purple,\n cursorWidth: 4,\n cursorRadius: Radius.circular(2),\n readOnly: false,\n placeholder: '输入用户名',\n )\n );\n }\n}\n"},{"id":null,"widgetId":245,"name":"CupertinoTextField基础使用","priority":1,"subtitle":"【placeholder】 : 提示文字 【String】\n【showCursor】 : 是否显示游标 【bool】\n【minLines】 : 最小行数 【int】\n【maxLines】 : 最大行数 【int】\n【padding】 : 内边距 【EdgeInsetsGeometry】\n【onChanged】 : 变化监听 【ValueChanged<String>】\n【onTap】: 点击监听 【GestureTapCallback】\n【onSubmitted】: 提交监听 【ValueChanged<String>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CupertinoTextFieldDemo extends StatefulWidget {\n @override\n _CupertinoTextFieldDemoState createState() => _CupertinoTextFieldDemoState();\n}\n\nclass _CupertinoTextFieldDemoState extends State<CupertinoTextFieldDemo> {\n var _value = '';\n var _color =Colors.black;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Text('输入了:$_value',style: TextStyle(color: _color),),\n CupertinoTextField(\n placeholder: 'Input Name',\n showCursor: true,\n minLines: 1,\n maxLines: 4,\n padding: EdgeInsets.all(8),\n onChanged: _onChanged,\n onTap: _onTap,\n onSubmitted: _onSubmitted,\n ),\n ],\n ),\n );\n }\n\n void _onChanged(String value) {\n setState(() {\n _value = value;\n });\n }\n\n void _onTap() {\n print('----_onTap----');\n setState(() {\n _color=Colors.blue;\n });\n }\n\n void _onSubmitted(String value) {\n print('----_onSubmitted:$value}----');\n setState(() {\n _color=Colors.black;\n });\n }\n\n}\n"},{"id":null,"widgetId":124,"name":"AnimatedDefaultTextStyle基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【curve】 : 动画曲线 【Duration】\n【textAlign】 : 文字对齐方式 【TextAlign】\n【softWrap】 : 是否包裹 【bool】\n【maxLines】 : 最大行数 【int】\n【overflow】 : 溢出模式 【TextOverflow】\n【style】 : 文字样式 【TextStyle】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedDefaultTextStyle extends StatefulWidget {\n @override\n _CustomAnimatedDefaultTextStyleState createState() =>\n _CustomAnimatedDefaultTextStyleState();\n}\n\nclass _CustomAnimatedDefaultTextStyleState\n extends State<CustomAnimatedDefaultTextStyle> {\n final TextStyle start = TextStyle(color: Colors.blue, fontSize: 50, shadows: [\n Shadow(offset: Offset(1, 1), color: Colors.black, blurRadius: 3)\n ]);\n final TextStyle end = TextStyle(color: Colors.white, fontSize: 20, shadows: [\n Shadow(offset: Offset(1, 1), color: Colors.purple, blurRadius: 3)\n ]);\n\n TextStyle _style;\n\n @override\n void initState() {\n _style = start;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n Container(\n alignment: Alignment.center,\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: AnimatedDefaultTextStyle(\n textAlign: TextAlign.start,\n softWrap: true,\n maxLines: 1,\n overflow: TextOverflow.ellipsis,\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n style: _style,\n onEnd: () => print('End'),\n child: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(\n value: _style == end,\n onChanged: (v) {\n setState(() {\n _style = v ? end : start;\n });\n });\n}\n"},{"id":null,"widgetId":231,"name":"InputDecorator基本使用","priority":1,"subtitle":"【decoration】 : 装饰对象 【InputDecoration】\n【textAlign】 : 文字对齐方式 【TextAlign】\n【child】 : 子组件 【Widget】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass InputDecoratorDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Padding(\n padding: const EdgeInsets.all(8.0),\n child: InputDecorator(\n decoration: InputDecoration(),\n child: EditableText(\n controller: TextEditingController(text:'hello'),\n focusNode: FocusNode(),\n style: TextStyle(fontSize: 12,color: Colors.black),\n cursorColor: Colors.blue,\n backgroundCursorColor: Colors.orange,\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":39,"name":"Checkbox的三态","priority":2,"subtitle":" \n【tristate】 : 是否是三态 【double】\n onChanged时,","code":"import 'package:flutter/material.dart';\nclass TristateCheckBok extends StatefulWidget {\n @override\n _TristateCheckBokState createState() => _TristateCheckBokState();\n}\n\nclass _TristateCheckBokState extends State<TristateCheckBok> {\n bool _checked = false;\n final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: colors\n .map((e) =>\n Checkbox(\n value: _checked,\n tristate: true,\n checkColor: Colors.white,\n activeColor: e,\n onChanged: (v) {\n print(v);\n setState(() => _checked = v);\n }))\n .toList(),\n );\n }\n}\n\n"},{"id":null,"widgetId":39,"name":"Checkbox基础用法","priority":1,"subtitle":" \n【value】 : 是否选中 【double】\n【checkColor】: 选中时✔️gou颜色 【Color】\n【activeColor】: 选中时框内颜色 【Color】\n【onChanged】: 状态改变事件 【Function(bool)】,","code":"import 'package:flutter/material.dart';\nclass CustomCheckbox extends StatefulWidget {\n @override\n _CustomCheckboxState createState() => _CustomCheckboxState();\n}\n\nclass _CustomCheckboxState extends State<CustomCheckbox> {\n bool _checked = false;\n final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: colors\n .map((e) =>\n Checkbox(\n value: _checked,\n checkColor: Colors.white,\n activeColor: e,\n onChanged: (v) =>\n setState(() => _checked = v)))\n .toList(),\n );\n }\n}\n\n\n"},{"id":null,"widgetId":62,"name":"CupertinoNavigationBar基本用法","priority":1,"subtitle":" \n【leading】 : 左侧组件 【Widget】\n【middle】 : 中间组件 【Widget】\n【trailing】 : 尾部组件 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【padding】 : 内边距 【EdgeInsetsDirectional】\n【border】 : 边线 【Border】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoNavigationBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CupertinoNavigationBar(\n leading: Icon(\n CupertinoIcons.back,\n size: 25,\n color: Colors.blue,\n ),\n middle: Text(\"风雪雅舍\"),\n trailing: Image.asset(\n \"assets/images/icon_head.png\",\n width: 25.0,\n height: 25.0,\n ),\n backgroundColor: Color(0xfff1f1f1),\n padding: EdgeInsetsDirectional.only(start: 10,end: 20),\n border: Border.all(color: Colors.transparent),\n );\n }\n}\n"},{"id":null,"widgetId":41,"name":"CupertinoSwitch基本使用","priority":1,"subtitle":" \n【value】 : 是否选中 【double】\n【activeColor】 : 激活态颜色 【Color】\n【onChanged】 : 切换回调 【Function(double)】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoSwitch extends StatefulWidget {\n @override\n _CustomCupertinoSwitchState createState() => _CustomCupertinoSwitchState();\n}\n\nclass _CustomCupertinoSwitchState extends State<CustomCupertinoSwitch> {\n final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n\n bool _checked = false;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: colors\n .map((e) => CupertinoSwitch(\n value: _checked,\n activeColor: e,\n onChanged: (v) {\n setState(() => _checked = v);\n }))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":54,"name":"TextField基本用法","priority":1,"subtitle":" \n【controller】 : 控制器 【TextEditingController】\n【style】 : 文字样式 【TextStyle】\n【decoration】 : 装饰线 【InputDecoration】\n【onEditingComplete】 : 输入完成事件 【Function()】\n【onSubmitted】 : 提交事件 【Function(String)】\n【onChanged】 : 输入事件 【Function(String)】","code":"import 'package:flutter/material.dart';\nimport 'package:flutter/services.dart';\nclass CustomTextField extends StatefulWidget {\n @override\n _CustomTextFieldState createState() => _CustomTextFieldState();\n}\n\nclass _CustomTextFieldState extends State<CustomTextField> {\n final FocusNode _focusNode = FocusNode();\n TextEditingController _controller;\n\n void initState() {\n super.initState();\n _controller = TextEditingController();\n }\n\n @override\n void dispose() {\n _controller.dispose();\n _focusNode.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n child: TextField(\n controller: _controller,\n style: TextStyle(color: Colors.blue),\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n labelText: 'username',\n ),\n onEditingComplete: () {\n print('onEditingComplete');\n },\n onChanged: (v) {\n print('onChanged:' + v);\n },\n onSubmitted: (v) {\n FocusScope.of(context).requestFocus(_focusNode);\n print('onSubmitted:' + v);\n _controller.clear();\n },\n ));\n }\n}\n\n"},{"id":null,"widgetId":54,"name":"TextField行数和cursor","priority":2,"subtitle":" \n【minLines】 : 最小行数 【int】\n【maxLines】 : 最大行数 【int】\n【cursorRadius】 : 光标半径 【Radius】\n【cursorColor】 : 光标颜色 【Color】\n【cursorWidth】 : 光标宽度 【double】\n【showCursor】 : 是否显示光标 【bool】\n【autofocus】 : 自动聚焦 【bool】","code":"import 'package:flutter/material.dart';\nimport 'package:flutter/services.dart';\nclass CursorTextField extends StatefulWidget {\n @override\n _CursorTextFieldState createState() => _CursorTextFieldState();\n}\n\nclass _CursorTextFieldState extends State<CursorTextField> {\n final FocusNode _focusNode = FocusNode();\n\n @override\n void dispose() {\n _focusNode.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n crossAxisAlignment: CrossAxisAlignment.end,\n children: <Widget>[\n _buildSubmitBtn(),\n _buildTextField(context),\n ],\n );\n }\n\n Container _buildTextField(BuildContext context) {\n return Container(\n width: 300,\n child: TextField(\n style: TextStyle(color: Colors.blue),\n minLines: 3,\n maxLines: 5,\n cursorColor: Colors.green,\n cursorRadius: Radius.circular(3),\n cursorWidth: 5,\n showCursor: true,\n decoration: InputDecoration(\n contentPadding: EdgeInsets.all(10),\n hintText: \"请输入...\",\n border: OutlineInputBorder(),\n ),\n onChanged: (v) {},\n ),\n );\n }\n\n _buildSubmitBtn() => FlatButton(\n color: Colors.blue,\n child: Text(\n \"提交\",\n style: TextStyle(color: Colors.white, fontSize: 16),\n ),\n onPressed: () => FocusScope.of(context).requestFocus(_focusNode));\n}\n"},{"id":null,"widgetId":54,"name":"decoration的复杂装饰","priority":3,"subtitle":" \nInputDecoration有非常多的装饰点,对应点缀见代码:\nborder: 边线相关\nhelper: 左下角相关提示\ncounter: 右下角相关提示\nprefix: 输入框内部最左侧\nsuffix: 输入框内部最右侧\nlabel: 无焦点时文字\nlabel: 无焦点时文字\nhint: 提示文字相关\nborder: 边线相关","code":"import 'package:flutter/material.dart';\nclass ComplexTextField extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n focusedBorder: OutlineInputBorder(\n borderSide: BorderSide(color: Colors.blue),\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(10), bottomLeft: Radius.circular(10))),\n enabledBorder: OutlineInputBorder(\n borderSide: BorderSide(color: Colors.deepPurpleAccent),\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(10), bottomLeft: Radius.circular(10))),\n labelText: 'username',\n labelStyle: TextStyle(color: Colors.purple),\n helperText: \"help me\",\n helperStyle: TextStyle(color: Colors.blue),\n\n suffixText: \"suffix\",\n suffixIcon: Icon(Icons.done),\n suffixStyle: TextStyle(color: Colors.green),\n\n counterText: \"counter\",\n counterStyle: TextStyle(color: Colors.orange),\n\n prefixText: \"ID \",\n prefixStyle: TextStyle(color: Colors.blue),\n prefixIcon: Icon(Icons.language),\n\n fillColor: Color(0x110099ee),\n filled: true,\n\n // errorText: \"error\",\n // errorMaxLines: 1,\n // errorStyle: TextStyle(color: Colors.red),\n // errorBorder: UnderlineInputBorder(),\n\n hintText: \"请输入用户名\",\n hintMaxLines: 1,\n hintStyle: TextStyle(color: Colors.black38),\n icon: Icon(Icons.assignment_ind),\n ));\n }\n}\n"},{"id":null,"widgetId":262,"name":"CupertinoSegmentedControl的颜色","priority":2,"subtitle":" \n【unselectedColor】 : 未选中色 【Color】\n【selectedColor】 : 选中色 【Color<T>】\n【pressedColor】 : 按下色 【Color】\n【borderColor】 : 边线色 【Color】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CupertinoSegmentedControlColor extends StatefulWidget {\n @override\n _CupertinoSegmentedControlColorState createState() =>\n _CupertinoSegmentedControlColorState();\n}\n\nclass _CupertinoSegmentedControlColorState\n extends State<CupertinoSegmentedControlColor> {\n var _value = 1;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: CupertinoSegmentedControl<int>(\n unselectedColor: Colors.yellow,\n selectedColor: Colors.green,\n pressedColor: Colors.blue,\n borderColor: Colors.red,\n groupValue: _value,\n onValueChanged: _onValueChanged,\n padding: EdgeInsets.only(top: 20),\n children: {\n 1: Padding(\n padding: EdgeInsets.only(left: 20, right: 20),\n child: Text(\"混沌战士\"),\n ),\n 2: Text(\"青眼白龙\"),\n 3: Text(\"黑魔术士\"),\n },\n ),\n );\n }\n\n void _onValueChanged(int value) {\n setState(() {\n _value=value;\n });\n }\n}\n"},{"id":null,"widgetId":262,"name":"基本使用","priority":1,"subtitle":" \n【children】 : 组件Map 【Map<T, Widget>】\n【onValueChanged】 : 最小值 【ValueChanged<T>】\n【groupValue】 : 选中值 【T】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CupertinoSegmentedControlDemo extends StatefulWidget {\n @override\n _CupertinoSegmentedControlDemoState createState() =>\n _CupertinoSegmentedControlDemoState();\n}\n\nclass _CupertinoSegmentedControlDemoState\n extends State<CupertinoSegmentedControlDemo> {\n var _value = 1;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: CupertinoSegmentedControl<int>(\n groupValue: _value,\n onValueChanged: _onValueChanged,\n padding: EdgeInsets.only(top: 20),\n children: {\n 1: Padding(\n padding: EdgeInsets.only(left: 20, right: 20),\n child: Text(\"混沌战士\"),\n ),\n 2: Text(\"青眼白龙\"),\n 3: Text(\"黑魔术士\"),\n },\n ),\n );\n }\n\n void _onValueChanged(int value) {\n setState(() {\n _value=value;\n });\n }\n}\n"},{"id":null,"widgetId":42,"name":"Slider基本使用","priority":1,"subtitle":" \n【value】 : 数值 【double】\n【min】 : 最小值 【double】\n【max】 : 最大值 【double】\n【activeColor】 : 激活颜色 【Color】\n【inactiveColor】 : 非激活颜色 【Color】\n【onChanged】 : 改变时回调 【Function(double)】","code":"import 'package:flutter/material.dart';\nclass CustomSlider extends StatefulWidget {\n @override\n _CustomSliderState createState() => _CustomSliderState();\n}\n\nclass _CustomSliderState extends State<CustomSlider> {\n double _value = 0.0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Text('当前值:${_value.toStringAsFixed(1)}'),\n Slider(\n value: _value,\n min: 0.0,\n max: 360.0,\n activeColor: Colors.orangeAccent,\n inactiveColor: Colors.green.withAlpha(99),\n onChanged: (value) {\n setState(() {\n _value = value;\n });\n }),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":42,"name":"Slider的分段与标签","priority":2,"subtitle":" \n【divisions】 : 分段数 【int】\n【label】 : 提示气泡文字 【String】\n【onChangeStart】 : 开始滑动时监听 【Function(double)】\n【onChangeEnd】 : 滑动结束时监听 【Function(double)】","code":"import 'package:flutter/material.dart';\nclass DivisionsSlider extends StatefulWidget {\n @override\n _DivisionsSliderState createState() => _DivisionsSliderState();\n}\n\nclass _DivisionsSliderState extends State<DivisionsSlider> {\n double _value = 0.0;\n\n @override\n Widget build(BuildContext context) {\n return Slider(\n value: _value,\n min: 0.0,\n max: 360.0,\n divisions: 10,\n label: '${_value.toStringAsFixed(1)}',\n activeColor: Colors.orangeAccent,\n inactiveColor: Colors.green.withAlpha(99),\n onChangeStart: (value) {\n print('开始滑动:$value');\n },\n onChangeEnd: (value) {\n print('滑动结束:$value');\n },\n onChanged: (value) {\n setState(() {\n _value = value;\n });\n });\n }\n}\n"},{"id":null,"widgetId":157,"name":"CupertinoPageScaffold基本用法","priority":1,"subtitle":" \n【child】 : 内容 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【navigationBar】 : 头部 【ObstructingPreferredSizeWidget】","code":"import 'package:flutter/cupertino.dart';\nclass CustomCupertinoPageScaffold extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 300,\n child: CupertinoPageScaffold(\n navigationBar: CupertinoNavigationBar(\n leading: Icon(CupertinoIcons.reply),\n trailing: Icon(CupertinoIcons.share),\n middle: Text('Flutter Unit'),\n ),\n backgroundColor: CupertinoColors.systemBackground,\n child: Center(\n child: Text('Hello, World!'),\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":200,"name":"Stepper基本使用","priority":1,"subtitle":" \n【steps】 : 步骤列表 【List<Step>】\n【currentStep】 : 当前步骤 【double】\n【onStepTapped】 : 点击回调 【ValueChanged<int>】\n【onStepCancel】 : 上一步回调 【VoidCallback】\n【controlsBuilder】 : 控制器构造 【ControlsWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass StepperDemo extends StatefulWidget {\n @override\n _StepperDemoState createState() => _StepperDemoState();\n}\n\nclass _StepperDemoState extends State<StepperDemo> {\n int _position = 0;\n\n final stepsData = {\n \"填写表单\":'请按表单填写个人信息。',\n \"邮箱校验\":'已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。',\n \"注册完成\":'恭喜您，注册完成！',\n };\n\n final steps = [\n Step(\n title: Text(\"填写表单\"),\n content: Container(height: 60, child: Text(\"请按表单填写个人信息\")),\n ),\n Step(title: Text(\"邮箱校验\"), content: Text(\"请对您的账号进行邮箱校验\")),\n Step(title: Text(\"注册完成\"), content: Text(\"恭喜您，注册完成\")),\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Stepper(\n type:StepperType.horizontal,\n currentStep: _position,\n onStepTapped: (index) {\n setState(() {\n _position = index;\n });\n },\n onStepContinue: () {\n setState(() {\n if (_position < 2) {\n _position++;\n }\n });\n },\n onStepCancel: () {\n if (_position > 0) {\n setState(() {\n _position--;\n });\n }\n },\n controlsBuilder: (_,\n {VoidCallback onStepContinue, VoidCallback onStepCancel}) {\n return Row(\n children: <Widget>[\n RaisedButton(\n color: Colors.blue,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: onStepContinue,\n child: Icon(\n Icons.check,\n color: Colors.white,\n ),\n ),\n RaisedButton(\n color: Colors.red,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: onStepCancel,\n child: Icon(\n Icons.keyboard_backspace,\n color: Colors.white,\n ),\n ),\n ],\n );\n },\n steps: stepsData.keys.map((e){\n bool isActive = stepsData.keys.toList().indexOf(e) ==_position;\n return Step(\n title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),),\n isActive: isActive,\n state: _getState(stepsData.keys.toList().indexOf(e)),\n content: Container(height: 60, child: Text(stepsData[e])),\n );\n }).toList()),\n );\n }\n _getState(index){\n if(_position==index) return StepState.editing;\n if(_position>index) return StepState.complete;\n return StepState.indexed;\n }\n}\n"},{"id":null,"widgetId":200,"name":"Stepper的方向","priority":2,"subtitle":" \n【type】 : 方向 【StepperType】","code":"import 'package:flutter/material.dart';\nclass VerticalStepper extends StatefulWidget {\n @override\n _VerticalStepperState createState() => _VerticalStepperState();\n}\n\nclass _VerticalStepperState extends State<VerticalStepper> {\n int _position = 0;\n\n final stepsData = {\n \"填写表单\": '请按表单填写个人信息。',\n \"邮箱校验\": '已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。',\n \"注册完成\": '恭喜您，注册完成！',\n };\n\n final steps = [\n Step(\n title: Text(\"填写表单\"),\n content: Container(height: 60, child: Text(\"请按表单填写个人信息\")),\n ),\n Step(title: Text(\"邮箱校验\"), content: Text(\"请对您的账号进行邮箱校验\")),\n Step(title: Text(\"注册完成\"), content: Text(\"恭喜您，注册完成\")),\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Stepper(\n type: StepperType.vertical,\n currentStep: _position,\n onStepTapped: (index) {\n setState(() {\n _position = index;\n });\n },\n onStepContinue: () {\n setState(() {\n if (_position < 2) {\n _position++;\n }\n });\n },\n onStepCancel: () {\n if (_position > 0) {\n setState(() {\n _position--;\n });\n }\n },\n controlsBuilder: (_,\n {VoidCallback onStepContinue, VoidCallback onStepCancel}) {\n return Row(\n children: <Widget>[\n RaisedButton(\n color: Colors.blue,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: onStepContinue,\n child: Icon(\n Icons.check,\n color: Colors.white,\n ),\n ),\n RaisedButton(\n color: Colors.red,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: onStepCancel,\n child: Icon(\n Icons.keyboard_backspace,\n color: Colors.white,\n ),\n ),\n ],\n );\n },\n steps: stepsData.keys.map((e) {\n bool isActive = stepsData.keys.toList().indexOf(e) == _position;\n return Step(\n title: Text(\n e,\n style: TextStyle(color: isActive ? Colors.blue : Colors.black),\n ),\n isActive: isActive,\n state: _getState(stepsData.keys.toList().indexOf(e)),\n content: Container(height: 60, child: Text(stepsData[e])),\n );\n }).toList()),\n );\n }\n\n _getState(index) {\n if (_position == index) return StepState.editing;\n if (_position > index) return StepState.complete;\n return StepState.indexed;\n }\n}\n"},{"id":null,"widgetId":120,"name":"AnimatedAlign基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【alignment】 : 对齐方式 【AlignmentGeometry】\n【curve】 : 动画曲线 【Duration】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedAlign extends StatefulWidget {\n @override\n _CustomAnimatedAlignState createState() => _CustomAnimatedAlignState();\n}\n\nclass _CustomAnimatedAlignState extends State<CustomAnimatedAlign> {\n final Alignment start = Alignment(0, 0);\n final Alignment end = Alignment.bottomRight;\n\n Alignment _alignment;\n\n @override\n void initState() {\n _alignment = start;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: AnimatedAlign(\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n alignment: _alignment,\n onEnd: () => print('End'),\n child: Container(\n height: 40,\n width: 80,\n alignment: Alignment.center,\n color: Colors.blue,\n child: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n ),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(\n value: _alignment == end,\n onChanged: (v) {\n setState(() {\n _alignment = v ? end : start;\n });\n });\n}\n"},{"id":null,"widgetId":48,"name":"CupertinoActivityIndicator基本使用","priority":1,"subtitle":" \n【animating】 : 是否loading动画 【bool】\n【radius】 : 半径 【double】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoActivityIndicator extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n\n return Wrap(\n spacing: 20,\n children: <Widget>[\n CupertinoActivityIndicator(\n animating: true,\n radius: 25,\n ),\n CupertinoActivityIndicator(\n animating: false,\n radius: 25,\n )\n ],\n );\n }\n}\n"},{"id":null,"widgetId":123,"name":"AnimatedContainer基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【curve】 : 动画曲线 【Duration】\n【color】 : 颜色 【Color】\n【width】 : 宽 【double】\n【height】 : 高 【double】\n【alignment】 : 对齐 【AlignmentGeometry】\n【decoration】 : 装饰 【Decoration】\n【constraints】 : 约束 【BoxConstraints】\n【transform】 : 变化 【Matrix4】\n【margin】 : 外边距 【EdgeInsetsGeometry】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedContainer extends StatefulWidget {\n @override\n _CustomAnimatedContainerState createState() =>\n _CustomAnimatedContainerState();\n}\n\nclass _CustomAnimatedContainerState extends State<CustomAnimatedContainer> {\n final Decoration startDecoration = BoxDecoration(\n color: Colors.blue,\n image: DecorationImage(\n image: AssetImage('assets/images/wy_200x300.jpg'), fit: BoxFit.cover),\n borderRadius: BorderRadius.all(Radius.circular(20)));\n final Decoration endDecoration = BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/wy_200x300.jpg'), fit: BoxFit.cover),\n color: Colors.orange,\n borderRadius: BorderRadius.all(Radius.circular(50)));\n\n final Alignment startAlignment = Alignment(0, 0);\n final Alignment endAlignment = Alignment.topLeft + Alignment(0.2, 0.2);\n\n final startHeight = 100.0;\n final endHeight = 50.0;\n\n Decoration _decoration;\n double _height;\n Alignment _alignment;\n\n @override\n void initState() {\n _decoration = startDecoration;\n _height = startHeight;\n _alignment=startAlignment;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n AnimatedContainer(\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n alignment: _alignment,\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 120,\n child: UnconstrainedBox(\n child: AnimatedContainer(\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n decoration: _decoration,\n onEnd: () => print('End'),\n height: _height,\n width: _height,\n ),\n ),\n ),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(\n value: _height == endHeight,\n onChanged: (v) {\n setState(() {\n _height = v ? endHeight : startHeight;\n _decoration = v ? endDecoration : startDecoration;\n _alignment = v ? endAlignment : startAlignment;\n });\n });\n}\n"},{"id":null,"widgetId":178,"name":"ExpansionPanelList基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【animationDuration】 : 动画时长 【Duration】\n【expansionCallback】 : 展开回调 【List<Widget>】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomExpansionPanelList extends StatefulWidget {\n @override\n _CustomExpansionPanelListState createState() =>\n _CustomExpansionPanelListState();\n}\n\nclass _CustomExpansionPanelListState extends State<CustomExpansionPanelList> {\n var data = <Color>[\n Colors.red[50],\n Colors.red[100],\n Colors.red[200],\n Colors.red[300],\n Colors.red[400],\n Colors.red[500],\n Colors.red[600],\n Colors.red[700],\n Colors.red[800],\n Colors.red[900],\n ];\n int _position = 0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n child: ExpansionPanelList(\n children: data.map((color) => _buildItem(color)).toList(),\n animationDuration: Duration(milliseconds: 200),\n expansionCallback: (index, open) {\n setState(() => _position=open?-1:index);\n },\n ),\n );\n }\n\n ExpansionPanel _buildItem(Color color) {\n return ExpansionPanel(\n isExpanded: data.indexOf(color) == _position,\n canTapOnHeader: true,\n headerBuilder: (ctx, index) => Center(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Container(\n height: 30,\n width: 30,\n decoration:\n BoxDecoration(color: color, shape: BoxShape.circle),\n ),\n Container(\n width: 120,\n alignment: Alignment.center,\n height: 50,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.black),\n ),\n ),\n ],\n ),\n ),\n body: Container(\n alignment: Alignment.center,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n ));\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":44,"name":"RangeSlider基本使用","priority":1,"subtitle":" \n【values】 : 数值 【RangeValues】\n【min】 : 最小值 【double】\n【max】 : 最大值 【double】\n【divisions】 : 分段数 【int】\n【label】 : 提示气泡文字 【String】\n【activeColor】 : 激活颜色 【Color】\n【inactiveColor】 : 非激活颜色 【Color】\n【onChangeStart】 : 开始滑动时监听 【Function(RangeValues)】\n【onChangeEnd】 : 滑动结束时监听 【Function(RangeValues)】\n【onChanged】 : 改变时回调 【Function(RangeValues)】","code":"import 'package:flutter/material.dart';\nclass CustomRangeSlider extends StatefulWidget {\n @override\n _CustomRangeSliderState createState() => _CustomRangeSliderState();\n}\n\nclass _CustomRangeSliderState extends State<CustomRangeSlider> {\n RangeValues _rangeValues = RangeValues(90, 270);\n\n @override\n Widget build(BuildContext context) {\n return RangeSlider(\n values: _rangeValues,\n divisions: 180,\n min: 0.0,\n max: 360.0,\n labels: RangeLabels(\"${_rangeValues.start.toStringAsFixed(1)}\",\n \"${_rangeValues.end.toStringAsFixed(1)}\"),\n activeColor: Colors.orangeAccent,\n inactiveColor: Colors.green.withAlpha(99),\n onChangeStart: (value) {\n print('开始滑动:$value');\n },\n onChangeEnd: (value) {\n print('滑动结束:$value');\n },\n onChanged: (value) {\n setState(() {\n _rangeValues = value;\n });\n });\n }\n}\n"},{"id":null,"widgetId":136,"name":"YearPicker基本使用","priority":1,"subtitle":" \n【selectedDate】 : 选中日期 【DateTime】\n【firstDate】 : 最前日期限制 【DateTime】\n【lastDate】 : 最后日期限制 【DateTime】\n【onChanged】 : 点击回调 【Function(DateTime)】","code":"import 'package:flutter/material.dart';\nclass CustomYearPicker extends StatefulWidget {\n @override\n _CustomYearPickerState createState() => _CustomYearPickerState();\n}\n\nclass _CustomYearPickerState extends State<CustomYearPicker> {\n DateTime _date = DateTime.now();\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height:150,\n child: YearPicker(\n selectedDate: _date,\n onChanged: (date) => setState(() => _date = date),\n firstDate: DateTime(2018),\n lastDate: DateTime(2030),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":92,"name":"SizeTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【axis】 : 轴向*2 【Axis】\n【sizeFactor】 : 动画 【Animation<double>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomSizeTransition extends StatefulWidget {\n @override\n _CustomSizeTransitionState createState() => _CustomSizeTransitionState();\n}\n\nclass _CustomSizeTransitionState extends State<CustomSizeTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Wrap(\n runSpacing: 20,\n children: <Widget>[\n SizeTransition(\n axis: Axis.horizontal,\n sizeFactor: CurvedAnimation(parent: _ctrl, curve: Curves.linear),\n child: Container(\n width: MediaQuery.of(context).size.width,\n color: Colors.orange,\n child: Icon(Icons.android, color: Colors.green, size: 80)),\n ),\n SizeTransition(\n axis: Axis.vertical,\n sizeFactor: CurvedAnimation(parent: _ctrl, curve: Curves.linear),\n child: Container(\n width: MediaQuery.of(context).size.width,\n color: Colors.orange,\n child: Icon(Icons.android, color: Colors.green, size: 80)),\n ),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":90,"name":"RotationTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【turns】 : 是否消失 【Animation<double>】","code":"import 'package:flutter/material.dart';\nclass CustomRotationTransition extends StatefulWidget {\n @override\n _CustomRotationTransitionState createState() => _CustomRotationTransitionState();\n}\n\nclass _CustomRotationTransitionState extends State<CustomRotationTransition> with SingleTickerProviderStateMixin{\n\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl= AnimationController(vsync: this,duration: Duration(seconds: 2));\n _ctrl.forward();\n super.initState();\n }\n@override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n color: Colors.grey.withAlpha(22),\n width: 100,\n height: 100,\n child: RotationTransition(\n turns: CurvedAnimation(parent: _ctrl, curve: Curves.linear),\n child: Icon(Icons.android,color: Colors.green,size: 60),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":116,"name":"AnimatedSwitcher基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【switchOutCurve】 : 切出曲线 【Curves】\n【switchInCurve】 : 切入曲线 【Curves】\n【switchInCurve】 : 切入曲线 【Curves】\n【transitionBuilder】 : 动画构造器 【Widget Function(Widget, Animation<double>)】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedSwitcher extends StatefulWidget {\n @override\n _CustomAnimatedSwitcherState createState() => _CustomAnimatedSwitcherState();\n}\n\nclass _CustomAnimatedSwitcherState extends State<CustomAnimatedSwitcher> {\n int _count = 0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n _buildMinusBtn(),\n SizedBox(width:80,child: _buildAnimatedSwitcher(context)),\n _buildAddBtn()\n ],\n ),\n );\n }\n\n Widget _buildAnimatedSwitcher(BuildContext context) =>\n AnimatedSwitcher(\n duration: const Duration(milliseconds: 400),\n transitionBuilder: (Widget child, Animation<double> animation) =>\n ScaleTransition(\n child: RotationTransition(turns: animation, child: child),\n scale: animation),\n child: Text(\n '$_count',\n key: ValueKey<int>(_count),\n style: Theme.of(context).textTheme.display3,\n ),\n );\n\n Widget _buildMinusBtn() {\n return MaterialButton(\n padding: EdgeInsets.all(0),\n textColor: Color(0xffFfffff),\n elevation: 3,\n color: Colors.red,\n highlightColor: Color(0xffF88B0A),\n splashColor: Colors.red,\n child: Icon(\n Icons.remove,\n color: Colors.white,\n ),\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: () => setState(() => _count -= 1));\n }\n\n Widget _buildAddBtn() => MaterialButton(\n padding: EdgeInsets.all(0),\n textColor: Color(0xffFfffff),\n elevation: 3,\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n splashColor: Colors.red,\n child: Icon(\n Icons.add,\n color: Colors.white,\n ),\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: () => setState(() => _count += 1));\n}\n"},{"id":null,"widgetId":38,"name":"可从资源文件和网络加载图片","priority":1,"subtitle":" \nImage.asset加载资源图片,","code":"import 'package:flutter/material.dart';\nclass LoadImage extends StatelessWidget {\n final assetsImagePath = \"assets/images/icon_head.png\";\n final assetsGif = \"assets/images/pica.gif\";\n final netImageUrl = \"https://user-gold-cdn.xitu.io\"\n \"/2019/7/24/16c225e78234ec26?\"\n \"imageView2/1/w/1304/h/734/q/85/format/webp/interlace/1\";\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: <Widget>[\n _loadFromAssets(),\n _loadFromNet(),\n ],\n );\n }\n\n Widget _loadFromAssets() => Wrap(\n spacing: 10,\n children: <Widget>[\n Image.asset(assetsImagePath, height: 80, width: 80),\n Image.asset(assetsGif, height: 80, width: 80),\n ],\n );\n\n Widget _loadFromNet() => Image.network(netImageUrl, height: 80);\n}\n"},{"id":null,"widgetId":38,"name":"图片颜色及混合模式","priority":4,"subtitle":" \n【color】 : 颜色 【Color】\n【colorBlendMode】: 混合模式*29 【BlendMode】","code":"import 'package:flutter/material.dart';\nclass BlendModeImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: BlendMode.values\n .toList()\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 60,\n height: 60,\n color: Colors.red,\n child: Image(\n image: AssetImage(\"assets/images/icon_head.png\"),\n color: Colors.blue.withAlpha(88),\n colorBlendMode: mode)),\n Text(mode.toString().split(\".\")[1])\n ]))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":38,"name":"图片对齐模式","priority":3,"subtitle":" \n【alignment】 : 颜色 【AlignmentGeometry】\n 常用Alignment类的九个静态常量，但也可定制位置","code":"import 'package:flutter/material.dart';\nclass AlignmentImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var alignment = [\n Alignment.center,\n Alignment.centerLeft,\n Alignment.centerRight,\n Alignment.topCenter,\n Alignment.topLeft,\n Alignment.topRight,\n Alignment.bottomCenter,\n Alignment.bottomLeft,\n Alignment.bottomRight\n ]; //测试数组\n var imgLi = alignment\n .map((alignment) => //生成子Widget列表\n Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 90,\n height: 60,\n color: Colors.grey.withAlpha(88),\n child: Image(\n image: AssetImage(\"assets/images/wy_30x20.jpg\"),\n alignment: alignment,\n )),\n Text(alignment.toString())\n ]))\n .toList();\n var imageAlignment = Wrap(children: imgLi);\n return imageAlignment;\n }\n}"},{"id":null,"widgetId":38,"name":"图片实现局部放大","priority":6,"subtitle":" \n【centerSlice】 : 保留的区域 【Rect】","code":"import 'package:flutter/material.dart';\nclass CenterSliceImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 300,\n height: 80,\n child: Image.asset(\n \"assets/images/right_chat.png\",\n centerSlice: Rect.fromLTRB(9, 27, 60, 27 + 1.0),\n fit: BoxFit.fill,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":38,"name":"图片重复模式","priority":5,"subtitle":" \n【repeat】 : 重复模式*4 【ImageRepeat】","code":"import 'package:flutter/material.dart';\nclass RepeatImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: ImageRepeat.values\n .toList()\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 150,\n height: 60,\n color: Colors.red,\n child: Image(\n image: AssetImage(\"assets/images/wy_30x20.jpg\"),\n repeat: mode)),\n Text(mode.toString().split(\".\")[1])\n ]))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":38,"name":"图片的适应模式","priority":2,"subtitle":" \n【fit】 : 适应模式*7 【BoxFit】,","code":"import 'package:flutter/material.dart';\nclass FitImage extends StatefulWidget {\n @override\n _FitImageState createState() => _FitImageState();\n}\n\nclass _FitImageState extends State<FitImage> {\n bool _smallImage = false;\n\n @override\n Widget build(BuildContext context) {\n var imageLi = BoxFit.values\n .toList()\n .map((mode) => Column(children: <Widget>[\n Container(\n margin: EdgeInsets.all(5),\n width: 100,\n height: 80,\n color: Colors.grey.withAlpha(88),\n child: Image(\n image: AssetImage(!_smallImage\n ? \"assets/images/wy_300x200.jpg\"\n : \"assets/images/wy_30x20.jpg\"),\n fit: mode)),\n Text(mode.toString().split(\".\")[1])\n ]))\n .toList();\n\n return Wrap(\n children: [...imageLi, _buildSwitch()],\n );\n }\n\n Widget _buildSwitch() {\n return Container(\n alignment: Alignment.center,\n width: 200,\n height: 100,\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Text(\"使用小图\"),\n Switch(\n value: _smallImage,\n onChanged: (b) => setState(() => _smallImage = b)),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":351,"name":"constrained属性测试","priority":2,"subtitle":"【constrained】 : 受约束的 【bool】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass InteractiveViewerDemo2 extends StatelessWidget {\n\n Widget build(BuildContext context) {\n const int _rowCount = 20;\n const int _columnCount = 4;\n\n return Container(\n width: 300,\n height: 200,\n child: InteractiveViewer(\n constrained: false,\n scaleEnabled: false,\n child: Table(\n columnWidths: <int, TableColumnWidth>{\n for (int column = 0; column < _columnCount; column += 1)\n column: const FixedColumnWidth(150.0),\n },\n children: buildRows(_rowCount, _columnCount),\n ),\n ),\n );\n }\n\n List<TableRow> buildRows(int rowCount, int columnCount) {\n return <TableRow>[\n for (int row = 0; row < rowCount; row += 1)\n TableRow(\n children: <Widget>[\n for (int column = 0; column < columnCount; column += 1)\n Container(\n margin: EdgeInsets.all(2),\n height: 50,\n alignment: Alignment.center,\n color: _colorful(row,column),\n child: Text('($row,$column)',style: TextStyle(fontSize: 20,color: Colors.white),),\n ),\n ],\n ),\n ];\n }\n\n final colors = [Colors.red,Colors.yellow,Colors.blue,Colors.green];\n final colors2 = [Colors.yellow,Colors.blue,Colors.green,Colors.red];\n\n _colorful(int row, int column ) => row % 2==0?colors[column]:colors2[column];\n}\n"},{"id":null,"widgetId":351,"name":"InteractiveViewer基本使用","priority":1,"subtitle":"【alignPanAxis】 : 沿轴拖动 【bool】\n【boundaryMargin】 : 边界边距 【EdgeInsets】\n【panEnabled】 : 是否可平移 【bool】\n【scaleEnabled】 : 是否可缩放 【bool】\n【maxScale】 : 最大放大倍数 【double】\n【minScale】 : 最小缩小倍数 【double】\n【onInteractionEnd】 : 交互结束回调 【GestureScaleEndCallback】\n【onInteractionStart】 : 交互开始回调 【GestureScaleStartCallback】\n【onInteractionUpdate】 : 交互更新回调 【GestureScaleUpdateCallback】\n【child】 : 游标颜色 【Widget】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass InteractiveViewerDemo extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 150,\n color: Colors.grey.withAlpha(33),\n child: InteractiveViewer(\n boundaryMargin: EdgeInsets.all(40.0),\n maxScale: 2.5,\n minScale: 0.3,\n panEnabled: true,\n scaleEnabled: true,\n child: Container(\n child: Image.asset('assets/images/caver.jpeg'),\n ),\n onInteractionStart: _onInteractionStart,\n onInteractionUpdate: _onInteractionUpdate,\n onInteractionEnd: _onInteractionEnd,\n ),\n );\n }\n\n void _onInteractionStart(ScaleStartDetails details) {\n print('onInteractionStart----' + details.toString());\n }\n\n void _onInteractionUpdate(ScaleUpdateDetails details) {\n print('onInteractionUpdate----' + details.toString());\n }\n\n void _onInteractionEnd(ScaleEndDetails details) {\n print('onInteractionEnd----' + details.toString());\n }\n}\n"},{"id":null,"widgetId":351,"name":"变换控制器的使用","priority":3,"subtitle":"【transformationController】 : 变换控制器 【TransformationController】","code":"import 'dart:math';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass InteractiveViewerDemo3 extends StatefulWidget {\n @override\n _InteractiveViewerDemo3State createState() => _InteractiveViewerDemo3State();\n}\n\nclass _InteractiveViewerDemo3State extends State<InteractiveViewerDemo3>\n with SingleTickerProviderStateMixin {\n final TransformationController _transformationController =\n TransformationController();\n Animation<Matrix4> _animationReset;\n AnimationController _controllerReset;\n\n void _onAnimateReset() {\n _transformationController.value = _animationReset.value;\n if (!_controllerReset.isAnimating) {\n _animationReset?.removeListener(_onAnimateReset);\n _animationReset = null;\n _controllerReset.reset();\n }\n }\n\n void _animateResetInitialize() {\n _controllerReset.reset();\n _animationReset = Matrix4Tween(\n begin: _transformationController.value,\n end: Matrix4.identity(),\n ).animate(_controllerReset);\n _animationReset.addListener(_onAnimateReset);\n _controllerReset.forward();\n }\n\n void _animateResetStop() {\n _controllerReset.stop();\n _animationReset?.removeListener(_onAnimateReset);\n _animationReset = null;\n _controllerReset.reset();\n }\n\n void _onInteractionStart(ScaleStartDetails details) {\n if (_controllerReset.status == AnimationStatus.forward) {\n _animateResetStop();\n }\n }\n\n @override\n void initState() {\n super.initState();\n _controllerReset = AnimationController(\n vsync: this,\n duration: const Duration(milliseconds: 400),\n );\n }\n\n @override\n void dispose() {\n _controllerReset.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n direction: Axis.vertical,\n spacing: 10,\n crossAxisAlignment: WrapCrossAlignment.center,\n alignment: WrapAlignment.center,\n children: [\n Container(\n height: 150,\n color: Colors.grey.withAlpha(33),\n child: InteractiveViewer(\n boundaryMargin: EdgeInsets.all(40),\n transformationController: _transformationController,\n minScale: 0.1,\n maxScale: 1.8,\n onInteractionStart: _onInteractionStart,\n child: Container(\n child: Image.asset('assets/images/caver.jpeg'),\n ),\n ),\n ),\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n _buildButton(),\n _buildButton2(),\n _buildButton3(),\n ],\n )\n ],\n );\n }\n\n Widget _buildButton() {\n return MaterialButton(\n child: Icon(\n Icons.refresh,\n color: Colors.white,\n ),\n color: Colors.green,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: _animateResetInitialize);\n }\n\n var _x = 0.0;\n\n Widget _buildButton2() {\n return MaterialButton(\n child: Icon(\n Icons.navigate_before,\n color: Colors.white,\n ),\n color: Colors.green,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: () {\n var temp = _transformationController.value.clone();\n temp.translate(_x - 4);\n _transformationController.value = temp;\n });\n }\n\n Widget _buildButton3() {\n return MaterialButton(\n child: Icon(\n Icons.navigate_next,\n color: Colors.white,\n ),\n color: Colors.green,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: () {\n var temp = _transformationController.value.clone();\n temp.translate(_x + 4);\n _transformationController.value = temp;\n });\n }\n}\n"},{"id":null,"widgetId":255,"name":"ValueListenableBuilder基本使用","priority":1,"subtitle":"【builder】: 组件构造器 【ValueWidgetBuilder<T>】\n【valueListenable】: 监听值 【ValueListenable<T>】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass ValueListenableBuilderDemo extends StatelessWidget {\n ValueListenableBuilderDemo({Key key}) : super(key: key);\n\n final ValueNotifier<int> _counter = ValueNotifier<int>(0);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: AppBar(title: Text(\"ValueListenableBuilder\")),\n body: Center(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Text('You have pushed the button this many times:'),\n ValueListenableBuilder<int>(\n builder: _buildWithValue,\n valueListenable: _counter,\n child: const Text('I am Child!'),\n )\n ],\n ),\n ),\n floatingActionButton: FloatingActionButton(\n child: Icon(Icons.plus_one),\n onPressed: () => _counter.value += 1,\n ),\n ),\n );\n }\n\n Widget _buildWithValue(BuildContext context, int value, Widget child) {\n return Row(\n mainAxisAlignment: MainAxisAlignment.spaceAround,\n children: <Widget>[\n Text('$value'),\n child,\n ],\n );\n }\n}\n"},{"id":null,"widgetId":177,"name":"ReorderableListView基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【header】 : 头部组件 【Widget】\n【padding】 : 内边距 【EdgeInsets】\n【onReorder】 : 调换时回调 【ReorderCallback】","code":"import 'package:flutter/material.dart';\nclass CustomReorderableListView extends StatefulWidget {\n @override\n _CustomReorderableListViewState createState() => _CustomReorderableListViewState();\n}\n\nclass _CustomReorderableListViewState extends State<CustomReorderableListView> {\n var data = <Color>[\n Colors.yellow[50],\n Colors.yellow[100],\n Colors.yellow[200],\n Colors.yellow[300],\n Colors.yellow[400],\n Colors.yellow[500],\n Colors.yellow[600],\n Colors.yellow[700],\n Colors.yellow[800],\n Colors.yellow[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 250,\n child: ReorderableListView(\n padding: EdgeInsets.all(10),\n header: Container(\n color: Colors.blue,\n alignment: Alignment.center,\n height: 50,\n child: Text('长按拖拽进行换位',style: TextStyle(color: Colors.white),)),\n onReorder: _handleReorder,\n children: data.map((color) => _buildItem(color)).toList(),\n ),\n );\n }\n\n void _handleReorder(int oldIndex, int newIndex) {\n if (oldIndex < newIndex) {\n newIndex -= 1;\n }\n\n setState(() {\n final element = data.removeAt(oldIndex);\n data.insert(newIndex, element);\n });\n\n }\n\n Widget _buildItem(Color color) {\n return Container(\n key: ValueKey(color) ,\n alignment: Alignment.center,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":177,"name":"ReorderableListView滑动方向","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向 【bool】","code":"import 'package:flutter/material.dart';\nclass DirectionReorderableListView extends StatefulWidget {\n @override\n _DirectionReorderableListViewState createState() => _DirectionReorderableListViewState();\n}\n\nclass _DirectionReorderableListViewState extends State<DirectionReorderableListView> {\n var data = <Color>[\n Colors.yellow[50],\n Colors.yellow[100],\n Colors.yellow[200],\n Colors.yellow[300],\n Colors.yellow[400],\n Colors.yellow[500],\n Colors.yellow[600],\n Colors.yellow[700],\n Colors.yellow[800],\n Colors.yellow[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ReorderableListView(\n scrollDirection: Axis.horizontal,\n reverse: false,\n onReorder: _handleReorder,\n children: data.map((color) => _buildItem(color)).toList(),\n ),\n );\n }\n\n void _handleReorder(int oldIndex, int newIndex) {\n if (oldIndex < newIndex) {\n newIndex -= 1;\n }\n\n setState(() {\n final element = data.removeAt(oldIndex);\n data.insert(newIndex, element);\n });\n\n }\n\n Widget _buildItem(Color color) {\n return Container(\n key: ValueKey(color) ,\n alignment: Alignment.center,\n width: 80,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":113,"name":"DecoratedBoxTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【position】 : 前/背景色 【DecorationPosition】\n【decoration】 : 动画 【Animation<Decoration>】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomDecoratedBoxTransition extends StatefulWidget {\n @override\n _CustomDecoratedBoxTransitionState createState() =>\n _CustomDecoratedBoxTransitionState();\n}\n\nclass _CustomDecoratedBoxTransitionState\n extends State<CustomDecoratedBoxTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n width: 200,\n height: 100,\n child: DecoratedBoxTransition(\n position: DecorationPosition.background,\n decoration: DecorationTween(\n begin: BoxDecoration(\n color: Colors.greenAccent,\n borderRadius: BorderRadius.all(Radius.circular(50)),\n boxShadow: [\n BoxShadow(\n offset: Offset(1, 1),\n color: Colors.purple,\n blurRadius: 3,\n spreadRadius: 1)\n ]),\n end: BoxDecoration(\n color: Colors.orange,\n borderRadius: BorderRadius.all(Radius.circular(10)),\n boxShadow: [\n BoxShadow(\n offset: Offset(1, 1),\n color: Colors.blue,\n blurRadius: 1,\n spreadRadius: 0)\n ])).animate(_ctrl),\n child: Container(\n child: Icon(Icons.android, color: Colors.white, size: 60)),\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":52,"name":"ExpansionTile基本使用","priority":1,"subtitle":" \n【children】 : 展开内容 【List<Widget>】\n【leading】 : 头左组件 【Widget】\n【title】 : 头中组件 【Widget】\n【trailing】 : 头尾组件 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【onExpansionChanged】 : 折叠事件 【Function(bool)】\n【initiallyExpanded】 : 是否初始时展开 【bool】","code":"import 'package:flutter/material.dart';\nimport '../../StatelessWidget/RadioListTile/node1_base.dart';\nclass CustomExpansionTile extends StatefulWidget {\n @override\n _CustomExpansionTileState createState() => _CustomExpansionTileState();\n}\n\nclass _CustomExpansionTileState extends State<CustomExpansionTile> {\n @override\n Widget build(BuildContext context) {\n return ExpansionTile(\n leading: Icon(Icons.star),\n title: Text(\"选择语言\"),\n backgroundColor: Colors.grey.withAlpha(6),\n onExpansionChanged: (value) {\n print('$value');\n },\n initiallyExpanded: false,\n children: <Widget>[CustomRadioListTile()],\n );\n }\n}\n"},{"id":null,"widgetId":158,"name":"CupertinoTabScaffold基本用法","priority":1,"subtitle":" \n【tabBar】 : 页签条 【CupertinoTabBar】\n【backgroundColor】 : 背景色 【Color】\n【controller】 : 控制器 【CupertinoTabController】\n【tabBuilder】 : 页面构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoTabScaffold extends StatefulWidget {\n @override\n _CustomCupertinoTabScaffoldState createState() =>\n _CustomCupertinoTabScaffoldState();\n}\n\nclass _CustomCupertinoTabScaffoldState\n extends State<CustomCupertinoTabScaffold> {\n var _position = 0;\n final iconsMap = {\n //底栏图标\n \"图鉴\": Icons.home, \"动态\": Icons.toys,\n \"喜欢\": Icons.favorite, \"手册\": Icons.class_,\n \"我的\": Icons.account_circle,\n };\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 300,\n child: CupertinoTabScaffold(\n backgroundColor: Colors.grey.withAlpha(11),\n tabBar: _buildTabBar(),\n tabBuilder: (_, index) => _buildContent(index)),\n );\n }\n\n CupertinoTabBar _buildTabBar() => CupertinoTabBar(\n currentIndex: _position,\n onTap: (value) => setState(() => _position = value),\n items: iconsMap.keys\n .map((e) => BottomNavigationBarItem(\n icon: Icon(\n iconsMap[e],\n ),\n title: Text(e),\n ))\n .toList(),\n activeColor: Colors.blue,\n inactiveColor: Color(0xff333333),\n backgroundColor: Color(0xfff1f1f1),\n iconSize: 25.0,\n );\n\n _buildContent(int index) => Container(\n alignment: Alignment.center,\n child: Text(iconsMap.keys.toList()[index]),\n );\n}\n"},{"id":null,"widgetId":105,"name":"LongPressDraggable与DragTarget联用","priority":1,"subtitle":" \n【child】 : 孩子 【Widget】\n【feedback】 : 拖拽时的孩子 【Widget】\n【axis】 : 拖动的轴 【Axis】\n【data】 : 数据 【T】\n【onDragStarted】 : 开始拖拽 【Function()】\n【onDragEnd】 : 结束拖拽 【Function(DraggableDetails)】\n【onDragCompleted】 : 拖拽完成 【Function()】\n【onDraggableCanceled】 : 拖拽取消 【Function(Velocity,Offset)】","code":"import 'package:flutter/material.dart';\nclass CustomLongPressDraggable extends StatefulWidget {\n @override\n _CustomLongPressDraggableState createState() => _CustomLongPressDraggableState();\n}\n\nclass _CustomLongPressDraggableState extends State<CustomLongPressDraggable> {\n Color _color = Colors.grey;\n String _info = 'DragTarget';\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(height: 20,),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n List<Widget> _buildColors() {\n var colors = [\n Colors.red,\n Colors.yellow,\n Colors.blue,\n Colors.green,\n Colors.orange,\n Colors.purple,\n Colors.cyanAccent\n ];\n return colors\n .map(\n (e) => LongPressDraggable<Color>(\n onDragStarted: () => setState(() => _info = '开始拖拽'),\n onDragEnd: (d) => setState(() => _info = '结束拖拽'),\n onDragCompleted: () => _info = '拖拽完成',\n onDraggableCanceled: (v, o) => _info = '拖拽取消',\n child: Container(\n width: 30,\n height: 30,\n alignment: Alignment.center,\n child: Text(\n colors.indexOf(e).toString(),\n style: TextStyle(\n color: Colors.white, fontWeight: FontWeight.bold),\n ),\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n ),\n data: e,\n feedback: Container(\n width: 25,\n height: 25,\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n )),\n )\n .toList();\n }\n\n Widget _buildDragTarget() {\n return DragTarget<Color>(\n onAccept: (data) => setState(() {\n _info='onAccept';\n _color = data;\n }),\n builder: (context, candidateData, rejectedData) => Container(\n width: 150.0,\n height: 50.0,\n color: _color,\n child: Center(\n child: Text(\n _info,\n style: TextStyle(color: Colors.white),\n ),\n )));\n }\n}\n"},{"id":null,"widgetId":138,"name":"CupertinoTimerPicker基本使用","priority":1,"subtitle":" \n【initialTimerDuration】 : 初始时间 【Duration】\n【minuteInterval】 : 分钟间隔数 【double】\n【secondInterval】 : 秒间隔数 【double】\n【alignment】 : 对齐方式 【AlignmentGeometry】\n【backgroundColor】 : 背景色 【Color】\n【mode】 : 模式*3 【CupertinoTimerPickerMode】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoTimerPicker extends StatefulWidget {\n @override\n _CustomCupertinoTimerPickerState createState() =>\n _CustomCupertinoTimerPickerState();\n}\n\nclass _CustomCupertinoTimerPickerState\n extends State<CustomCupertinoTimerPicker> {\n Duration _date = Duration(seconds: 30);\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Text(\n '当前时间:${_date.toString()}',\n style: TextStyle(color: Colors.grey, fontSize: 16),\n ),\n _buildInfoTitle('CupertinoTimerPickerMode.hms'),\n buildPicker(CupertinoTimerPickerMode.hms),\n _buildInfoTitle('CupertinoTimerPickerMode.hm'),\n buildPicker(CupertinoTimerPickerMode.hm),\n _buildInfoTitle('CupertinoTimerPickerMode.ms'),\n buildPicker(CupertinoTimerPickerMode.ms),\n ],\n );\n }\n\n Widget _buildInfoTitle(info) {\n return Padding(\n padding: const EdgeInsets.only(left: 20, top: 20, bottom: 5),\n child: Text(\n info,\n style: TextStyle(\n color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold),\n ),\n );\n }\n\n Widget buildPicker(CupertinoTimerPickerMode mode) {\n return Container(\n margin: EdgeInsets.all(10),\n height: 150,\n child: CupertinoTimerPicker(\n mode: mode,\n initialTimerDuration: Duration(seconds: 30),\n onTimerDurationChanged: (date) {\n print(date);\n setState(() => _date = date);\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":93,"name":"PositionedTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【rect】 : 动画 【Animation<RelativeRect>】\n PositionedTransition组件只能在Stack内起作用","code":"import 'package:flutter/material.dart';\nclass CustomPositionedTransition extends StatefulWidget {\n @override\n _CustomPositionedTransitionState createState() =>\n _CustomPositionedTransitionState();\n}\n\nclass _CustomPositionedTransitionState extends State<CustomPositionedTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n color: Colors.grey.withAlpha(33),\n width: 200,\n height: 100,\n child: Stack(\n children: <Widget>[\n PositionedTransition(\n rect: RelativeRectTween(\n begin: RelativeRect.fromLTRB(0, 50, 150, 100),\n end: RelativeRect.fromLTRB(60, 0, 150, -50),\n ).animate(_ctrl),\n child: Icon(\n Icons.android,\n color: Colors.green,\n size: 50,\n ),\n )\n ],\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":103,"name":"Draggable基本使用","priority":1,"subtitle":" \n【child】 : 孩子 【Widget】\n【feedback】 : 拖拽时的孩子 【Widget】\n【axis】 : 拖动的轴 【Axis】","code":"import 'package:flutter/material.dart';\nclass CustomDraggable extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var axis = [null, Axis.vertical, Axis.horizontal];\n return Wrap(\n spacing: 30,\n children: axis\n .map((e) => Draggable(\n axis: e,\n child: Container(\n width: 30,\n height: 30,\n alignment: Alignment.center,\n decoration: BoxDecoration(\n color: Colors.blue, shape: BoxShape.circle),\n ),\n feedback: Container(\n width: 30,\n height: 30,\n decoration: BoxDecoration(\n color: Colors.red, shape: BoxShape.circle),\n ),\n ))\n .toList());\n }\n}"},{"id":null,"widgetId":103,"name":"Draggable其他使用","priority":3,"subtitle":" \n可以根据拖拽来处理一些事件。如删除、查询、弹框等","code":"import 'package:flutter/material.dart';\nclass DeleteDraggable extends StatefulWidget {\n @override\n _DeleteDraggableState createState() => _DeleteDraggableState();\n}\n\nclass _DeleteDraggableState extends State<DeleteDraggable> {\n List<Color> colors = [\n Colors.red,\n Colors.yellow,\n Colors.blue,\n Colors.green,\n Colors.orange,\n Colors.purple,\n Colors.cyanAccent\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(\n height: 20,\n ),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n Widget _buildDragTarget() {\n return DragTarget<int>(\n onAccept: (data) {\n setState(() {\n colors.removeAt(data);\n });\n },\n onWillAccept: (data) => data != null,\n builder: (context, candidateData, rejectedData) => Container(\n width: 50.0,\n height: 50.0,\n decoration:\n BoxDecoration(color: Colors.red, shape: BoxShape.circle),\n child: Center(\n child: Icon(Icons.delete_sweep, color: Colors.white),\n )));\n }\n\n List<Widget> _buildColors() => colors\n .map(\n (e) => Draggable<int>(\n child: Container(\n width: 30,\n height: 30,\n alignment: Alignment.center,\n child: Text(\n colors.indexOf(e).toString(),\n style:\n TextStyle(color: Colors.white, fontWeight: FontWeight.bold),\n ),\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n ),\n data: colors.indexOf(e),\n feedback: Container(\n width: 25,\n height: 25,\n decoration: BoxDecoration(\n color: e.withAlpha(100), shape: BoxShape.circle),\n )),\n )\n .toList();\n}\n"},{"id":null,"widgetId":103,"name":"Draggable与DragTarget联用","priority":2,"subtitle":" \n【data】 : 数据 【T】\n【onDragStarted】 : 开始拖拽 【Function()】\n【onDragEnd】 : 结束拖拽 【Function(DraggableDetails)】\n【onDragCompleted】 : 拖拽完成 【Function()】\n【onDraggableCanceled】 : 拖拽取消 【Function(Velocity,Offset)】\n【onChanged】 : 改变时回调 【Function(T)】","code":"import 'package:flutter/material.dart';\nclass DraggablePage extends StatefulWidget {\n @override\n _DraggablePageState createState() => _DraggablePageState();\n}\n\nclass _DraggablePageState extends State<DraggablePage> {\n Color _color = Colors.grey;\n String _info = 'DragTarget';\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(\n height: 20,\n ),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n List<Widget> _buildColors() {\n var colors = [\n Colors.red,\n Colors.yellow,\n Colors.blue,\n Colors.green,\n Colors.orange,\n Colors.purple,\n Colors.cyanAccent\n ];\n return colors\n .map(\n (e) => Draggable<Color>(\n onDragStarted: () => setState(() => _info = '开始拖拽'),\n onDragEnd: (d) => setState(() => _info = '结束拖拽'),\n onDragCompleted: () => _info = '拖拽完成',\n onDraggableCanceled: (v, o) => _info = '拖拽取消',\n child: Container(\n width: 30,\n height: 30,\n alignment: Alignment.center,\n child: Text(\n colors.indexOf(e).toString(),\n style: TextStyle(\n color: Colors.white, fontWeight: FontWeight.bold),\n ),\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n ),\n data: e,\n feedback: Container(\n width: 25,\n height: 25,\n decoration: BoxDecoration(color: e, shape: BoxShape.circle),\n )),\n )\n .toList();\n }\n\n Widget _buildDragTarget() {\n return DragTarget<Color>(\n onLeave: (data) => print(\"onLeave: data = $data \"),\n onAccept: (data) {\n print(\"onAccept: data = $data \");\n setState(() {\n _color = data;\n });\n },\n onWillAccept: (data) {\n print(\"onWillAccept: data = $data \");\n return data != null;\n },\n builder: (context, candidateData, rejectedData) => Container(\n width: 150.0,\n height: 50.0,\n color: _color,\n child: Center(\n child: Text(\n _info,\n style: TextStyle(color: Colors.white),\n ),\n )));\n }\n}\n"},{"id":null,"widgetId":121,"name":"AnimatedPositioned基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【curve】 : 动画曲线 【Duration】\n【top】 : 到父顶距离 【double】\n【right】 : 到父右距离 【double】\n【left】 : 到父左距离 【double】\n【bottom】 : 到父底距离 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedPositioned extends StatefulWidget {\n @override\n _CustomAnimatedPositionedState createState() =>\n _CustomAnimatedPositionedState();\n}\n\nclass _CustomAnimatedPositionedState extends State<CustomAnimatedPositioned> {\n final startTop = 0.0;\n final endTop = 30.0;\n\n var _top = 0.0;\n\n @override\n void initState() {\n _top = startTop;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n Container(\n color: Colors.grey.withAlpha(33),\n width: 200,\n height: 100,\n child: Stack(\n children: _buildChildren(),\n ),\n ),\n ],\n );\n }\n\n List<Widget> _buildChildren() => <Widget>[\n AnimatedPositioned(\n duration: Duration(seconds: 1),\n top: _top,\n left: _top * 4,\n child: Icon(\n Icons.android,\n color: Colors.green,\n size: 50,\n ),\n ),\n AnimatedPositioned(\n duration: Duration(seconds: 1),\n top: 50 - _top,\n left: 150 - _top * 4,\n child: Icon(\n Icons.android,\n color: Colors.red,\n size: 50,\n ),\n )\n ];\n\n Widget _buildSwitch() => Switch(\n value: _top == endTop,\n onChanged: (v) {\n setState(() {\n _top = v ? endTop : startTop;\n });\n });\n}\n"},{"id":null,"widgetId":51,"name":"ExpandIcon基本使用","priority":1,"subtitle":" \n【isExpanded】 : 是否展开 【bool】\n【padding】 : 内边距 【EdgeInsetsGeometry】,\n【size】 : 图标大小 【double】\n【color】 : 不展开时颜色 【Color】\n【expandedColor】 : 展开时颜色 【Color】\n【onPressed】 : 点击事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass CustomExpandIcon extends StatefulWidget {\n @override\n _CustomExpandIconState createState() => _CustomExpandIconState();\n}\n\nclass _CustomExpandIconState extends State<CustomExpandIcon> {\n var _closed = true;\n\n @override\n Widget build(BuildContext context) {\n return ExpandIcon(\n isExpanded: _closed,\n padding: EdgeInsets.all(5),\n size: 30,\n color: Colors.blue,\n expandedColor: Colors.orangeAccent,\n onPressed: (value) => setState(() => _closed = !_closed),\n );\n }\n}\n"},{"id":null,"widgetId":199,"name":"TextFormField基本使用","priority":1,"subtitle":" \n 基本属性和TextField一致，详见之\n【validator】 : 验证函数 【FormFieldValidator<String> 】\n【onFieldSubmitted】 : 提交回调 【ValueChanged<String>】\n【onSaved】 : 表单save时回调 【FormFieldSetter<String>】","code":"import 'package:flutter/material.dart';\nclass CustomTextFormField extends StatefulWidget {\n @override\n _CustomTextFormFieldState createState() => _CustomTextFormFieldState();\n}\n\nclass _CustomTextFormFieldState extends State<CustomTextFormField> {\n GlobalKey<FormState> _formKey = GlobalKey<FormState>();\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Form(\n key: _formKey,\n child:\n Stack(\n alignment: Alignment.centerRight,\n children: <Widget>[\n Container(\n width: 350,\n child: UnconstrainedBox(\n child: Container(\n width: 200,\n height: 70,\n child: TextFormField(\n style: TextStyle(textBaseline: TextBaseline.alphabetic),\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n labelText: 'username',\n ),\n validator: _validateUsername,\n onFieldSubmitted: _onFieldSubmitted,\n onSaved: _onSaved,\n ),\n ),\n ),\n ),\n Positioned(\n top: 0, right: 0, child: _buildSubmitButton(context)),\n ],\n ),\n ),\n );\n }\n\n String _validateUsername(value) {\n if (value.isEmpty) {\n return '用户名不能为空';\n }\n return null;\n }\n _onSaved(value){\n print('onSaved:'+value);\n }\n\n void _onFieldSubmitted(value) {\n print('onFieldSubmitted:'+value);\n }\n\n RaisedButton _buildSubmitButton(BuildContext context) {\n return RaisedButton(\n color: Colors.blue,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: _onSubmit,\n child: Icon(\n Icons.check,\n color: Colors.white,\n ),\n );\n }\n\n _onSubmit(){\n _formKey.currentState.save();\n if (_formKey.currentState.validate()) {\n FocusScope.of(context).requestFocus(FocusNode());\n }\n }\n}"},{"id":null,"widgetId":253,"name":"Scrollable的基本使用","priority":1,"subtitle":"【viewportBuilder】 : 视口构造器 【ViewportBuilder】\n【axisDirection】: 滑动方向 【AxisDirection】\n【controller】: 滑动控制器 【ScrollController】\n【dragStartBehavior】: t拖动行为 【DragStartBehavior】\n【physics】: 滚动现象 【ScrollPhysics】\n【color】: 子组件 【Color】","code":"import 'package:flutter/gestures.dart';\nimport 'package:flutter/material.dart';\nimport 'package:flutter/rendering.dart';\nclass ScrollableDemo extends StatelessWidget {\n final data = List.generate(32, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 250,\n child: Scrollable(\n axisDirection: AxisDirection.down,\n physics: BouncingScrollPhysics(),\n dragStartBehavior: DragStartBehavior.start,\n viewportBuilder: (ctx, position) => Viewport(\n cacheExtent: 200,\n cacheExtentStyle: CacheExtentStyle.pixel,\n offset: position,\n slivers: <Widget>[_buildSliverList()],\n ),\n ),\n );\n }\n\n Widget _buildSliverList() => SliverList(\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n margin: EdgeInsets.only(top: 1),\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":40,"name":"Switch基础用法","priority":1,"subtitle":" \n【inactiveThumbColor】 : 未选中小圈颜色 【Color】\n【inactiveTrackColor】 : 未选中滑槽颜色 【Color】\n【activeColor】 : 选中时小圈颜色 【Color】\n【activeTrackColor】 : 选中时滑槽颜色 【Color】\n【onChanged】 : 切换回调 【Function(double)】\"\n onChanged时,回调true、null、false三种状态","code":"import 'package:flutter/material.dart';\nclass CustomSwitch extends StatefulWidget {\n @override\n _CustomSwitchState createState() => _CustomSwitchState();\n}\n\nclass _CustomSwitchState extends State<CustomSwitch> {\n final colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n bool _checked = false;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: colors\n .map((e) =>\n Switch(\n value: _checked,\n inactiveThumbColor: e,\n inactiveTrackColor: Colors.grey.withAlpha(88),\n activeColor: Colors.green,\n activeTrackColor: Colors.orange,\n onChanged: (v) {\n setState(() => _checked = v);\n }))\n .toList(),\n );\n }\n}\n\n"},{"id":null,"widgetId":40,"name":"Switch图片","priority":2,"subtitle":" \n【inactiveThumbImage】 : 未选中小圈图片 【ImageProvider】\n【activeThumbImage】 : 选中时滑槽颜色 【ImageProvider】","code":"import 'package:flutter/material.dart';\nclass ImageSwitch extends StatefulWidget {\n @override\n _ImageSwitchState createState() => _ImageSwitchState();\n}\n\nclass _ImageSwitchState extends State<ImageSwitch> {\n final imgs = [\n \"assets/images/head_icon/icon_5.jpg\",\n \"assets/images/head_icon/icon_6.jpg\",\n \"assets/images/head_icon/icon_7.jpg\",\n \"assets/images/head_icon/icon_8.jpg\"];\n bool _checked = false;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: imgs\n .map((e) =>\n Switch(\n value: _checked,\n inactiveThumbImage: AssetImage(e),\n activeThumbImage: AssetImage('assets/images/pica.gif'),\n onChanged: (v) {\n setState(() => _checked = v);\n }))\n .toList(),\n );\n }\n}\n\n"},{"id":null,"widgetId":232,"name":"Navigator基本用法","priority":1,"subtitle":" \n【initialRoute】 : 最初显示路由 【String】\n【onGenerateRoute】 : 路由生成器 【RouteFactory】\n【observers】 : 路由监听器 【List<NavigatorObserver>】\n【onPopPage】 : 出栈回调 【PopPageCallback】","code":"import 'package:flutter/material.dart';\nclass NavigatorDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n width: 300,\n child: Navigator(\n onPopPage: _onPopPage,\n initialRoute: '/home-content',\n onGenerateRoute: _onGenerateRoute,\n observers: [TolyNavigatorObservers()],\n ),\n );\n }\n\n Route _onGenerateRoute(RouteSettings settings) {\n switch (settings.name) {\n case '/home-content':\n return MaterialPageRoute(\n builder: (_) => HomeContent(), settings: settings);\n case \"/red\":\n return MaterialPageRoute(builder: (_) => RedPage(), settings: settings);\n case \"/yellow\":\n return MaterialPageRoute(\n builder: (_) => YellowPage(), settings: settings);\n case \"/green\":\n return MaterialPageRoute(\n builder: (_) => GreenPage(), settings: settings);\n default:\n return MaterialPageRoute(\n builder: (_) => HomeContent(), settings: settings);\n }\n }\n\n bool _onPopPage(Route<dynamic> route, result) {\n print('----_onPopPage-----');\n return true;\n }\n}\n\n//路由监听器\nclass TolyNavigatorObservers extends NavigatorObserver {\n @override\n void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {\n print(\n '--didPush:--route:--${route.settings}--previousRoute:--${previousRoute?.settings}');\n }\n\n @override\n void didStopUserGesture() {\n print('--didStopUserGesture:--');\n }\n\n @override\n void didStartUserGesture(Route<dynamic> route, Route<dynamic> previousRoute) {\n print(\n '--didStartUserGesture:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');\n }\n\n @override\n void didReplace({Route<dynamic> newRoute, Route<dynamic> oldRoute}) {\n print(\n '--didReplace:--newRoute:--${newRoute.settings}--oldRoute:--${oldRoute.settings}');\n }\n\n @override\n void didRemove(Route<dynamic> route, Route<dynamic> previousRoute) {\n print(\n '--didRemove:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');\n }\n\n @override\n void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {\n print(\n '--didPop:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');\n }\n}\n\nclass HomeContent extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: <Widget>[\n RaisedButton(\n color: Colors.red,\n onPressed: () {\n Navigator.pushNamed(context, '/red');\n },\n ),\n RaisedButton(\n color: Colors.yellow,\n onPressed: () {\n Navigator.pushNamed(context, '/yellow');\n },\n ),\n RaisedButton(\n color: Colors.green,\n onPressed: () {\n Navigator.pushNamed(context, '/green');\n },\n )\n ],\n ),\n ],\n ),\n );\n }\n}\n\nclass RedPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text(\"RedPage\"),\n ),\n body: Container(\n color: Colors.red,\n ),\n );\n }\n}\n\nclass YellowPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text(\"YellowPage\"),\n ),\n body: Container(\n color: Colors.yellow,\n ),\n );\n }\n}\n\nclass GreenPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n title: Text(\"GreenPage\"),\n ),\n body: Container(\n color: Colors.green,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":43,"name":"CupertinoSlider基本使用","priority":1,"subtitle":" \n【value】 : 数值 【double】\n【min】 : 最小值 【double】\n【max】 : 最大值 【double】\n【activeColor】 : 激活颜色 【Color】\n【thumbColor】 : 圆形颜色 【Color】\n【divisions】 : 分段数 【int】\n【onChangeStart】 : 开始滑动回调 【Function(double)】\n【onChangeEnd】 : 滑动结束回调 【Function(double)】\n【onChanged】 : 改变时回调 【Function(double)】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoSlider extends StatefulWidget {\n @override\n _CustomCupertinoSliderState createState() => _CustomCupertinoSliderState();\n}\n\nclass _CustomCupertinoSliderState extends State<CustomCupertinoSlider> {\n double _value = 0.0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisSize: MainAxisSize.min,\n\n children: <Widget>[\n Text('当前值:${_value.toStringAsFixed(1)}'),\n CupertinoSlider(\n value: _value,\n divisions: 180,\n min: 0.0,\n max: 360.0,\n activeColor: Colors.green,\n thumbColor: Colors.white,\n onChangeStart: (value) {\n print('开始滑动:$value');\n },\n onChangeEnd: (value) {\n print('滑动结束:$value');\n },\n onChanged: (value) {\n setState(() {\n _value = value;\n });\n }),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":63,"name":"CupertinoTabBar基本用法","priority":1,"subtitle":" \n【currentIndex】 : 当前激活索引 【Widget】\n【items】 : 条目组件 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【inactiveColor】 : 非激活色 【Color】\n【activeColor】 : 激活色 【Color】\n【iconSize】 : 图标大小 【double】\n【border】 : 边线 【Border】\n【onTap】 : 点击事件 【Function(int)】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoTabBar extends StatefulWidget {\n @override\n _CustomCupertinoTabBarState createState() => _CustomCupertinoTabBarState();\n}\n\nclass _CustomCupertinoTabBarState extends State<CustomCupertinoTabBar> {\n var _position = 0;\n final iconsMap = {\n //底栏图标\n \"图鉴\": Icons.home, \"动态\": Icons.toys,\n \"喜欢\": Icons.favorite, \"手册\": Icons.class_,\n \"我的\": Icons.account_circle,\n };\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildContent(context),\n _buildTabBar(),\n ],\n );\n }\n\n Widget _buildTabBar() {\n return CupertinoTabBar(\n currentIndex: _position,\n onTap: (value) => setState(() => _position = value),\n items: iconsMap.keys\n .map((e) => BottomNavigationBarItem(\n icon: Icon(\n iconsMap[e],\n ),\n title: Text(e),\n ))\n .toList(),\n activeColor: Colors.blue,\n inactiveColor: Color(0xff333333),\n backgroundColor: Color(0xfff1f1f1),\n iconSize: 25.0,\n );\n }\n\n Widget _buildContent(BuildContext context) {\n return Container(\n alignment: Alignment.center,\n width: MediaQuery.of(context).size.width,\n height: 150,\n color: Color(0xffE7F3FC),\n child: Text(\n iconsMap.keys.toList()[_position],\n style: TextStyle(color: Colors.blue, fontSize: 24),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":122,"name":"AnimatedPositionedDirectional基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【curve】 : 动画曲线 【Duration】\n【top】 : 到父顶距离 【double】\n【end】 : 到父右距离 【double】\n【start】 : 到父左距离 【double】\n【bottom】 : 到父底距离 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedPositionedDirectional extends StatefulWidget {\n @override\n _CustomAnimatedPositionedDirectionalState createState() =>\n _CustomAnimatedPositionedDirectionalState();\n}\n\nclass _CustomAnimatedPositionedDirectionalState\n extends State<CustomAnimatedPositionedDirectional> {\n final startTop = 0.0;\n final endTop = 30.0;\n\n var _top = 0.0;\n\n @override\n void initState() {\n _top = startTop;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n _buildSwitch(),\n Container(\n color: Colors.grey.withAlpha(33),\n width: 200,\n height: 100,\n child: Stack(\n children: _buildChildren(),\n ),\n ),\n ],\n );\n }\n\n List<Widget> _buildChildren() => <Widget>[\n AnimatedPositionedDirectional(\n duration: Duration(seconds: 1),\n top: _top,\n start: _top * 4,\n child: Icon(\n Icons.android,\n color: Colors.green,\n size: 50,\n ),\n ),\n AnimatedPositionedDirectional(\n duration: Duration(seconds: 1),\n top: 50 - _top,\n start: 150 - _top * 4,\n child: Icon(\n Icons.android,\n color: Colors.red,\n size: 50,\n ),\n )\n ];\n\n Widget _buildSwitch() => Switch(\n value: _top == endTop,\n onChanged: (v) {\n setState(() {\n _top = v ? endTop : startTop;\n });\n });\n}\n"},{"id":null,"widgetId":293,"name":"MouseRegion基本使用","priority":1,"subtitle":"【onEnter】 : 移入事件 【PointerEnterEventListener】\n【onHover】: 移动事件 【PointerHoverEventListener】\n【onExit】: 移出事件 【PointerExitEventListener】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass MouseRegionDemo extends StatefulWidget {\n @override\n _MouseRegionDemoState createState() => _MouseRegionDemoState();\n}\n\nclass _MouseRegionDemoState extends State<MouseRegionDemo> {\n int _enterCounter = 0;\n int _exitCounter = 0;\n double x = 0.0;\n double y = 0.0;\n void _incrementEnter(PointerEvent details) {\n setState(() {\n _enterCounter++;\n });\n }\n void _incrementExit(PointerEvent details) {\n setState(() {\n _exitCounter++;\n });\n }\n void _updateLocation(PointerEvent details) {\n setState(() {\n x = details.position.dx;\n y = details.position.dy;\n });\n }\n @override\n Widget build(BuildContext context) {\n return ConstrainedBox(\n constraints: BoxConstraints.tight(Size(300.0, 200.0)),\n child: MouseRegion(\n onEnter: _incrementEnter,\n onHover: _updateLocation,\n onExit: _incrementExit,\n child: Container(\n color: Colors.lightBlueAccent,\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Text('你的鼠标移入移除信息:'),\n Text(\n '$_enterCounter Entries\\n$_exitCounter Exits',\n style: Theme.of(context).textTheme.headline4,\n ),\n Text(\n 'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',\n ),\n ],\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":244,"name":"EditableText基本使用","priority":1,"subtitle":"【controller】 : 控制器 【TextEditingController】\n【focusNode】 : 焦点 【FocusNode】\n【style】 : 文字样式 【TextStyle】\n【backgroundCursorColor】 : 背景游标颜色 【Color】\n【cursorColor】 : 游标颜色 【Color】\n上面五个是EditableText必须的属性，其他同TextField,此处不再列举。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass EditableTextDemo extends StatefulWidget {\n @override\n _EditableTextDemoState createState() => _EditableTextDemoState();\n}\n\nclass _EditableTextDemoState extends State<EditableTextDemo> {\n final _ctrl = TextEditingController(text:'Hello Flutter Unit!');\n final _node = FocusNode();\n\n @override\n Widget build(BuildContext context) {\n return Padding(\n padding: const EdgeInsets.all(8.0),\n child: EditableText(\n controller: _ctrl,\n focusNode: _node,\n style: TextStyle(fontSize: 16,color: Colors.blue),\n cursorColor: Colors.blue,\n backgroundCursorColor: Colors.orange,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":117,"name":"AnimatedList基本使用","priority":1,"subtitle":" \n【itemBuilder】 : 组件构造器 【AnimatedListItemBuilder】\n【initialItemCount】 : 子组件数量 【int】\n【scrollDirection】 : 滑动方向 【Axis】\n【controller】 : 滑动控制器 【ScrollController】\n【reverse】 : 数据是否反向 【bool】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedList extends StatefulWidget {\n @override\n _CustomAnimatedListState createState() => _CustomAnimatedListState();\n}\n\nclass _CustomAnimatedListState extends State<CustomAnimatedList> {\n final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();\n ListModel<int> _list;\n int _selectedItem;\n int _nextItem;\n\n @override\n void initState() {\n super.initState();\n _list = ListModel<int>(\n listKey: _listKey,\n initialItems: <int>[0, 1, 2, 3],\n removedItemBuilder: _buildRemovedItem,\n );\n _nextItem = 4;\n }\n\n Widget _buildItem(\n BuildContext context, int index, Animation<double> animation) {\n return CardItem(\n animation: animation,\n item: _list[index],\n selected: _selectedItem == _list[index],\n onTap: () {\n setState(() {\n _selectedItem = _selectedItem == _list[index] ? null : _list[index];\n });\n },\n );\n }\n\n Widget _buildRemovedItem(\n int item, BuildContext context, Animation<double> animation) {\n return CardItem(\n animation: animation,\n item: item,\n selected: false,\n );\n }\n\n void _insert() {\n final int index =\n _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);\n _list.insert(index, _nextItem++);\n }\n\n void _remove() {\n if (_selectedItem != null) {\n _list.removeAt(_list.indexOf(_selectedItem));\n setState(() {\n _selectedItem = null;\n });\n }\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(33),\n width: MediaQuery.of(context).size.width/2,\n child: Column(\n children: <Widget>[\n _buildBtn(),\n Container(\n width: MediaQuery.of(context).size.width/2,\n height: 300,\n child: AnimatedList(\n padding: EdgeInsets.all(10.0),\n key: _listKey,\n initialItemCount: _list.length,\n itemBuilder: _buildItem,\n ),\n )\n ],\n ));\n }\n\n Widget _buildBtn() => Row(\n children: <Widget>[\n IconButton(\n icon: const Icon(\n Icons.add_circle,\n color: Colors.blue,\n ),\n onPressed: _insert,\n ),\n IconButton(\n icon: const Icon(Icons.remove_circle, color: Colors.blue),\n onPressed: _remove,\n ),\n ],\n );\n}\n\nclass ListModel<E> {\n ListModel({\n @required this.listKey,\n @required this.removedItemBuilder,\n Iterable<E> initialItems,\n }) : assert(listKey != null),\n assert(removedItemBuilder != null),\n _items = List<E>.from(initialItems ?? <E>[]);\n final GlobalKey<AnimatedListState> listKey;\n final dynamic removedItemBuilder;\n final List<E> _items;\n\n AnimatedListState get _animatedList => listKey.currentState;\n\n void insert(int index, E item) {\n _items.insert(index, item);\n _animatedList.insertItem(index);\n }\n\n E removeAt(int index) {\n final E removedItem = _items.removeAt(index);\n if (removedItem != null) {\n _animatedList.removeItem(index,\n (BuildContext context, Animation<double> animation) =>\n removedItemBuilder(removedItem, context, animation),\n );\n }\n return removedItem;\n }\n\n int get length => _items.length;\n\n E operator [](int index) => _items[index];\n\n int indexOf(E item) => _items.indexOf(item);\n}\n\nclass CardItem extends StatelessWidget {\n const CardItem(\n {Key key,\n @required this.animation,\n this.onTap,\n @required this.item,\n this.selected: false})\n : assert(animation != null),\n assert(item != null && item >= 0),\n assert(selected != null),\n super(key: key);\n final Animation<double> animation;\n final VoidCallback onTap;\n final int item;\n final bool selected;\n\n @override\n Widget build(BuildContext context) {\n return SizeTransition(\n axis: Axis.vertical,\n sizeFactor: animation,\n child: Card(\n child: Container(\n color: Colors.primaries[item % Colors.primaries.length],\n child: CheckboxListTile(\n dense: true,\n title: Text(\n 'Item $item',\n style: TextStyle(color: Colors.white, fontSize: 18),\n ),\n value: selected,\n onChanged: (v) => onTap()),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":149,"name":"InkResponse其他属性","priority":2,"subtitle":" \n【child】 : 子组件 【Widget】\n【onHighlightChanged】 : 高亮变化回调 【Function(bool)】\n【highlightColor】 : 高亮色 【Color】\n【splashColor】 : 水波纹色 【Color】\n【radius】 : 水波半径 【double】","code":"import 'package:flutter/material.dart';\nclass ColorInkResponse extends StatefulWidget {\n @override\n _ColorInkResponseState createState() => _ColorInkResponseState();\n}\n\nclass _ColorInkResponseState extends State<ColorInkResponse> {\n var _info = 'Push';\n\n @override\n Widget build(BuildContext context) {\n return InkResponse(\n onTap: () => {},\n splashColor: Colors.blueAccent,\n highlightColor: Colors.orange,\n onHighlightChanged: (v) =>\n setState(() => _info = 'onHighlightChanged:$v'),\n radius: 50,\n child: Container(\n alignment: Alignment.center,\n width: 200,\n height: 100,\n child: Text(_info),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":149,"name":"InkResponse基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onTap】 : 点击事件 【Function()】\n【onDoubleTap】 : 双击事件 【Function()】\n【onTapCancel】 : 点击取消 【Function()】\n【onLongPress】 : 长按事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomInkResponse extends StatefulWidget {\n @override\n _CustomInkResponseState createState() => _CustomInkResponseState();\n}\n\nclass _CustomInkResponseState extends State<CustomInkResponse> {\n var _info = 'Push';\n\n @override\n Widget build(BuildContext context) {\n return InkResponse(\n onTap: () => setState(() => _info = 'onTap'),\n onDoubleTap: () => setState(() => _info = 'onDoubleTap'),\n onLongPress: () => setState(() => _info = 'onLongPress'),\n onTapCancel: () => setState(() => _info = 'onTapCancel'),\n child: Container(\n alignment: Alignment.center,\n width: 200,\n height: 100,\n child: Text(_info),\n ),\n );\n }\n}"},{"id":null,"widgetId":119,"name":"AnimatedPadding基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【curve】 : 动画曲线 【Duration】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedPadding extends StatefulWidget {\n @override\n _CustomAnimatedPaddingState createState() => _CustomAnimatedPaddingState();\n}\n\nclass _CustomAnimatedPaddingState extends State<CustomAnimatedPadding> {\n final EdgeInsets startPadding = EdgeInsets.all(10);\n final EdgeInsets endPadding = EdgeInsets.all(30);\n\n EdgeInsets _padding;\n\n @override\n void initState() {\n _padding = startPadding;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Switch(\n value: _padding == endPadding,\n onChanged: (v) {\n setState(() {\n _padding = v ? endPadding : startPadding;\n });\n }),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: AnimatedPadding(\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n padding: _padding,\n onEnd: () => print('End'),\n child: Container(\n alignment: Alignment.center,\n color: Colors.blue,\n child: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":111,"name":"AlignTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【alignment】 : 对齐动画 【Animation<AlignmentGeometry>】","code":"import 'package:flutter/material.dart';\nclass CustomAlignTransition extends StatefulWidget {\n @override\n _CustomAlignTransitionState createState() => _CustomAlignTransitionState();\n}\n\nclass _CustomAlignTransitionState extends State<CustomAlignTransition>\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n width: MediaQuery.of(context).size.width,\n color: Colors.grey.withAlpha(33),\n height: 100,\n child: AlignTransition(\n alignment: AlignmentTween(\n begin: Alignment.topLeft, end: Alignment.bottomRight)\n .animate(_ctrl),\n child: Container(\n child: Icon(Icons.android, color: Colors.green, size: 60)),\n ),\n ));\n }\n}\n"},{"id":null,"widgetId":145,"name":"LicensePage基本使用","priority":1,"subtitle":" \n【applicationIcon】 : 左上图标 【Widget】\n【applicationVersion】 : 版本号 【String】\n【applicationName】 : 应用名 【String】\n【applicationLegalese】 : 应用律术 【String】","code":"import 'package:flutter/material.dart';\nclass CustomLicensePage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: 400,\n child: LicensePage(\n applicationIcon: FlutterLogo(),\n applicationVersion: 'v0.0.1',\n applicationName: 'Flutter Unit',\n applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',\n ),\n );\n }\n}\n"},{"id":null,"widgetId":156,"name":"CupertinoApp基本用法","priority":1,"subtitle":" \n【theme】 : 主题 【ThemeData】\n【title】 : 任务栏标题 【String】\n【onGenerateRoute】 : 路由生成器 【RouteFactory】\n【home】 : 主页 【Widget】","code":"import 'package:flutter/cupertino.dart';\nclass CustomCupertinoApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 200,\n child: CupertinoApp(\n title: 'Flutter Demo',\n theme: CupertinoThemeData(\n primaryColor: CupertinoColors.white,\n ),\n home: CupertinoPageScaffold(\n navigationBar: CupertinoNavigationBar(\n leading: Icon(\n CupertinoIcons.reply,\n color: CupertinoColors.black,\n ),\n trailing: Icon(\n CupertinoIcons.share,\n color: CupertinoColors.black,\n ),\n middle: Text('Flutter Unit'),\n ),\n backgroundColor: CupertinoColors.systemBackground,\n child: Center(\n child: Text('Hello, World!'),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":64,"name":"Scaffold基本用法","priority":1,"subtitle":" \n【appBar】 : 头部组件 【PreferredSizeWidget】\n【bottomNavigationBar】 : 底部组件 【Widget】\n【drawer】 : 左侧滑组件 【Widget】\n【endDrawer】 : 右侧滑组件 【Widget】\n【body】 : 内容组件 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【floatingActionButton】 : 浮动按钮 【Widget】\n【floatingActionButtonLocation】 : 浮动按钮位置 【FloatingActionButtonLocation】","code":"import 'package:flutter/material.dart';\nimport '../PopupMenuButton/node1_base.dart';\nclass CustomScaffold extends StatefulWidget {\n CustomScaffold({Key key}) : super(key: key);\n\n @override\n State<StatefulWidget> createState() => _CustomScaffoldState();\n}\n\n// AppBar 默认的实例,有状态\nclass _CustomScaffoldState extends State with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n var _position = 0;\n final iconsMap = {\n \"图鉴\": Icons.home,\n \"动态\": Icons.toys,\n \"喜欢\": Icons.favorite,\n \"手册\": Icons.class_,\n \"我的\": Icons.account_circle,\n };\n final _colors = [\n Colors.blue,\n Colors.red,\n Colors.yellow,\n Colors.green,\n Colors.purple,\n ];\n\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: MediaQuery.of(context).size.height - 300,\n child: Scaffold(\n floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,\n floatingActionButton: FloatingActionButton(\n child: Icon(Icons.add),\n onPressed: () {},\n ),\n drawer: _buildLeftDrawer(),\n endDrawer: _buildLeftDrawer(),\n appBar: AppBar(\n title: Text('风雅六社'),\n backgroundColor: Colors.blue,\n centerTitle: true,\n actions: <Widget>[Icon(Icons.star), CustomPopupMenuButton()],\n bottom: _buildTabBar(),\n ),\n body: _buildTableBarView(),\n bottomNavigationBar: _buildBottomNavigationBar(),\n ),\n );\n }\n\n Drawer _buildLeftDrawer() => Drawer(\n elevation: 1,\n child: Image.asset(\n 'assets/images/sabar.jpg',\n fit: BoxFit.cover,\n ),\n );\n\n Widget _buildTabBar() => TabBar(\n isScrollable: true,\n controller: _tabController,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n );\n\n Widget _buildBottomNavigationBar() => BottomNavigationBar(\n onTap: (position) => setState(() => _position = position),\n currentIndex: _position,\n elevation: 1,\n backgroundColor: Colors.white,\n iconSize: 25,\n selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),\n showUnselectedLabels: false,\n showSelectedLabels: true,\n items: iconsMap.keys\n .map((key) => BottomNavigationBarItem(\n title: Text(\n key,\n ),\n icon: Icon(iconsMap[key]),\n backgroundColor: _colors[_position]))\n .toList(),\n );\n\n Widget _buildTableBarView() => TabBarView(\n controller: _tabController,\n children: tabs\n .map((e) => Center(\n child: Text(\n e,\n style: TextStyle(color: Colors.blue, fontSize: 20),\n )))\n .toList());\n}\n"},{"id":null,"widgetId":171,"name":"Hero基本使用","priority":1,"subtitle":" \n【tag】 : 标签 【String】,","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomHero extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var hero = Hero(\n //----定义一个Hero,并添加tag标签,此中组件共享\n tag: 'user-head',\n child: ClipRRect(\n borderRadius: BorderRadius.all(Radius.circular(30)),\n child: Image.asset(\n \"assets/images/icon_head.png\",\n width: 60,\n height: 60,\n fit: BoxFit.cover,\n ),\n ),\n );\n\n var container = Container(\n alignment: Alignment(-0.8, -0.8),\n child: hero,\n width: 250,\n height: 250 * 0.618,\n decoration: BoxDecoration(\n gradient: LinearGradient(colors: [\n Colors.red.withAlpha(99),\n Colors.yellow.withAlpha(189),\n Colors.green.withAlpha(88),\n Colors.blue.withAlpha(230)\n ])),\n );\n\n return GestureDetector(\n child: Card(elevation: 5, child: container),\n onTap: () => Navigator.push(\n context,\n Bottom2TopRouter(child: TargetPage(), duration: 1000),\n ),\n );\n }\n\n}\n\nclass TargetPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var hero = Hero(\n //----定义一个Hero,为其添加标签，两个标签相同，则可以共享\n tag: 'user-head',\n child: Padding(\n padding: EdgeInsets.all(6.0),\n child: CircleAvatar(\n backgroundColor: Colors.transparent,\n backgroundImage: AssetImage(\n \"assets/images/icon_head.png\",\n ),\n ),\n ),\n );\n\n var touch = InkWell(\n onTap: () {\n Navigator.of(context).pop();\n },\n child: hero,\n );\n\n return Scaffold(\n appBar: AppBar(\n actions: <Widget>[touch],\n ),\n body: Container(\n decoration: BoxDecoration(\n gradient: LinearGradient(colors: [\n Colors.red.withAlpha(99),\n Colors.yellow.withAlpha(189),\n Colors.green.withAlpha(88),\n Colors.blue.withAlpha(230)\n ])),\n ),\n );\n }\n}\n\n//下--->上\nclass Bottom2TopRouter<T> extends PageRouteBuilder<T> {\n final Widget child;\n final int duration;\n final Curve curve;\n\n Bottom2TopRouter(\n {this.child, this.duration = 500, this.curve = Curves.fastOutSlowIn})\n : super(\n transitionDuration: Duration(milliseconds: duration),\n pageBuilder: (ctx, a1, a2) {\n return child;\n },\n transitionsBuilder: (\n ctx,\n a1,\n a2,\n Widget child,\n ) => SlideTransition(\n position: Tween<Offset>(\n begin: Offset(0.0, 1.0),\n end: Offset(0.0, 0.0),\n ).animate(CurvedAnimation(parent: a1, curve: curve)),\n child: child));\n}\n"},{"id":null,"widgetId":174,"name":"PopupMenuDivider基本使用","priority":1,"subtitle":" \n【height】 : 高度 【double】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomPopupMenuDivider extends StatelessWidget {\n final map = {\n \"关于\": Icons.info_outline,\n \"帮助\": Icons.help_outline,\n \"问题反馈\": Icons.add_comment,\n };\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: <Widget>[\n _buildPopupMenuButton(context),\n PopupMenuDivider(),\n ],\n ),\n );\n }\n\n PopupMenuButton<String> _buildPopupMenuButton(BuildContext context) {\n return PopupMenuButton<String>(\n itemBuilder: (context) => [\n ...buildItems().sublist(0, 2),\n PopupMenuDivider(),\n ...buildItems().sublist(2, 3)\n ],\n offset: Offset(0, 50),\n color: Color(0xffF4FFFA),\n elevation: 1,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20),\n bottomRight: Radius.circular(20),\n topRight: Radius.circular(5),\n bottomLeft: Radius.circular(5),\n )),\n onSelected: (e) {\n print(e);\n if (e == '关于') {\n DialogAbout.show(context);\n }\n },\n onCanceled: () => print('onCanceled'),\n );\n }\n\n List<PopupMenuItem<String>> buildItems() {\n return map.keys\n .toList()\n .map((e) => PopupMenuItem<String>(\n value: e,\n child: Wrap(\n spacing: 10,\n children: <Widget>[\n Icon(\n map[e],\n color: Colors.blue,\n ),\n Text(e),\n ],\n )))\n .toList();\n }\n}\n"},{"id":null,"widgetId":195,"name":"CupertinoScrollbar基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【controller】 : 控制器 【ScrollController】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoScrollbar extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: CupertinoScrollbar(\n child: ListView(\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":172,"name":"FutureBuilder基本使用","priority":1,"subtitle":" \n【builder】 : 子组件 【AsyncWidgetBuilder<T>】\n【initialData】 : 初始数据 【T】\n【future】 : 异步任务 【Future<T>】","code":"import 'package:flutter/material.dart';\nclass CustomFutureBuilder extends StatefulWidget {\n @override\n _CustomFutureBuilderState createState() => _CustomFutureBuilderState();\n}\n\nclass _CustomFutureBuilderState extends State<CustomFutureBuilder> {\n Future<String> _future;\n\n @override\n void initState() {\n _future = loadData();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: FutureBuilder(\n initialData: 'Load',\n future: _future,\n builder: (ctx, snap) {\n if (snap.connectionState == ConnectionState.done) {\n return Text(snap.data);\n }\n if (snap.connectionState == ConnectionState.waiting) {\n return CircularProgressIndicator();\n }\n if (snap.hasError) {\n return Text('Error');\n }\n return Container();\n }),\n );\n }\n\n Future<String> loadData() async {\n await Future.delayed(Duration(seconds: 2));\n return 'LoadeSuccess';\n }\n}\n"},{"id":null,"widgetId":182,"name":"Overlay基本使用","priority":1,"subtitle":" \n Overlay.of(context).insert插入全局组件","code":"import 'package:flutter/material.dart';\nclass CustomOverlay extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: <Widget>[\n Container(\n height: 50,\n child: RawMaterialButton(\n elevation: 2,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n fillColor: Colors.blue,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n child: Icon(Icons.add),\n onPressed: ()=>showFloating(context),\n ),\n ),\n Container(\n height: 50,\n child: RawMaterialButton(\n elevation: 2,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n fillColor: Colors.red,\n splashColor: Colors.orange,\n textStyle: TextStyle(color: Colors.white),\n child: Icon(Icons.remove),\n onPressed: hideFloating,\n ),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":139,"name":"CupertinoPicker基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List<Widget>】\n【offAxisFraction】 : 轴偏移率 【double】\n【squeeze】 : 挤压率 【double】\n【diameterRatio】 : 高与圆柱直径比率 【double】\n【itemExtent】 : 间距 【double】\n【backgroundColor】 : 背景色 【Color】\n【onSelectedItemChanged】 : 选中事件 【Function(int)】","code":"import 'package:flutter/cupertino.dart';\nclass CustomCupertinoPicker extends StatelessWidget {\n final names = [\n 'Java',\n 'Kotlin',\n 'Dart',\n 'Swift',\n 'C++',\n 'Python',\n \"JavaScript\",\n \"PHP\",\n \"Go\",\n \"Object-c\"\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 150,\n child: CupertinoPicker(\n backgroundColor: CupertinoColors.systemGrey.withAlpha(33),\n diameterRatio: 1,\n offAxisFraction: 0.4,\n squeeze: 1.5,\n itemExtent: 40,\n onSelectedItemChanged: (position) {\n print('当前条目 ${names[position]}');\n },\n children: names.map((e) => Center(child: Text(e))).toList()),\n );\n }\n}\n"},{"id":null,"widgetId":118,"name":"AnimatedOpacity基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【onEnd】 : 动画结束回调 【Function()】\n【curve】 : 动画曲线 【Duration】\n【opacity】 : 透明度 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedOpacity extends StatefulWidget {\n @override\n _CustomAnimatedOpacityState createState() => _CustomAnimatedOpacityState();\n}\n\nclass _CustomAnimatedOpacityState extends State<CustomAnimatedOpacity> {\n double _opacity = 1.0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: <Widget>[\n Switch(\n value: _opacity == 0,\n onChanged: (v) {\n setState(() {\n _opacity = v ? 0 : 1.0;\n });\n }),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: AnimatedOpacity(\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n opacity: _opacity,\n onEnd: () => print('End'),\n child: Icon(Icons.android, color: Colors.green, size: 60),\n ),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":55,"name":"DropdownButton的样式指定","priority":2,"subtitle":" \n【isDense】 : 是否紧排 【bool】\n【iconSize】 : 图标大小 【double】\n【hint】 : 提示组件 【Widget】\n【iconEnabledColor】 : 图标颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass StyleDropDownButton extends StatefulWidget {\n @override\n _StyleDropDownButtonState createState() => _StyleDropDownButtonState();\n}\n\nclass _StyleDropDownButtonState extends State<StyleDropDownButton> {\n Color _color = Colors.red ;\n final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n final _info = [\"红色\", \"黄色\", \"蓝色\", \"绿色\"];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: <Widget>[\n Container(\n margin: EdgeInsets.symmetric(horizontal: 20),\n width: 50,\n height: 50,\n color: _color??Colors.transparent,\n ),\n DropdownButton<Color>(\n hint: Text('请选择'),\n isDense: true,\n iconSize:20,\n iconEnabledColor:_color??Colors.orange,\n value: _color,\n items: _buildItems(),\n onChanged: (v) => setState(() => _color = v)),\n ],\n );\n }\n\n List<DropdownMenuItem<Color>> _buildItems() => _colors\n .map((e) => DropdownMenuItem<Color>(\n value: e,\n child: Text(\n _info[_colors.indexOf(e)],\n style: TextStyle(color: e),\n )))\n .toList();\n}\n"},{"id":null,"widgetId":55,"name":"DropdownButton基本用法","priority":1,"subtitle":" \n【value】 : 当前值 【T】\n【items】 : 下拉选框 【List<DropdownMenuItem<T>>】\n【icon】 : 图标 【Widget】\n【elevation】 : 影深 【double】\n【onChanged】 : 选择条目事件 【Function(T)】\n【backgroundColor】 : 背景色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomDropDownButton extends StatefulWidget {\n @override\n _CustomDropDownButtonState createState() => _CustomDropDownButtonState();\n}\n\nclass _CustomDropDownButtonState extends State<CustomDropDownButton> {\n Color _color = Colors.red;\n final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green];\n final _info = [\"红色\", \"黄色\", \"蓝色\", \"绿色\"];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: <Widget>[\n Container(\n margin: EdgeInsets.symmetric(horizontal: 20),\n width: 50,\n height: 50,\n color: _color,\n ),\n DropdownButton<Color>(\n value: _color,\n elevation: 1,\n icon: Icon(\n Icons.expand_more,\n size: 20,\n color: _color,\n ),\n items: _buildItems(),\n onChanged: (v) => setState(() => _color = v)),\n ],\n );\n }\n\n List<DropdownMenuItem<Color>> _buildItems() => _colors\n .map((e) => DropdownMenuItem<Color>(\n value: e,\n child: Text(\n _info[_colors.indexOf(e)],\n style: TextStyle(color: e),\n )))\n .toList();\n}"},{"id":null,"widgetId":56,"name":"PopupMenuButton基本使用","priority":1,"subtitle":" \n【itemBuilder】 : 构造器 【PopupMenuItemBuilder<T>】\n【offset】 : 偏移 【Offset】\n【color】 : 背景颜色 【Color】\n【shape】 : 形状 【ShapeBorder】\n【elevation】 : 影深 【double】\n【onCanceled】 : 取消事件 【Function()】\n【onSelected】 : 选择事件 【Function(T)】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomPopupMenuButton extends StatefulWidget {\n @override\n _CustomPopupMenuButtonState createState() => _CustomPopupMenuButtonState();\n}\n\nclass _CustomPopupMenuButtonState extends State<CustomPopupMenuButton> {\n final map = {\n \"关于\": Icons.info_outline,\n \"帮助\": Icons.help_outline,\n \"问题反馈\": Icons.add_comment,\n };\n\n @override\n Widget build(BuildContext context) {\n return PopupMenuButton<String>(\n itemBuilder: (context) => buildItems(),\n offset: Offset(0, 50),\n color: Color(0xffF4FFFA),\n elevation: 1,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20),\n bottomRight: Radius.circular(20),\n topRight: Radius.circular(5),\n bottomLeft: Radius.circular(5),\n )),\n onSelected: (e) {\n print(e);\n if (e == '关于') {\n DialogAbout.show(context);\n }\n },\n onCanceled: () => print('onCanceled'),\n );\n }\n\n List<PopupMenuItem<String>> buildItems() {\n return map.keys\n .toList()\n .map((e) => PopupMenuItem<String>(\n value: e,\n child: Wrap(\n spacing: 10,\n children: <Widget>[\n Icon(\n map[e],\n color: Colors.blue,\n ),\n Text(e),\n ],\n )))\n .toList();\n }\n}\n"},{"id":null,"widgetId":160,"name":"Material的shape属性","priority":2,"subtitle":" \n【shape】 : 形状 【ShapeBorder】,","code":"import 'package:flutter/material.dart';\nclass ShapeMaterial extends StatelessWidget {\n\n final shapeMap = {\n 'BorderDirectional': BorderDirectional(\n top: BorderSide(\n color: Colors.white,\n ),\n start: BorderSide(color: Colors.black, width: 15),\n bottom: BorderSide(\n color: Colors.white,\n )),\n 'Border': Border(\n top: BorderSide(width: 5.0, color: Color(0xFFFFDFDFDF)),\n left: BorderSide(width: 5.0, color: Color(0xFFFFDFDFDF)),\n right: BorderSide(width: 5.0, color: Color(0xFFFF7F7F7F)),\n bottom: BorderSide(width: 5.0, color: Color(0xFFFF7F7F7F)),\n ),\n 'Circle': CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n 'RoundedRectangleBorder': RoundedRectangleBorder(\n side: BorderSide(width: 1.0, color: Colors.black),\n borderRadius: BorderRadius.all(Radius.circular(15))),\n 'ContinuousRectangleBorder': ContinuousRectangleBorder(\n side: BorderSide.none,\n borderRadius: BorderRadius.circular(40.0),\n )\n };\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: shapeMap.keys.map((e) => _buildMaterial(e)).toList());\n }\n\n Material _buildMaterial(String type) => Material(\n shadowColor: Colors.blue,\n shape: shapeMap[type],\n color: Colors.orange,\n elevation: 3,\n textStyle: TextStyle(color: Colors.white),\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 60,\n child: Text(\n type,\n ),\n ),\n );\n}\n"},{"id":null,"widgetId":160,"name":"Material基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【type】 : 类型 【MaterialType】\n【elevation】 : 影深 【double】\n【shadowColor】 : 阴影颜色 【Color】\n【color】 : 颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomMaterial extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: MaterialType.values.map((e) => _buildMaterial(e)).toList());\n }\n\n Material _buildMaterial(MaterialType type) => Material(\n shadowColor: Colors.blue,\n type: type,\n color: Colors.orange,\n elevation: 3,\n child: Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n child: Text(\n type.toString().split('.')[1],\n style: TextStyle(color: Colors.black),\n ),\n ),\n );\n}\n"},{"id":null,"widgetId":194,"name":"Scrollbar基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【controller】 : 控制器 【ScrollController】","code":"import 'package:flutter/material.dart';\nclass CustomScrollbar extends StatelessWidget {\n final data = <Color>[\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scrollbar(\n child: ListView(\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":170,"name":"WillPopScope使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onWillPop】 : 返回回调 【WillPopCallback】","code":"import 'package:flutter/material.dart';\nclass CustomWillPopScope extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: WillPopScope(child: (BackButton()),\n onWillPop: ()=>_willPop(context)),\n );\n }\n\n Future<bool> _willPop(context) async{\n return await showDialog(\n context: context,\n builder: (context) => AlertDialog(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n title: Text('提示'),\n content: Text('你确定要离开此页吗?'),\n actions: <Widget>[\n FlatButton(\n onPressed: () => Navigator.of(context).pop(true),\n child: Text('确定'),\n ),\n FlatButton(\n onPressed: () => Navigator.of(context).pop(false),\n child: Text('取消'),\n ),\n\n ],\n ),\n ) ?? false;\n\n }\n}\n"},{"id":null,"widgetId":151,"name":"TableRowInkWell基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onTap】 : 点击事件 【Function()】\n【onDoubleTap】 : 双击事件 【Function()】\n【onLongPress】 : 长按事件 【Function()】\n【onHighlightChanged】 : 高亮变化回调 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass CustomTableRowInkWell extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var title = _ItemBean(\"单位称\", \"量纲\", \"单位\", \"单位名称\", \"单位符号\");\n var m = _ItemBean(\"长度\", \"L\", \"1m\", \"米\", \"m\");\n var kg = _ItemBean(\"质量\", \"M\", \"1Kg\", \"千克\", \"Kg\");\n var s = _ItemBean(\"时间\", \"T\", \"1s\", \"秒\", \"s\");\n var a = _ItemBean(\"安培\", \"Ι\", \"1A\", \"安培\", \"A\");\n var k = _ItemBean(\"热力学温度\", \"θ\", \"1K\", \"开尔文\", \"K\");\n var mol = _ItemBean(\"物质的量\", \"N\", \"1mol\", \"摩尔\", \"mol\");\n var cd = _ItemBean(\"发光强度\", \"J\", \"1cd\", \"坎德拉\", \"cd\");\n\n var data = <_ItemBean>[title, m, kg, s, a, k, mol, cd];\n\n return SingleChildScrollView(\n scrollDirection: Axis.horizontal,\n child: Table(\n columnWidths: const <int, TableColumnWidth>{\n 0: FixedColumnWidth(80.0),\n 1: FixedColumnWidth(80.0),\n 2: FixedColumnWidth(80.0),\n 3: FixedColumnWidth(80.0),\n 4: FixedColumnWidth(80.0),\n },\n defaultVerticalAlignment: TableCellVerticalAlignment.middle,\n border: TableBorder.all(\n color: Colors.orangeAccent, width: 1.0, style: BorderStyle.solid),\n children: data\n .map((item) => TableRow(children: <Widget>[\n TableRowInkWell(\n onTap: () => print('onTap'),\n onDoubleTap: () => print('onDoubleTap'),\n onLongPress: () => print('onLongPress'),\n onHighlightChanged: (v) => print('onHighlightChanged:$v'),\n child: Center(\n child: Text(\n item.name,\n style: TextStyle(color: Colors.blue),\n )),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.symbol)),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.unitSymbol)),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.unitName)),\n ),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Center(child: Text(item.unit)),\n ),\n ]))\n .toList(),\n ),\n );\n }\n}\n\nclass _ItemBean {\n String name;\n String symbol;\n String unit;\n String unitName;\n String unitSymbol;\n\n _ItemBean(this.name, this.symbol, this.unit, this.unitName, this.unitSymbol);\n}\n\n"},{"id":null,"widgetId":135,"name":"MonthPicker基本使用","priority":1,"subtitle":" \n【selectedDate】 : 选中日期 【DateTime】\n【firstDate】 : 最前日期限制 【DateTime】\n【lastDate】 : 最后日期限制 【DateTime】\n【onChanged】 : 点击回调 【Function(DateTime)】","code":"import 'package:flutter/material.dart';\nclass CustomMonthPicker extends StatefulWidget {\n @override\n _CustomMonthPickerState createState() => _CustomMonthPickerState();\n}\n\nclass _CustomMonthPickerState extends State<CustomMonthPicker> {\n DateTime _date = DateTime.now();\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 350,\n child: MonthPicker(\n selectedDate: _date,\n onChanged: (date) => setState(() => _date = date),\n firstDate: DateTime(2018),\n lastDate: DateTime(2030),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":143,"name":"CupertinoContextMenu基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【actions】 : 行为组件集 【List<Widget>】\n【previewBuilder】 : 动画构造器 【ContextMenuPreviewBuilder】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoContextMenu extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: _buildCupertinoContextMenu(context),\n );\n }\n\n final info= ['保存图片','立刻呼叫','添加到收藏夹'];\n\n Widget _buildCupertinoContextMenu(context) => Container(\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/sabar_bar.jpg'),\n fit: BoxFit.cover),\n borderRadius: BorderRadius.all(Radius.circular(50))),\n width: 100,\n height: 100,\n child: CupertinoContextMenu(\n child: Container(\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/sabar_bar.jpg'),\n fit: BoxFit.cover),\n borderRadius: BorderRadius.all(Radius.circular(50))),\n ),\n actions: info.map((e)=>CupertinoContextMenuAction(\n child: Center(child: Text(e)),\n onPressed: () => Navigator.pop(context),\n )).toList())\n );\n}\n"}] |