diff --git a/assets/data/node.json b/assets/data/node.json new file mode 100644 index 0000000..b27cbda --- /dev/null +++ b/assets/data/node.json @@ -0,0 +1 @@ +[{"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 {\n final Map 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(\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 {\n final Map 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(\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 [\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 {\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 {\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: [\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: [\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】","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: [\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 {\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 {\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 {\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: [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: [\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】\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: [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: [\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 = [\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 = [\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 {\n var _isSelected = [false, false, false];\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: [\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】\n【borderWidth】: 边线宽 【double】\n【borderRadius】: 圆角 【BorderRadius】\n【isSelected】: 是否选中集 【List】\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 {\n var _isSelected = [true, false, false];\n\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: [\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 {\n var _isSelected = [true, false, false];\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: [\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: [\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: [\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: [\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: [\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】\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 {\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: [\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 {\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 {\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: [\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: [\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: [\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】\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: [\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 _buildChild(BuildContext context) {\n return info\n .map((str) => Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\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: [\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: [\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】","code":"import 'package:flutter/material.dart';\nclass CustomTabBar extends StatefulWidget {\n @override\n _CustomTabBarState createState() => _CustomTabBarState();\n}\n\nclass _CustomTabBarState extends State\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\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】","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: [\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: [\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: [\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: [\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: [\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: [\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 {\n int _flexA=1;\n int _flexB=1;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildSliders(),\n Container(\n color: Colors.grey.withAlpha(33),\n child: Row(children: [\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: [\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】\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: [\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: [\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: [\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: [\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】","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: [\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: [\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: [\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 = [\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 = [\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】\n【padding】 : 点击事件 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomListView extends StatelessWidget {\n final data = [\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 = [\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 = [\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 {\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: [\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\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: [\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 {\n final Map map = {\n 'A': 'Ant',\n 'B': 'Bug',\n 'C': 'Cat',\n 'D': 'Dog',\n };\n List _selected = [];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\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\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: [\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 {\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 {\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 {\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 {\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 {\n double _width = 200;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\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: [\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】","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\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 _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】","code":"import 'package:flutter/material.dart';\nclass CustomAboutDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: [\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: [\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 {\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 {\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】\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: [\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: [\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\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: [\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: [\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 {\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 {\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 {\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 {\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】\n【rows】 : 行 【List】","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】","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】\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: [\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: [\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: [\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: [\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 {\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: [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】","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】\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 {\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 {\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: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: [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 {\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: [\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 {\n List _pos = [];\n int selectPos;\n\n @override\n void initState() {\n _initPoints();\n super.initState();\n }\n\n void _initPoints() {\n _pos = List();\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 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 {\n bool _ignore = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\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 {\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: [\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 {\n double _width = 100;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\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: [\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: [\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: [\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】","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: [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 {\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: [\n _buildSlider(),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: [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】","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 {\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: [\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: [\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: [\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 {\n Color _color = Colors.blue.withAlpha(88);\n\n @override\n Widget build(BuildContext context) {\n _color = ColorUtils.randomColor();\n return Column(\n children: [\n Wrap(spacing: 10, runSpacing: 10, children: [\n _buildRandomColor(),\n ...BlendMode.values\n .map((mode) => Column(\n children: [\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 {\n var _height =120.0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: [\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: [\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 [\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: [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 {\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: [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 {\n double _sigmaX = 1.2;\n double _sigmaY = 1.2;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Stack(\n children: [\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: [\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: [\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: [\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 {\n var _height =120.0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: [\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: [\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 {\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: [\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: [\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 {\n var _opacity = 0.2;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [_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 _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 {\n List _pos = [];\n int selectPos;\n\n @override\n void initState() {\n _initPoints();\n super.initState();\n }\n\n void _initPoints() {\n _pos = List();\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 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 {\n var _value = false;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: [_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: [\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: [\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\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: [\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】","code":"import 'package:flutter/material.dart';\nclass CustomFadeTransition extends StatefulWidget {\n @override\n _CustomFadeTransitionState createState() => _CustomFadeTransitionState();\n}\n\nclass _CustomFadeTransitionState extends State\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】","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: [\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 {\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: [\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 {\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: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: [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 {\n double _childW = 20;\n double _childH = 30;\n\n final rainbow = [\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: [\n Wrap(\n spacing: 10,\n runSpacing: 10,\n children: BoxFit.values\n .map((mode) => Column(\n children: [\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: [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: [\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 {\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: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_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: [\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 {\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: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_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: [\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 {\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: [\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: [\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 {\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: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_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 map = {\n 1: 'rotationX',\n 2: 'rotationY',\n 3: 'rotationZ',\n };\n\n Widget _buildSliders() => Column(\n children: [\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 {\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: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_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: [\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 {\n bool _absorbing = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\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 {\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: [\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: [\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: [\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 _buildActions() => [\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】\n【reverse】 : 是否反向 【bool】\n【scrollDirection】 : 滑动方向 【Axis】\n【controller】 : 控制器 【ScrollController】","code":"import 'package:flutter/material.dart';\nclass CustomScrollViewDemo extends StatelessWidget {\n final data = [\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: [_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: [_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 _buildActions() => [\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: [_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 _buildActions() => [\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】\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 {\n bool _floating = false;\n bool _pinned = false;\n bool _snap = false;\n\n final data = [\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: [\n _buildTool(),\n Container(\n height: 300,\n child: CustomScrollView(\n slivers: [\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 _buildActions() => [\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: [\n Wrap(\n direction: Axis.vertical,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\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: [\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: [\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 = [\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: [_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 _buildActions() => [\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 [\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(name),\n slivers: [\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 {\n final data = [\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: [_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 _buildActions() => [\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 = [\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: [\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 _buildActions() => [\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 [\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(name),\n slivers: [\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 {\n final data = [\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: [\n _buildTool(),\n Container(\n height: 300,\n child: CustomScrollView(\n slivers: [_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 _buildActions() => [\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】\n【background】 : 背景组件 【Widget】\n【centerTitle】 : 是否居中 【bool】","code":"import 'package:flutter/material.dart';\nclass FlexibleSpaceBarDemo extends StatelessWidget {\n\n final data = [\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: [\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 _buildActions() => [\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 = [\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: [\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 _buildActions() => [\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】\n【columnWidths】 : 列宽 【Map】\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 {\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: [\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 {\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 loadImageByProvider(\n ImageProvider provider, {\n ImageConfiguration config = ImageConfiguration.empty,\n }) async {\n Completer completer = Completer(); //完成的回调\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: [\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: [\n Divider(),\n Divider(),\n Divider(),\n Divider(),\n Divider(),\n Container(\n height: 100,\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\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 {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: [\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 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 {\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: [\n Container(\n margin: EdgeInsets.symmetric(horizontal: 20),\n width: 50,\n height: 50,\n color: _color,\n ),\n DropdownButtonHideUnderline(\n child: DropdownButton(\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> _buildItems() => _colors\n .map((e) => DropdownMenuItem(\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 {\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 {\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 sizeTween = Tween(\n begin: _disabledThumbSize,\n end: _thumbSize,\n );\n\n @override\n void paint(PaintingContext context, Offset center,\n {Animation activationAnimation,\n Animation 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 sizeTween = Tween(\n begin: _disabledIndicatorSize,\n end: _indicatorSize,\n );\n\n @override\n void paint(PaintingContext context, Offset center,\n {Animation activationAnimation,\n Animation 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 slideUpTween = Tween(\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 {\n final Map map = {\n 'A': 'Ant',\n 'B': 'Bug',\n 'C': 'Cat',\n 'D': 'Dog',\n };\n List _selected = [];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\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: [MaterialBanner(\n content: Text(info),\n leading: Icon(Icons.warning, color: Colors.yellow),\n actions: [\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 {\n double _width = 300.0;\n bool _loose = false;\n\n @override\n Widget build(BuildContext context) {\n return Column(children: [\n Container(\n color: Colors.grey.withAlpha(33),\n width: _width,\n padding: EdgeInsets.all(8.0),\n child: Row(\n children: [\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: [\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 = [\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: [\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: [\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 data) => Column(\n children: [\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\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: [\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: [\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(\n itemBuilder: (context) => buildItems(),\n offset: Offset(0, 50),\n onSelected: print,\n onCanceled: () => print('onCanceled'),\n );\n }\n\n List> buildItems() {\n return map.keys\n .toList()\n .map((e) => PopupMenuItem(\n value: e,\n child: Wrap(\n spacing: 6,\n children: [\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: [\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】\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 {\n var _index = 1;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildSwitch(),\n Container(\n width: 200,\n height: 100,\n color: Colors.grey.withAlpha(33),\n child: IndexedStack(\n index: _index,\n children: [\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】\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: [_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 {\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】\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】\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: [\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: [\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】","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: [\n ListBody(\n mainAxis: Axis.vertical,\n reverse: false,\n children: [\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: [\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】\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: [\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: [\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: [\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】\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: [\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: [\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: [\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: [\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: [\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: [\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: [\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: [\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】\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: [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: [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: [\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: [\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: [\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: [\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: [\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: [\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: [\n blueBox, redBox, greenBox\n ],\n );\n}"},{"id":null,"widgetId":94,"name":"Flex的排布方向","priority":1,"subtitle":" \n【children】 : 组件列表 【List】\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: [\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: [\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: [\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: [\n blueBox, redBox, greenBox\n ],\n );\n}"},{"id":null,"widgetId":99,"name":"Flow圆形排布","priority":1,"subtitle":" \n【children】 : 组件列表 【List】\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 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\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】\n【perspective】 : 透视度 【double】\n【itemExtent】 : item高 【EdgeInsets】\n【onSelectedItemChanged】 : 选中回调 【ValueChanged 】","code":"import 'package:flutter/material.dart';\nclass CustomListWheelScrollView extends StatefulWidget {\n @override\n _CustomListWheelScrollViewState createState() => _CustomListWheelScrollViewState();\n}\n\nclass _CustomListWheelScrollViewState extends State {\n var data = [\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: [\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】\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 {\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: [\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(height: 20,),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n List _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(\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(\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】\n【initialData】 : 初始数据 【T】\n【builder】 : 点击事件 【AsyncWidgetBuilder】","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 {\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: [\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(\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 _controller = StreamController(); //控制器\n\n Stream get state => _controller.stream; //获取状态流\n int get count => _count; //获取计数器数据\n\n void dispose() {//关闭控制器\n _controller.close();\n }\n\n Future increment() async {//增加记数方法\n _controller.add(++_count);\n }\n\n Future 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】\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: [\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\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: [\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: [\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 {\n GlobalKey _formKey = GlobalKey();\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: [\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 _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: [\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: [\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 {\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 _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: [\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】","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\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(\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 {\n var data = [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(\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】\n【onPageChanged】 : 点击事件 【ValueChanged】","code":"import 'package:flutter/material.dart';\nclass CustomPageView extends StatelessWidget {\n final data = [\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 {\n final data = [\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 = [\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】\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 {\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: [\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: [\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 {\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: [\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 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: [\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: [\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】","code":"import 'package:flutter/material.dart';\nclass CustomScaleTransition extends StatefulWidget {\n @override\n _CustomScaleTransitionState createState() => _CustomScaleTransitionState();\n}\n\nclass _CustomScaleTransitionState extends State\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 {\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: [\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: [\n Text(\n \"textAlign属性选择:\",\n style: TextStyle(\n fontSize: 16, color: Colors.blue, fontWeight: FontWeight.bold),\n ),\n DropdownButton(\n underline: Container(),\n value: _textAlign,\n items: TextAlign.values\n .map((e) => DropdownMenuItem(\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 {\n DateTime _date = DateTime.now();\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\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 {\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 {\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】","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\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 {\n var data = [\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】\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\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: [\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 {\n var data = [\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 [\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(name),\n slivers: [\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 {\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: [\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 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: [\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 {\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】\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 {\n\n var data = [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 {\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: [\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】\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 {\n var data = [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 {\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: [\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】\n【onTap】: 点击监听 【GestureTapCallback】\n【onSubmitted】: 提交监听 【ValueChanged】","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 {\n var _value = '';\n var _color =Colors.black;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: [\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 {\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: [\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 {\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 {\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 {\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 {\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 {\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: [\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】\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 {\n var _value = 1;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: CupertinoSegmentedControl(\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】\n【onValueChanged】 : 最小值 【ValueChanged】\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 {\n var _value = 1;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: CupertinoSegmentedControl(\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 {\n double _value = 0.0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\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 {\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】\n【currentStep】 : 当前步骤 【double】\n【onStepTapped】 : 点击回调 【ValueChanged】\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 {\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: [\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 {\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: [\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 {\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: [\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: [\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 {\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: [\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】\n【animationDuration】 : 动画时长 【Duration】\n【expansionCallback】 : 展开回调 【List】\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 {\n var data = [\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: [\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 {\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 {\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】","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\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: [\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】","code":"import 'package:flutter/material.dart';\nclass CustomRotationTransition extends StatefulWidget {\n @override\n _CustomRotationTransitionState createState() => _CustomRotationTransitionState();\n}\n\nclass _CustomRotationTransitionState extends State 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)】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedSwitcher extends StatefulWidget {\n @override\n _CustomAnimatedSwitcherState createState() => _CustomAnimatedSwitcherState();\n}\n\nclass _CustomAnimatedSwitcherState extends State {\n int _count = 0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\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 animation) =>\n ScaleTransition(\n child: RotationTransition(turns: animation, child: child),\n scale: animation),\n child: Text(\n '$_count',\n key: ValueKey(_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: [\n _loadFromAssets(),\n _loadFromNet(),\n ],\n );\n }\n\n Widget _loadFromAssets() => Wrap(\n spacing: 10,\n children: [\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: [\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: [\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: [\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 {\n bool _smallImage = false;\n\n @override\n Widget build(BuildContext context) {\n var imageLi = BoxFit.values\n .toList()\n .map((mode) => Column(children: [\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: [\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: {\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 buildRows(int rowCount, int columnCount) {\n return [\n for (int row = 0; row < rowCount; row += 1)\n TableRow(\n children: [\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\n with SingleTickerProviderStateMixin {\n final TransformationController _transformationController =\n TransformationController();\n Animation _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】\n【valueListenable】: 监听值 【ValueListenable】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass ValueListenableBuilderDemo extends StatelessWidget {\n ValueListenableBuilderDemo({Key key}) : super(key: key);\n\n final ValueNotifier _counter = ValueNotifier(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: [\n Text('You have pushed the button this many times:'),\n ValueListenableBuilder(\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: [\n Text('$value'),\n child,\n ],\n );\n }\n}\n"},{"id":null,"widgetId":177,"name":"ReorderableListView基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List】\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 {\n var data = [\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 {\n var data = [\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】","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\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】\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 {\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: [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 {\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 {\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: [\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(height: 20,),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n List _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(\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(\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 {\n Duration _date = Duration(seconds: 30);\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\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】\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\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: [\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 {\n List 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: [\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(\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 _buildColors() => colors\n .map(\n (e) => Draggable(\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 {\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: [\n Wrap(\n children: _buildColors(),\n spacing: 10,\n ),\n SizedBox(\n height: 20,\n ),\n _buildDragTarget()\n ],\n ),\n );\n }\n\n List _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(\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(\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 {\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: [\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 _buildChildren() => [\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 {\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 】\n【onFieldSubmitted】 : 提交回调 【ValueChanged】\n【onSaved】 : 表单save时回调 【FormFieldSetter】","code":"import 'package:flutter/material.dart';\nclass CustomTextFormField extends StatefulWidget {\n @override\n _CustomTextFormFieldState createState() => _CustomTextFormFieldState();\n}\n\nclass _CustomTextFormFieldState extends State {\n GlobalKey _formKey = GlobalKey();\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: [\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: [_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 {\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 {\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】\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 route, result) {\n print('----_onPopPage-----');\n return true;\n }\n}\n\n//路由监听器\nclass TolyNavigatorObservers extends NavigatorObserver {\n @override\n void didPush(Route route, Route 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 route, Route previousRoute) {\n print(\n '--didStartUserGesture:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');\n }\n\n @override\n void didReplace({Route newRoute, Route oldRoute}) {\n print(\n '--didReplace:--newRoute:--${newRoute.settings}--oldRoute:--${oldRoute.settings}');\n }\n\n @override\n void didRemove(Route route, Route previousRoute) {\n print(\n '--didRemove:--route:--${route.settings}--previousRoute:--${previousRoute.settings}');\n }\n\n @override\n void didPop(Route route, Route 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: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\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 {\n double _value = 0.0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisSize: MainAxisSize.min,\n\n children: [\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 {\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: [\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 {\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: [\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 _buildChildren() => [\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 {\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: [\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 {\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 {\n final GlobalKey _listKey = GlobalKey();\n ListModel _list;\n int _selectedItem;\n int _nextItem;\n\n @override\n void initState() {\n super.initState();\n _list = ListModel(\n listKey: _listKey,\n initialItems: [0, 1, 2, 3],\n removedItemBuilder: _buildRemovedItem,\n );\n _nextItem = 4;\n }\n\n Widget _buildItem(\n BuildContext context, int index, Animation 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 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: [\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: [\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 {\n ListModel({\n @required this.listKey,\n @required this.removedItemBuilder,\n Iterable initialItems,\n }) : assert(listKey != null),\n assert(removedItemBuilder != null),\n _items = List.from(initialItems ?? []);\n final GlobalKey listKey;\n final dynamic removedItemBuilder;\n final List _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 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 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 {\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 {\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 {\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: [\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】","code":"import 'package:flutter/material.dart';\nclass CustomAlignTransition extends StatefulWidget {\n @override\n _CustomAlignTransitionState createState() => _CustomAlignTransitionState();\n}\n\nclass _CustomAlignTransitionState extends State\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 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: [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: [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 extends PageRouteBuilder {\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(\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: [\n _buildPopupMenuButton(context),\n PopupMenuDivider(),\n ],\n ),\n );\n }\n\n PopupMenuButton _buildPopupMenuButton(BuildContext context) {\n return PopupMenuButton(\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> buildItems() {\n return map.keys\n .toList()\n .map((e) => PopupMenuItem(\n value: e,\n child: Wrap(\n spacing: 10,\n children: [\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 = [\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】\n【initialData】 : 初始数据 【T】\n【future】 : 异步任务 【Future】","code":"import 'package:flutter/material.dart';\nclass CustomFutureBuilder extends StatefulWidget {\n @override\n _CustomFutureBuilderState createState() => _CustomFutureBuilderState();\n}\n\nclass _CustomFutureBuilderState extends State {\n Future _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 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: [\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】\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 {\n double _opacity = 1.0;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\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 {\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: [\n Container(\n margin: EdgeInsets.symmetric(horizontal: 20),\n width: 50,\n height: 50,\n color: _color??Colors.transparent,\n ),\n DropdownButton(\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> _buildItems() => _colors\n .map((e) => DropdownMenuItem(\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>】\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 {\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: [\n Container(\n margin: EdgeInsets.symmetric(horizontal: 20),\n width: 50,\n height: 50,\n color: _color,\n ),\n DropdownButton(\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> _buildItems() => _colors\n .map((e) => DropdownMenuItem(\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】\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 {\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(\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> buildItems() {\n return map.keys\n .toList()\n .map((e) => PopupMenuItem(\n value: e,\n child: Wrap(\n spacing: 10,\n children: [\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 = [\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 _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: [\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 {\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: [\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 {\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】\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"}] \ No newline at end of file diff --git a/assets/flutter.db b/assets/flutter.db deleted file mode 100644 index 56ffbbd..0000000 Binary files a/assets/flutter.db and /dev/null differ diff --git a/lib/app/data/flutter_unit_data.dart b/lib/app/data/flutter_unit_data.dart new file mode 100644 index 0000000..9008073 --- /dev/null +++ b/lib/app/data/flutter_unit_data.dart @@ -0,0 +1,2543 @@ +const widgetData = [ + { + "id": 1, + "family": 0, + "name": "Container", + "nameCN": "容器组件", + "lever": 5, + "linkWidget": "74,85,80,78,70,123", + "info": "用于容纳单个子组件的容器组件。集成了若干个单子组件的功能，如内外边距、形变、装饰、约束等...", + "image": "assets/images/widgets/Container.png" + }, + { + "id": 2, + "family": 0, + "name": "Text", + "nameCN": "文字组件", + "lever": 5, + "linkWidget": "101,324", + "info": "用于显示文字的组件。拥有的属性非常多，足够满足你的使用需求,核心样式由style属性控制。", + "image": "assets/images/widgets/Text.png" + }, + { + "id": 3, + "family": 0, + "name": "Card", + "nameCN": "卡片组件", + "lever": 3, + "linkWidget": "160", + "info": " 基于Material组件实现,用于将单个组件卡片化。并使其具有投影效果，可加外边距，也可以自定义卡片形状。", + "image": "assets/images/widgets/Card.png" + }, + { + "id": 4, + "family": 0, + "name": "FlutterLogo", + "lever": 1, + "linkWidget": "", + "nameCN": "Flutter图标", + "info": "用于展示Flutter图标组件。可定义颜色、尺寸、展示模式等信息，是一个非常简单的组件。", + "image": "assets/images/widgets/FlutterLogo.png" + }, + { + "id": 5, + "family": 0, + "name": "Banner", + "lever": 1, + "linkWidget": "", + "nameCN": "角标组件", + "info": "用于角标显示的组件。可容纳一个子组件,可选择方位添加角标及信息文字，可设置颜色。", + "image": "assets/images/widgets/Banner.png" + }, + { + "id": 6, + "family": 0, + "name": "Icon", + "lever": 2, + "linkWidget": "7,30,125", + "nameCN": "图标组件", + "info": "用于图标显示的组件。可指定图标资源、大小、颜色。非常简单，但是非常用", + "image": "assets/images/widgets/Icon.png" + }, + { + "id": 7, + "family": 0, + "name": "ImageIcon", + "linkWidget": "6,30,125", + "nameCN": "容器", + "lever": 1, + "info": "用于将一个图片变为纯色的组件。可指定大小、颜色。", + "image": "assets/images/widgets/ImageIcon.png" + }, + { + "id": 8, + "family": 0, + "name": "FadeInImage", + "nameCN": "淡入图片", + "linkWidget": "38", + "lever": 2, + "info": "透明渐变地加载一张图片。可指定占位图片、进退的动画曲线、时间、宽高、fit类型、对齐方式、重复方式等。", + "image": "" + }, + { + "id": 9, + "family": 0, + "name": "CircleAvatar", + "nameCN": "圆形组件", + "linkWidget": "", + "lever": 4, + "info": "可将一张图片变成圆形，并且中间可以放置一个组件。可指定半径、前景色、背景色等。", + "image": "" + }, + { + "id": 10, + "family": 0, + "name": "Visibility", + "nameCN": "显隐组件", + "linkWidget": "71", + "lever": 3, + "info": "控制一个组件显示或隐藏,可设置隐藏后的占位组件。与其功能相似的由OffStage组件。", + "image": "assets/images/widgets/Visibility.png" + }, + { + "id": 11, + "family": 0, + "name": "Chip", + "nameCN": "小条组件", + "linkWidget": "12,13,14,15,153", + "lever": 4, + "info": "一个横向的圆边小条，可以包含左中右三个组件。可以指定颜色、阴影色和点击事件。", + "image": "assets/images/widgets/Chip.png" + }, + { + "id": 12, + "family": 0, + "name": "ChoiceChip", + "nameCN": "选择小条", + "lever": 3, + "linkWidget": "11,13,14,15,153", + "info": "和Chip组件类似的样式，有一些选择的属性。可以指定选中时的颜色、阴影色和选择事件。", + "image": "assets/images/widgets/ChoiceChip.png" + }, + { + "id": 13, + "family": 0, + "name": "ActionChip", + "nameCN": "事件小条", + "lever": 3, + "linkWidget": "11,12,14,15,153", + "info": "和Chip组件类似的样式，有一些点击的属性。可以指定点击时的阴影深、点击事件。", + "image": "assets/images/widgets/ActionChip.png" + }, + { + "id": 14, + "family": 0, + "name": "InputChip", + "nameCN": "综合小条", + "linkWidget": "11,12,13,15,153", + "lever": 4, + "info": "和Chip组件类似的样式，集成了点击、删除、选择事件为一体。注意:点击事件和选择事件不能同时存在。", + "image": "assets/images/widgets/InputChip.png" + }, + { + "id": 15, + "family": 0, + "name": "FilterChip", + "linkWidget": "11,12,13,14,153", + "nameCN": "过滤小条", + "lever": 4, + "info": "和Chip组件类似的样式，具有选中与否的属性和选中事件。当选中时左侧组件上层会被✔️遮罩。", + "image": "assets/images/widgets/FilterChip.png" + }, + { + "id": 16, + "family": 0, + "name": "ListTile", + "nameCN": "列表瓦片", + "linkWidget": "162,334", + "lever": 3, + "info": "Flutter提供的一个通用列表条目结构，为左中右结构。相应位置可插入组件，可以很方便地应对特定的条目。", + "image": "assets/images/widgets/ListTile.png" + }, + { + "id": 17, + "family": 0, + "name": "CheckboxListTile", + "nameCN": "复选瓦片", + "linkWidget": "39", + "lever": 3, + "info": "Flutter提供的一个通用列表条目结构，为左中结构,尾部是一个CheckBox。相应位置可插入组件，可以很方便地应对特定的条目。", + "image": "assets/images/widgets/CheckBoxListTile.png" + }, + { + "id": 18, + "family": 0, + "name": "SwitchListTile", + "nameCN": "切钮瓦片", + "linkWidget": "40", + "lever": 3, + "info": "Flutter提供的一个通用列表条目结构，为左中结构,尾部是一个Switch。相应位置可插入组件，可以很方便地应对特定的条目。", + "image": "assets/images/widgets/SwitchListTile.png" + }, + { + "id": 19, + "family": 0, + "name": "RadioListTile", + "nameCN": "选钮瓦片", + "linkWidget": "45", + "lever": 3, + "info": "Flutter提供的一个通用列表条目结构，为中右结构,尾部是一个Radio。相应位置可插入组件，可以很方便地应对特定的条目。", + "image": "assets/images/widgets/RadioListTile.png" + }, + { + "id": 20, + "family": 0, + "name": "GridTileBar", + "nameCN": "网格瓦片头", + "linkWidget": "21", + "lever": 2, + "info": + "Flutter提供的一个通用头结构，为左中右结构。相应位置可插入组件，可以很方便地应对特定的条目，相比ListTile而言，属性较少。", + "image": "assets/images/widgets/GridTileBar.png" + }, + { + "id": 21, + "family": 0, + "name": "GridTile", + "nameCN": "网格瓦片", + "linkWidget": "20", + "lever": 3, + "info": "Flutter提供的一个通用列表条目结构，可指定头、尾、子组件，常用于网格列表。", + "image": "assets/images/widgets/GridTile.png" + }, + { + "id": 22, + "family": 0, + "name": "UserAccountsDrawerHeader", + "nameCN": "展示头", + "linkWidget": "154", + "lever": 3.8, + "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目,常用于Drawer中。", + "image": "assets/images/widgets/UserAccountsDrawerHeader.png" + }, + { + "id": 23, + "family": 0, + "name": "MaterialButton", + "nameCN": "材料按钮", + "linkWidget": "25,26,27,326,175", + "lever": 4, + "info": + "基于RawMaterialButton实现的通用Material按钮。可盛放一个子组件,能定义颜色、形状等表现,可接收点击和长按事件。", + "image": "" + }, + { + "id": 24, + "family": 1, + "name": "CupertinoButton", + "nameCN": "iOS按钮", + "linkWidget": "23", + "lever": 3, + "info": "iOS风格的按钮。可指定颜色、点击时透明度、内边距、圆角等。可接收点击事件。", + "image": "" + }, + { + "id": 25, + "family": 0, + "name": "FlatButton", + "nameCN": "平按钮", + "linkWidget": "24,26,27,175", + "lever": 3, + "info": "无阴影的平按钮，基于MaterialButton实现，所有属性和MaterialButton类似。", + "image": "" + }, + { + "id": 26, + "family": 0, + "name": "RaisedButton", + "nameCN": "浮起按钮", + "linkWidget": "24,25,27,175", + "lever": 3, + "info": "有阴影的浮起按钮，基于MaterialButton实现，所有属性和MaterialButton类似。", + "image": "" + }, + { + "id": 27, + "family": 0, + "name": "OutlineButton", + "nameCN": "线框按钮", + "linkWidget": "23,24,25,175", + "lever": 3, + "info": "边框样式按钮，基于MaterialButton实现，所有属性和MaterialButton类似。", + "image": "" + }, + { + "id": 28, + "family": 0, + "name": "FloatingActionButton", + "nameCN": "浮动按钮", + "linkWidget": "64", + "lever": 4, + "info": "浮动按钮，一般用于Scaffold中，可摆放在特定位置。可盛放一个子组件,接收点击、可定义颜色、形状等。", + "image": "" + }, + { + "id": 29, + "family": 0, + "name": "ButtonBar", + "nameCN": "按钮栏", + "linkWidget": "", + "lever": 3, + "info": "接收组件列表，常用于盛放若干个按钮。可指定对齐方式、边距等信息。", + "image": "" + }, + { + "id": 30, + "family": 0, + "name": "IconButton", + "nameCN": "图标按钮", + "linkWidget": "6", + "lever": 2, + "info": "可点击的图标按钮，可指定图标信息、内边距、大小、颜色等，接收点击事件。", + "image": "" + }, + { + "id": 31, + "family": 0, + "name": "BackButton", + "nameCN": "返回按钮", + "linkWidget": "30", + "lever": 1, + "info": "一个具有返回功能的IconButton,返回图标不可更改。在iOS和Android中表现不同", + "image": "" + }, + { + "id": 32, + "family": 0, + "name": "CloseButton", + "nameCN": "关闭按钮", + "linkWidget": "30", + "lever": 1.0, + "info": "一个具有关闭功能的IconButton,关闭图标不可更改。", + "image": "" + }, + { + "id": 33, + "family": 0, + "name": "ToggleButtons", + "nameCN": "切换按钮组", + "linkWidget": "332,262", + "lever": 4, + "info": "接收组件列表，可指定边线、圆角、颜色等属性。根据具体逻辑，可以实现多个按钮单选或多选的需求。", + "image": "" + }, + { + "id": 34, + "family": 0, + "name": "Divider", + "nameCN": "水平分割线", + "linkWidget": "35,329", + "lever": 2, + "info": "水平分割线，可指定颜色、高度、粗细、左右边距信息，常用与列表的item分割线。", + "image": "" + }, + { + "id": 35, + "family": 0, + "name": "VerticalDivider", + "nameCN": "竖直分割线", + "linkWidget": "34,329", + "lever": 2, + "info": "竖直分割线，可指定颜色、宽度、粗细、上下边距信息，常用与列表的item分割线。", + "image": "" + }, + { + "id": 36, + "family": 0, + "name": "Placeholder", + "nameCN": "占位组件", + "linkWidget": "", + "lever": 1, + "info": "一个矩形和叉叉的占位组件,可指定颜色、线宽、宽高等属性。", + "image": "" + }, + { + "id": 37, + "family": 0, + "name": "GridPager", + "nameCN": "网格线组件", + "linkWidget": "", + "lever": 2, + "info": "可容纳一个组件，在其上绘制网格。可指定颜色、线宽、间距等属性。", + "image": "" + }, + { + "id": 38, + "family": 1, + "name": "Image", + "nameCN": "图片组件", + "linkWidget": "8,87", + "lever": 5, + "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "image": "" + }, + { + "id": 39, + "family": 1, + "name": "Checkbox", + "nameCN": "复选框", + "linkWidget": "17", + "lever": 4, + "info": "复选框组件，常用于配置的切换，可指定颜色，接收状态变化回调，也可指定三态。", + "image": "" + }, + { + "id": 40, + "family": 1, + "name": "Switch", + "nameCN": "切钮", + "linkWidget": "41,18", + "lever": 4, + "info": "切换选钮,常用于配置的切换，可指定小圆颜色、图片，滑槽颜色等，接收状态变化回调。", + "image": "" + }, + { + "id": 41, + "family": 1, + "name": "CupertinoSwitch", + "nameCN": "iOS切钮", + "linkWidget": "40", + "lever": 3, + "info": "iOS风格的切换选钮,常用于配置的切换，可指定颜色，接收状态变化回调。", + "image": "" + }, + { + "id": 42, + "family": 1, + "name": "Slider", + "nameCN": "滑块", + "linkWidget": "43,44,331", + "lever": 4, + "info": "滑块组件，可以在指定的最大值和最小值之间拖动选择。可指定颜色、分段数及显示的标签，接收进度变化回调。", + "image": "" + }, + { + "id": 43, + "family": 1, + "name": "CupertinoSlider", + "linkWidget": "42", + "nameCN": "iOS滑块", + "lever": 3, + "info": "iOS风格的滑块组件，可以在指定的最大值和最小值之间拖动选择。可指定颜色，接收进度变化回调。", + "image": "" + }, + { + "id": 44, + "family": 1, + "name": "RangeSlider", + "nameCN": "范围滑块", + "linkWidget": "42", + "lever": 4, + "info": "范围滑块组件，支持两点拖动，获取之间的范围。可指定颜色、分段数及显示的标签，接收进度变化回调。", + "image": "" + }, + { + "id": 45, + "family": 1, + "name": "Radio", + "nameCN": "选钮", + "linkWidget": "19", + "lever": 4, + "info": "由于选中和未选择状态的圆钮，多个Radio根据逻辑可以实现单选或多选的需求。可指定颜色，接收状态变化回调。", + "image": "" + }, + { + "id": 46, + "family": 1, + "name": "CircularProgressIndicator", + "nameCN": "圆形进度", + "linkWidget": "47,48", + "lever": 3, + "info": "圆形的进度显示,可指定颜色、线宽、进度等属性。value为null时会不停旋转。", + "image": "" + }, + { + "id": 47, + "family": 1, + "name": "LinearProgressIndicator", + "nameCN": "水平进度", + "linkWidget": "46,48", + "lever": 3, + "info": "直线型的进度显示,可指定颜色、进度等属性。value为null时会不停旋转。", + "image": "" + }, + { + "id": 48, + "family": 1, + "name": "CupertinoActivityIndicator", + "nameCN": "iOS指示器", + "linkWidget": "46,47", + "lever": 2, + "info": "iOS样式的loading显示组件，可指定半径和是否旋转。", + "image": "" + }, + { + "id": 49, + "family": 1, + "name": "RefreshIndicator", + "nameCN": "刷新指示器", + "linkWidget": "", + "lever": 4, + "info": "内部嵌套可滑动区域，下滑时会显示刷新图标，松手后可以执行指定的异步方法。可指定颜色、到顶端距离等属性。", + "image": "" + }, + { + "id": 50, + "family": 1, + "name": "Tooltip", + "nameCN": "提示工具", + "linkWidget": "", + "lever": 3, + "info": "由于显示提示信息的组件，长按时显示信息。可指定边距、显示时长、文字样式、装饰灯属性。", + "image": "" + }, + { + "id": 51, + "family": 1, + "name": "ExpandIcon", + "nameCN": "展开图标", + "linkWidget": "66,125", + "lever": 1, + "info": "一个展开按钮，点击时会自己执行旋转180的动画。可指定颜色、大小、边距，接收点击事件。", + "image": "" + }, + { + "id": 52, + "family": 1, + "name": "ExpansionTile", + "nameCN": "展开瓦片", + "linkWidget": "178", + "lever": 3, + "info": "一个通用的展开栏,可在指定的部位安放组件,点击时会折叠显隐下方组件。接收折叠时事件。", + "image": "" + }, + { + "id": 53, + "family": 1, + "name": "SelectableText", + "nameCN": "可选择文字", + "linkWidget": "2", + "lever": 3, + "info": "可选择的文字，可以选择、复制。可指定浮标的颜色、大小、文字样式、对齐方式等。", + "image": "" + }, + { + "id": 54, + "family": 1, + "name": "TextField", + "nameCN": "输入框", + "linkWidget": "199", + "lever": 5, + "info": "由于输入的组件，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。", + "image": "" + }, + { + "id": 55, + "family": 1, + "name": "DropdownButton", + "nameCN": "下拉按钮", + "linkWidget": "181", + "lever": 4, + "info": "用于下拉选择的按钮，可指定图标、影深、提示等属性，接收选中变化的事件。", + "image": "" + }, + { + "id": 56, + "family": 1, + "name": "PopupMenuButton", + "nameCN": "菜单按钮", + "linkWidget": "174", + "lever": 4, + "info": "弹出菜单栏,可指定偏移、颜色、影深、形状等属性。接收item选中的事件和取消选择事件。", + "image": "" + }, + { + "id": 57, + "family": 1, + "name": "AppBar", + "nameCN": "应用头栏", + "linkWidget": "64", + "lever": 4, + "info": "一个应用顶部栏的通用结构，可在指定的部位放置相应的组件，常用于Scaffold组件中。", + "image": "" + }, + { + "id": 58, + "family": 1, + "name": "TabBar", + "nameCN": "标签栏", + "linkWidget": "57,59,148", + "lever": 3, + "info": "可滑动和点击标签栏，通常用于AppBar的底部,可与TabBarView联用，实现滑页的效果。", + "image": "" + }, + { + "id": 59, + "family": 1, + "name": "TabBarView", + "nameCN": "标签页", + "linkWidget": "58", + "lever": 2, + "info": "通常与TabBar联用，实现滑页的效果。一般不单独使用。", + "image": "" + }, + { + "id": 60, + "family": 1, + "name": "BottomNavigationBar", + "nameCN": "底部导航", + "linkWidget": "61", + "lever": 4, + "info": "一个底部导航栏，通常用于Scaffold组件的底部，可指定颜色和模式，接受点击回调，可与PageView实现切页效果。", + "image": "" + }, + { + "id": 61, + "family": 1, + "name": "BottomAppBar", + "nameCN": "底部导航", + "linkWidget": "60", + "lever": 4, + "info": "一个可凹嵌的底部导航栏，通常用于Scaffold组件的底部，可指定颜色、影深、形状等属性，可与PageView实现切页效果。", + "image": "" + }, + { + "id": 62, + "family": 1, + "name": "CupertinoNavigationBar", + "nameCN": "iOS导航", + "linkWidget": "", + "lever": 3, + "info": "一个iOS风格的应用顶部栏的通用结构，可在指定的部位放置相应的组件。可指定背景色、间距、边线等属性。", + "image": "" + }, + { + "id": 63, + "family": 1, + "name": "CupertinoTabBar", + "nameCN": "iOS页签", + "linkWidget": "158", + "lever": 3, + "info": + "一个iOS风格的TabBar,通常用于CupertinoTabScaffold。可指定颜色、图标大小、边线等数据。接收item的点击事件。", + "image": "" + }, + { + "id": 64, + "family": 1, + "name": "Scaffold", + "nameCN": "脚手架", + "linkWidget": "57,60,61", + "lever": 4, + "info": "一个通用app结构，包括上、下、左、右、中、浮动按钮部位，对应位置可盛放组件。", + "image": "" + }, + { + "id": 65, + "family": 1, + "name": "MaterialApp", + "nameCN": "Material应用", + "linkWidget": "64", + "lever": 5, + "info": "Material应用的顶级组件，包含路由生成器、主题、语言、主页等属性。", + "image": "" + }, + { + "id": 66, + "family": 2, + "name": "ClipOval", + "nameCN": "椭圆裁剪", + "linkWidget": "67,68,69", + "lever": 3, + "info": "可容纳一个子组件，并将其以宽高为长轴和短轴进行椭圆裁切。", + "image": "" + }, + { + "id": 67, + "family": 2, + "name": "ClipRect", + "nameCN": "矩形裁剪", + "linkWidget": "66,68,69", + "lever": 3, + "info": "可容纳一个子组件，并将其进行矩形裁切。可借助SizedBox、Align、AspectRadio等限定组件进行定域。", + "image": "" + }, + { + "id": 68, + "family": 2, + "name": "ClipRRect", + "nameCN": "圆角矩形裁剪", + "linkWidget": "66,67,69", + "lever": 3, + "info": "可容纳一个子组件，并将其进行圆角矩形裁剪。指定borderRadius作为边角半径。", + "image": "" + }, + { + "id": 69, + "family": 2, + "name": "ClipPath", + "nameCN": "路径裁剪", + "linkWidget": "66,67,68", + "lever": 5, + "info": "可容纳一个子组件，并将其按指定路径进行裁剪。可以自定义路径形状，是一个很灵活的裁剪组件。", + "image": "" + }, + { + "id": 70, + "family": 2, + "name": "DecoratedBox", + "nameCN": "装饰盒", + "linkWidget": "1", + "lever": 4, + "info": "可容纳一个子组件，可将其进行装饰。核心属性为decoration,可设置边线、渐变、阴影、背景图等。", + "image": "" + }, + { + "id": 71, + "family": 2, + "name": "Offstage", + "nameCN": "消失组件", + "linkWidget": "10", + "lever": 3, + "info": "可容纳一个子组件，可更改其的消失与否。offstage属性为true表示隐藏。", + "image": "" + }, + { + "id": 72, + "family": 2, + "name": "RotatedBox", + "nameCN": "旋转盒", + "linkWidget": "90", + "lever": 2, + "info": "可容纳一个子组件，将其沿顺时针旋转quarterTurns*90°。", + "image": "" + }, + { + "id": 73, + "family": 2, + "name": "Opacity", + "nameCN": "透明化", + "linkWidget": "89,118", + "lever": 3, + "info": "可容纳一个子组件，将其透明度变为opacity值, opacity在0~1之间。", + "image": "" + }, + { + "id": 74, + "family": 2, + "name": "Padding", + "nameCN": "边距组件", + "linkWidget": "1,191", + "lever": 4, + "info": "可容纳一个子组件，添加自身内边距来限制孩子组件的占位,核心属性为padding。", + "image": "" + }, + { + "id": 75, + "family": 2, + "name": "Baseline", + "nameCN": "基线组件", + "linkWidget": "2", + "lever": 2, + "info": "可容纳一个子组件，通过控制基线高度来控制子组件的位置。一般用于文字组件。", + "image": "" + }, + { + "id": 76, + "family": 2, + "name": "SizedBox", + "nameCN": "定尺寸盒", + "linkWidget": "1", + "lever": 4, + "info": "可容纳一个子组件，通过指定宽高限定子组件容身区域。", + "image": "" + }, + { + "id": 77, + "family": 2, + "name": "AspectRatio", + "nameCN": "比例盒", + "linkWidget": "82", + "lever": 3, + "info": "可容纳一个子组件，通过指定宽高比aspectRatio，来限定子组件容身区域。", + "image": "" + }, + { + "id": 78, + "family": 2, + "name": "Transform", + "nameCN": "变换", + "linkWidget": "1", + "lever": 4, + "info": "可容纳一个子组件，可以通过一个4*4的变换矩阵对子组件进行变换。", + "image": "" + }, + { + "id": 79, + "family": 2, + "name": "LimitedBox", + "nameCN": "限制盒", + "linkWidget": "80", + "lever": 3, + "info": "可容纳一个子组件，通过指定最大宽高来限定子组件容身区域。", + "image": "" + }, + { + "id": 80, + "family": 2, + "name": "ConstrainedBox", + "nameCN": "约束盒", + "linkWidget": "1,79,81", + "lever": 3, + "info": "可容纳一个子组件，通过指定最大、最小宽高,来限定子组件容身区域。", + "image": "" + }, + { + "id": 81, + "family": 2, + "name": "UnconstrainedBox", + "nameCN": "约束盒", + "linkWidget": "80", + "lever": 3, + "info": "可容纳一个子组件，并解除该组件的所有区域约束,展现自我尺寸。", + "image": "" + }, + { + "id": 82, + "family": 2, + "name": "FractionallySizedBox", + "nameCN": "分率盒", + "linkWidget": "77", + "lever": 3, + "info": "可容纳一个子组件，指定宽高分率,限定子组件区域为父容器宽高*各分率，及对齐方式alignment。", + "image": "" + }, + { + "id": 83, + "family": 2, + "name": "OverflowBox", + "nameCN": "溢出盒", + "linkWidget": "84", + "lever": 4, + "info": "可容纳一个子组件，且子组件允许溢出父组件区域，可以指定宽高的最大最小区域进行限定，拥有对齐属性alignment。", + "image": "" + }, + { + "id": 84, + "family": 2, + "name": "SizedOverflowBox", + "nameCN": "尺寸溢出盒", + "linkWidget": "83", + "lever": 2.8, + "info": "可容纳一个子组件，且子组件允许溢出父组件区域，可以通过size属性对子组件进行偏移，拥有对齐属性alignment。", + "image": "" + }, + { + "id": 85, + "family": 2, + "name": "Align", + "nameCN": "对齐组件", + "linkWidget": "1,86,111,120", + "lever": 5, + "info": "可容纳一个子组件，可以通过alignment让子组件，定位在父组件宽高的任何指定分率出。", + "image": "" + }, + { + "id": 86, + "family": 2, + "name": "Center", + "nameCN": "居中组件", + "linkWidget": "85", + "lever": 3, + "info": "可容纳一个子组件，并使其居中于父组件，是Align组件的一种精简模式。", + "image": "" + }, + { + "id": 87, + "family": 2, + "name": "FittedBox", + "nameCN": "适应盒", + "linkWidget": "38", + "lever": 4, + "info": "可容纳一个子组件，使用fit属性决定子组件区域相当于父组件的适应模式，拥有对齐属性alignment。", + "image": "" + }, + { + "id": 88, + "family": 2, + "name": "ColorFiltered", + "nameCN": "滤色器", + "linkWidget": "277,38", + "lever": 5, + "info": "可容纳一个子组件，可以并将组件按照29中叠色模式和任意组件混合，强大到我不知道该说什么好。app一键全灰了解一下。", + "image": "" + }, + { + "id": 89, + "family": 2, + "name": "FadeTransition", + "nameCN": "透明变换", + "linkWidget": "73,118", + "lever": 3, + "info": "可容纳一个子组件，并使其进行透明度渐变动画，需要提供动画器opacity。", + "image": "" + }, + { + "id": 90, + "family": 1, + "name": "RotationTransition", + "nameCN": "旋转变换", + "linkWidget": "72", + "lever": 3, + "info": "可容纳一个子组件，并使其进行旋转动画，需要提供动画器turns，拥有alignment属性。", + "image": "" + }, + { + "id": 91, + "family": 1, + "name": "ScaleTransition", + "nameCN": "缩放变换", + "linkWidget": "", + "lever": 3, + "info": "可容纳一个子组件，并使其进行缩放动画，需要提供动画器scale，拥有alignment属性。", + "image": "" + }, + { + "id": 92, + "family": 1, + "name": "SizeTransition", + "nameCN": "尺寸变换", + "linkWidget": "201", + "lever": 3, + "info": "可容纳一个子组件，并使其进行尺寸动画，需要提供动画器sizeFactor，可指定尺寸变化轴及轴向的axisAlignment。", + "image": "" + }, + { + "id": 93, + "family": 1, + "name": "PositionedTransition", + "nameCN": "位置变换", + "linkWidget": "97", + "lever": 3, + "info": "只能用于Stack中,可容纳一个子组件，让其在两个矩形间进行位置动画，需要提供动画器rect。", + "image": "" + }, + { + "id": 94, + "family": 3, + "name": "Flex", + "nameCN": "弹性布局", + "linkWidget": "95,96,106,107,109", + "lever": 5, + "info": + "Row和Column的父类,Flutter中最强大的布局方式。可容纳多个组件，可与Spacer、Expended、Flexible组件联用进行灵活布局", + "image": "" + }, + { + "id": 95, + "family": 3, + "name": "Row", + "nameCN": "行布局", + "linkWidget": "94,96", + "lever": 4, + "info": "排布方向为横向的Flex布局，可容纳多个组件。其他属性全部一致，详见Flex。", + "image": "" + }, + { + "id": 96, + "family": 3, + "name": "Column", + "nameCN": "列布局", + "linkWidget": "94,95", + "lever": 4, + "info": "排布方向为竖向的Flex布局，可容纳多个组件。其他属性全部一致，详见Flex。", + "image": "" + }, + { + "id": 97, + "family": 3, + "name": "Stack", + "nameCN": "堆叠布局", + "linkWidget": "94,95,161", + "lever": 5, + "info": "可容纳多个组件,以堆叠的方式摆放子组件，后者居上。拥有alignment属性，可与Positioned组件联合使用，精确定位。", + "image": "" + }, + { + "id": 98, + "family": 3, + "name": "Wrap", + "nameCN": "包裹布局", + "linkWidget": "94,95", + "lever": 5, + "info": "可容纳多个组件,按照指定方向依次排布，可以很方便处理孩子的间距,当越界时可以自动换行。拥有主轴和交叉轴的对齐方式，比较灵活。", + "image": "" + }, + { + "id": 99, + "family": 3, + "name": "Flow", + "nameCN": "流动布局", + "linkWidget": "98,94", + "lever": 5, + "info": "可容纳多个组件, 需要自己制定排布的代理，可以高强度自定义组件的排布，实现普通布局无法达到的效果。布局王者，当之无愧。", + "image": "" + }, + { + "id": 100, + "family": 1, + "name": "AnimatedCrossFade", + "nameCN": "组件切换", + "linkWidget": "116", + "lever": 5, + "info": "将两个组件切换时呈现动画效果，可指定动画曲线、时长、对齐方式等属性。是一个非常有用的组件。", + "image": "" + }, + { + "id": 101, + "family": 3, + "name": "RichText", + "nameCN": "富文本", + "linkWidget": "2", + "lever": 5, + "info": "可以容纳多种文字样式或各种组件的富文本组件，应用较为广泛。", + "image": "" + }, + { + "id": 102, + "family": 0, + "name": "DataTable", + "nameCN": "数据表格", + "linkWidget": "110", + "lever": 3, + "info": "一个表格组件，可以制订逻辑进行点击、修改、排序等操作。", + "image": "" + }, + { + "id": 103, + "family": 1, + "name": "Draggable", + "nameCN": "可拖拽组件", + "linkWidget": "104,105", + "lever": 4, + "info": "可以让组件在界面上任意拖拽,可存放一个泛型T的数据。通常和DragTarget组合使用，来完成拖拽效果。", + "image": "" + }, + { + "id": 104, + "family": 1, + "name": "DragTarget", + "nameCN": "拖拽目标", + "linkWidget": "103,105", + "lever": 4, + "info": "一个拖拽的目标区域，可接收Draggable组件的信息。可以获取拖拽时的回调。", + "image": "" + }, + { + "id": 105, + "family": 1, + "name": "LongPressDraggable", + "nameCN": "拖拽目标", + "linkWidget": "103,104", + "lever": 4, + "info": "长按时让组件在界面上任意拖拽,可存放一个泛型T的数据。通常和DragTarget组合使用，来完成拖拽效果。", + "image": "" + }, + { + "id": 106, + "family": 5, + "name": "Expanded", + "nameCN": "延展组件", + "linkWidget": "94,109", + "lever": 4, + "info": "父类是Flexible，相当于一个fit类型为tight的Flexible组件。可嵌套孩子利用剩余空间对占位空间进行延展。", + "image": "" + }, + { + "id": 107, + "family": 0, + "name": "Spacer", + "nameCN": "空间组件", + "linkWidget": "94", + "lever": 3, + "info": "只能用于Row、Column和Flex布局中,可利用剩余空间进行占位，使用flex属性可以给多个Spacer按比例分配空间。", + "image": "" + }, + { + "id": 108, + "family": 5, + "name": "Positioned", + "nameCN": "定位组件", + "linkWidget": "97,159,121", + "lever": 3, + "info": "只能用于Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。", + "image": "" + }, + { + "id": 109, + "family": 5, + "name": "Flexible", + "nameCN": "灵活组件", + "linkWidget": "94,106", + "lever": 3, + "info": "只能用于只能用于Row、Column和Flex布局中，可嵌套孩子利用剩余空间对占位空间进行延展,也可指定适应类型。", + "image": "" + }, + { + "id": 110, + "family": 6, + "name": "Table", + "nameCN": "表格组件", + "linkWidget": "102", + "lever": 4, + "info": "用于展示表格的组件,可指定边线、列宽、文字方向等属性,核心对象类型是TableRow。", + "image": "" + }, + { + "id": 111, + "family": 1, + "name": "AlignTransition", + "nameCN": "对齐变换", + "linkWidget": "85,120", + "lever": 3, + "info": "AnimatedWidget的子类,使用Alignment类型的动画器让子组件在两个Alignment对象之间进行过渡动画。", + "image": "" + }, + { + "id": 112, + "family": 1, + "name": "SlideTransition", + "nameCN": "滑动变换", + "linkWidget": "", + "lever": 3, + "info": "AnimatedWidget的子类,使用Offset类型的动画器让子组件在两个Offset对象之间进行过渡动画。", + "image": "" + }, + { + "id": 113, + "family": 1, + "name": "DecoratedBoxTransition", + "nameCN": "装饰变换", + "linkWidget": "70", + "lever": 3, + "info": "AnimatedWidget的子类,使用Decorated类型的动画器让子组件在两个Decorated对象之间进行过渡动画。", + "image": "" + }, + { + "id": 114, + "family": 1, + "name": "DefaultTextStyleTransition", + "nameCN": "文字样式变换", + "linkWidget": "124,324", + "lever": 3, + "info": "AnimatedWidget的子类,使用TextStyle类型的动画器让文字组件在两个TextStyle对象之间进行过渡动画。", + "image": "" + }, + { + "id": 115, + "family": 1, + "name": "RelativePositionedTransition", + "nameCN": "矩形位置变换", + "linkWidget": "70", + "lever": 3, + "info": "AnimatedWidget的子类,使用Rect类型的动画器让子组件在两个Rect对象之间进行过渡动画。", + "image": "" + }, + { + "id": 116, + "family": 1, + "name": "AnimatedSwitcher", + "nameCN": "动画切换", + "linkWidget": "100", + "lever": 4, + "info": "当子组件变化时执行动画，需要指定子组件的key进行标识。动画方式可以自定义,能指定动画时长、动画曲线等属性。", + "image": "" + }, + { + "id": 117, + "family": 1, + "name": "AnimatedList", + "nameCN": "动画列表", + "linkWidget": "162", + "lever": 3, + "info": "强化版的ListView,可以对item进行动画处理。比如在添加、删除是item的动画。", + "image": "" + }, + { + "id": 118, + "family": 1, + "name": "AnimatedOpacity", + "nameCN": "透明动画", + "linkWidget": "89,73", + "lever": 3, + "info": "能让子组件进行Opacity(透明度)动画，可指定时长和曲线，有动画结束事件。", + "image": "" + }, + { + "id": 119, + "family": 1, + "name": "AnimatedPadding", + "nameCN": "边距动画", + "linkWidget": "74", + "lever": 3, + "info": "能让子组件进行Padding(内边距)动画，可指定时长和曲线，有动画结束事件。", + "image": "" + }, + { + "id": 120, + "family": 1, + "name": "AnimatedAlign", + "nameCN": "对齐动画", + "linkWidget": "85,111", + "lever": 3, + "info": "能让子组件进行Align(对齐)动画，可指定时长和曲线，有动画结束事件。", + "image": "" + }, + { + "id": 121, + "family": 1, + "name": "AnimatedPositioned", + "nameCN": "定位动画", + "linkWidget": "108,93,122", + "lever": 3, + "info": "能让子组件进行Positioned(定位)动画，可指定时长和曲线，有动画结束事件。只能用于Stack之中。", + "image": "" + }, + { + "id": 122, + "family": 1, + "name": "AnimatedPositionedDirectional", + "nameCN": "方向定位动画", + "linkWidget": "121,159", + "lever": 3, + "info": + "能让子组件进行PositionedDirectional(方向定位)动画，可指定时长和曲线，有动画结束事件。只能用于Stack之中。", + "image": "" + }, + { + "id": 123, + "family": 1, + "name": "AnimatedContainer", + "nameCN": "容器动画", + "linkWidget": "1", + "lever": 5, + "info": + "集合alignment、padding、color、decoration、width、height、constraints、margin、transform于一身，这些属性皆可动画，可指定时长和曲线，有动画结束事件。", + "image": "" + }, + { + "id": 124, + "family": 1, + "name": "AnimatedDefaultTextStyle", + "nameCN": "容器动画", + "linkWidget": "114,324", + "lever": 3, + "info": "能让子文字组件进行TextStyle(文字样式)动画，可指定时长和曲线，有动画结束事件。", + "image": "" + }, + { + "id": 125, + "family": 0, + "name": "AnimatedIcon", + "nameCN": "图标动画", + "linkWidget": "6", + "lever": 3, + "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "image": "" + }, + { + "id": 126, + "family": 0, + "name": "Dialog", + "nameCN": "对话框", + "linkWidget": "", + "lever": 2, + "info": "最简易的对话框面板,包含一个内容组件,可指定影深、背景色、形状等属性。", + "image": "" + }, + { + "id": 127, + "family": 0, + "name": "AlertDialog", + "nameCN": "弹出对话框", + "linkWidget": "129", + "lever": 3, + "info": "一个通用的对话框结构，可指定头、中、尾处的组件。拥有标题、内容的文字样式和边距，影深、形状等属性。", + "image": "" + }, + { + "id": 128, + "family": 0, + "name": "SimpleDialog", + "nameCN": "简单对话框", + "linkWidget": "133", + "lever": 3, + "info": + "一个简单的对话框结构，可指定头、中处的组件。拥有拥有标题、内容的文字样式和边距，影深、形状等属性。常与SimpleDialogOption联用。", + "image": "" + }, + { + "id": 129, + "family": 0, + "name": "CupertinoAlertDialog", + "nameCN": "iOS对话框", + "linkWidget": "127", + "lever": 3, + "info": "iOS风格的通用的对话框结构，可指定头、中、尾处的组件。", + "image": "" + }, + { + "id": 130, + "family": 0, + "name": "AboutDialog", + "nameCN": "弹出对话框", + "linkWidget": "193", + "lever": 1, + "info": "应用的简介对话框，可指定应用图标、应用名、应用版本号等信息和内部的子组件列表，点击左侧按钮可以跳转到证书页。", + "image": "" + }, + { + "id": 131, + "family": 0, + "name": "CupertinoActionSheet", + "nameCN": "iOS行为单", + "linkWidget": "132", + "lever": 3, + "info": "iOS风格的弹出选择结构，可放多的按钮，一般与CupertinoActionSheetAction联用。", + "image": "" + }, + { + "id": 132, + "family": 0, + "name": "CupertinoActionSheetAction", + "nameCN": "iOS行为单按键", + "linkWidget": "131", + "lever": 1, + "info": "一个按钮，应用场景很少，通常用于CupertinoActionSheet中，接收点击事件。", + "image": "" + }, + { + "id": 133, + "family": 0, + "name": "SimpleDialogOption", + "nameCN": "简单对话框选项", + "linkWidget": "128", + "lever": 1, + "info": "一个按钮，应用场景很少，通常用于SimpleDialog中，接收点击事件。", + "image": "" + }, + { + "id": 134, + "family": 0, + "name": "DayPicker", + "nameCN": "日期选择器", + "linkWidget": "135,136", + "lever": 3, + "info": "日期的选择组件，可指定当前日期、选中日期、展示月份等，接收日期选中事件。", + "image": "" + }, + { + "id": 135, + "family": 1, + "name": "MonthPicker", + "nameCN": "月份选择器", + "linkWidget": "134,136", + "lever": 3, + "info": "月份的选择组件，自带上下月切换的监听。可指定选择的日期范围、选中日期等，接收日期选中事件。", + "image": "" + }, + { + "id": 136, + "family": 1, + "name": "YearPicker", + "nameCN": "年份选择器", + "linkWidget": "134,135", + "lever": 3, + "info": "年份的选择组件，长相比较寒酸。可指定选择的日期范围、选中日期等，接收每份选中事件", + "image": "" + }, + { + "id": 137, + "family": 1, + "name": "CupertinoDatePicker", + "nameCN": "iOS日期选择器", + "linkWidget": "138", + "lever": 3, + "info": "高大上的滑滚日期选择器，可指定选择的类型、日期范围等，接收日期选中事件。", + "image": "" + }, + { + "id": 138, + "family": 1, + "name": "CupertinoTimerPicker", + "nameCN": "iOS时间选择器", + "linkWidget": "137", + "lever": 3, + "info": "高大上的滑滚时间选择器，可指定选择的类型、初始时间、背景色等，接收时间选中事件。", + "image": "" + }, + { + "id": 139, + "family": 1, + "name": "CupertinoPicker", + "nameCN": "iOS选择器", + "linkWidget": "179", + "lever": 3, + "info": "高大上的柱面滑动选择器，精妙十足，可指定很多配置属性，接收滑动时选中事件。", + "image": "" + }, + { + "id": 140, + "family": 1, + "name": "SnackBar", + "nameCN": "信息提示条", + "linkWidget": "141,142", + "lever": 4, + "info": + "作为组件来说是一个简单的结构组件，可指定形状、影深、背景色等。一般通过ScaffoldState的showSnackBar方法从底部弹出。", + "image": "" + }, + { + "id": 141, + "family": 1, + "name": "SnackBarAction", + "nameCN": "信息提示条按钮", + "linkWidget": "140", + "lever": 1, + "info": "一般只用于SnackBar中，接受点击事件。点击一次后该按钮就会被禁用，可以指定颜色和禁用时颜色。", + "image": "" + }, + { + "id": 142, + "family": 1, + "name": "BottomSheet", + "nameCN": "底部抽屉", + "linkWidget": "140", + "lever": 4, + "info": + "作为组件来说是一个简单的结构组件,可指定形状、影深、背景色、内部组件构造器等。一般通过ScaffoldState的showBottomSheet方法从底部弹出。", + "image": "" + }, + { + "id": 143, + "family": 1, + "name": "CupertinoContextMenu", + "nameCN": "ios弹出菜单", + "linkWidget": "144", + "lever": 5, + "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "image": "" + }, + { + "id": 144, + "family": 1, + "name": "CupertinoContextMenuAction", + "nameCN": "ios弹出菜单按钮", + "linkWidget": "143", + "lever": 1, + "info": "一般只用于CupertinoContextMenu中的点击按钮。可指定孩子和尾部图标，接收点击事件。", + "image": "" + }, + { + "id": 145, + "family": 1, + "name": "LicensePage", + "nameCN": "证书页", + "linkWidget": "130,193", + "lever": 1, + "info": "应用的证书页,可指定应用图标、应用名、应用版本号等信息，其他由Flutter自动生成。", + "image": "" + }, + { + "id": 146, + "family": 0, + "name": "GestureDetector", + "nameCN": "手势监听器", + "linkWidget": "147,150", + "lever": 5, + "info": "组件手势事件的检测器,可接受点击、长按、双击，按下、松开、移动等事件，并可以获取触点信息，居家旅行必备组件。", + "image": "" + }, + { + "id": 147, + "family": 0, + "name": "Listener", + "nameCN": "事件监听器", + "linkWidget": "146", + "lever": 3, + "info": "组件事件的监听器,可接受按下、松开、移动、取消等事件。较GestureDetector比较原始，可获取的信息也更多。", + "image": "" + }, + { + "id": 148, + "family": 0, + "name": "Tab", + "nameCN": "标签", + "linkWidget": "58", + "lever": 1, + "info": "一般用于TabBar中的item，上下结构，可指定图标和一个内容组件。", + "image": "" + }, + { + "id": 149, + "family": 1, + "name": "InkResponse", + "nameCN": "水波纹响应", + "linkWidget": "150,152", + "lever": 1, + "info": "水波纹的点击效果，接收点击、双击、长按、取消、高亮变化事件，可指定水波纹颜色、半径、高亮形状等属性。", + "image": "" + }, + { + "id": 150, + "family": 1, + "name": "InkWell", + "nameCN": "水波纹", + "linkWidget": "149,152", + "lever": 4, + "info": "InkResponse的子类，基本属性同InkResponse。一个矩形区域的水波纹，可以知道圆角半径，边线形状等。", + "image": "" + }, + { + "id": 151, + "family": 1, + "name": "TableRowInkWell", + "nameCN": "表格水波纹", + "linkWidget": "110", + "lever": 1, + "info": "只能用于Table的水波纹，接收点击、双击、长按、高亮变化事件，水波纹会作用于表格的一行。", + "image": "" + }, + { + "id": 152, + "family": 1, + "name": "Ink", + "nameCN": "水波", + "linkWidget": "149,150", + "lever": 3, + "info": "使InkWell和InkResponse的水波纹有效,用于绘制图像或其他装饰的Material组件。", + "image": "" + }, + { + "id": 153, + "family": 1, + "name": "RawChip", + "nameCN": "原生小条", + "linkWidget": "11,12,13,14,15", + "lever": 5, + "info": + "各自Chip组件的始祖，拥有各自Chip表现的能力，支持选中、点击、删除等事件。详见Chip、FilterChip、ActionChip、InputChip、ChoiceChip。", + "image": "" + }, + { + "id": 154, + "family": 0, + "name": "Drawer", + "nameCN": "滑页栏", + "linkWidget": "64,155", + "lever": 2, + "info": "一般用于Scaffold中的draw和endDraw属性作为左右的滑页栏，可以容纳一个子组件，能指定影深。", + "image": "" + }, + { + "id": 155, + "family": 0, + "name": "DrawerHeader", + "nameCN": "滑页栏", + "linkWidget": "154", + "lever": 2, + "info": "一般用于Drawer中，作为滑页栏的头部。可以指定内外边距、装饰、子组件等属性。", + "image": "" + }, + { + "id": 156, + "family": 1, + "name": "CupertinoApp", + "nameCN": "iOS应用", + "linkWidget": "157,158", + "lever": 4, + "info": "iOS风格应用的顶级组件，包含路由生成器、主题、语言、主页等属性。", + "image": "" + }, + { + "id": 157, + "family": 1, + "name": "CupertinoPageScaffold", + "nameCN": "iOS页面脚手架", + "linkWidget": "62", + "lever": 3, + "info": "iOS风格的页面布局脚手架结构,可指定顶部的导航栏和页面背景色。", + "image": "" + }, + { + "id": 158, + "family": 1, + "name": "CupertinoTabScaffold", + "nameCN": "iOS页签脚手架", + "linkWidget": "63", + "lever": 3, + "info": "iOS风格的页面布局脚手架结构,可指定最底部的导航切换栏可主体内容页。", + "image": "" + }, + { + "id": 159, + "family": 0, + "name": "PositionedDirectional", + "nameCN": "方向定位", + "linkWidget": "108,122", + "lever": 3, + "info": "和Positioned组件功能一样，属性名不同。只能用于Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。", + "image": "" + }, + { + "id": 160, + "family": 1, + "name": "Material", + "nameCN": "材料组件", + "linkWidget": "3", + "lever": 5, + "info": "Material风格组件的领军人物，灵魂核心。可指定颜色、影深、类型、阴影颜色、形状等属性。", + "image": "" + }, + { + "id": 161, + "family": 3, + "name": "IndexedStack", + "nameCN": "索引堆叠", + "linkWidget": "97", + "lever": 4, + "info": "Stack组件的子类,可以堆叠多个组件，并通过index来指定展示的组件索引，其余的会被隐藏。", + "image": "" + }, + { + "id": 162, + "family": 0, + "name": "ListView", + "nameCN": "列表组件", + "linkWidget": "16,163", + "lever": 5, + "info": + "列表显示的领军人物，容纳多个子组件，可以通过builder、separated、custom等构造。有内边距、是否反向、滑动控制器等属性。", + "image": "" + }, + { + "id": 163, + "family": 0, + "name": "GridView", + "nameCN": "网格组件", + "linkWidget": "21,162", + "lever": 5, + "info": + "容纳多个组件，并以网格的方式。可以通过count、extent、custom、builder等构造。有内边距、是否反向、滑动控制器等属性。", + "image": "" + }, + { + "id": 164, + "family": 0, + "name": "SingleChildScrollView", + "nameCN": "单子滑动", + "linkWidget": "", + "lever": 5, + "info": "使一个组件具有滑动的效果，可指定滑动的方向、是否反向、滑动控制器等属性。", + "image": "" + }, + { + "id": 165, + "family": 0, + "name": "PageView", + "nameCN": "滑页", + "linkWidget": "", + "lever": 5, + "info": "容纳多个组件页面，可对它们进行滑动切换，可指定滑动的方向、是否反向、滑动控制器等属性。", + "image": "" + }, + { + "id": 166, + "family": 2, + "name": "CustomPaint", + "nameCN": "绘制组件", + "linkWidget": "", + "lever": 5, + "info": "通过CustomPainter进行绘制，可实现一些复杂的自定义绘制组件，是Flutter中自定义组件的灵魂人物。", + "image": "" + }, + { + "id": 167, + "family": 5, + "name": "MediaQuery", + "nameCN": "媒体查询", + "linkWidget": "", + "lever": 4, + "info": "可通过MediaQuery.of来获取屏幕尺寸、设备密度、文字缩放比例、边距等信息。", + "image": "" + }, + { + "id": 168, + "family": 0, + "name": "Theme", + "nameCN": "主题", + "linkWidget": "65,169", + "lever": 4, + "info": "可通过Theme.of获取ThemeData对象。也可以指定主题应用于Theme的后代组件。", + "image": "" + }, + { + "id": 169, + "family": 0, + "name": "CupertinoTheme", + "nameCN": "iOS主题", + "linkWidget": "156,168", + "lever": 3, + "info": + "可通过CupertinoTheme.of获取CupertinoThemeData对象。也可以指定主题应用于CupertinoTheme的后代组件。", + "image": "" + }, + { + "id": 170, + "family": 1, + "name": "WillPopScope", + "nameCN": "返回拦截", + "linkWidget": "", + "lever": 5, + "info": "当一个界面中有WillPopScope组件时，在页面返回时会触发回调，决定是否返回。可用于二次确认退出的场景。", + "image": "" + }, + { + "id": 171, + "family": 1, + "name": "Hero", + "nameCN": "共享动画", + "linkWidget": "28", + "lever": 5, + "info": "可指定标签名，两个界面跳转时具有相同标签的组件会进行共享动画。一个界面中不能存在两个同名的Hero标签", + "image": "" + }, + { + "id": 172, + "family": 1, + "name": "FutureBuilder", + "nameCN": "异步构造器", + "linkWidget": "173", + "lever": 5, + "info": + "可指定一个Future对象，能够监听异步执行的状态，并在构造器中根据状态构建不同的界面。注意该Future对象不能和FutureBuilder同时创建，否则可能过渡刷新。", + "image": "" + }, + { + "id": 173, + "family": 1, + "name": "StreamBuilder", + "nameCN": "流构造器", + "linkWidget": "172", + "lever": 5, + "info": "可指定一个stream对象，能够监听异步执行的状态，并在构造器中根据状态构建不同的界面。", + "image": "" + }, + { + "id": 174, + "family": 1, + "name": "PopupMenuDivider", + "nameCN": "弹出菜单分割线", + "linkWidget": "56,34", + "lever": 1, + "info": "PopupMenuButton的分割线,一般不单独使用，可指定高度。", + "image": "" + }, + { + "id": 175, + "family": 1, + "name": "RawMaterialButton", + "nameCN": "原始按钮", + "linkWidget": "23,25,26,27", + "lever": 5, + "info": "原始的Material按钮,按钮界的幕后大佬，可接受点击、长按、高亮变化事件，可指定颜色、形状。影深、内边距等属性。", + "image": "" + }, + { + "id": 176, + "family": 1, + "name": "Dismissible", + "nameCN": "滑动消失", + "linkWidget": "162", + "lever": 4, + "info": "滑动时可显示底部组件，可指定滑动的方向和交叉轴的偏移量。接收确认消失和消失时的回调。", + "image": "" + }, + { + "id": 177, + "family": 1, + "name": "ReorderableListView", + "nameCN": "可重排序列表", + "linkWidget": "162", + "lever": 4, + "info": "可以进行长按排序的ListView，可指定滑动方向、是否反向、滑动控制器等属性。", + "image": "" + }, + { + "id": 178, + "family": 1, + "name": "ExpansionPanelList", + "nameCN": "展开列表", + "linkWidget": "52", + "lever": 3, + "info": "可展开的列表组件，可根据逻辑来实现单展开或多展开。可指定展开动画时长，接收展开回调", + "image": "" + }, + { + "id": 179, + "family": 1, + "name": "ListWheelScrollView", + "nameCN": "滚轮列表", + "linkWidget": "139", + "lever": 4, + "info": "高大上的柱面滑动列表,精妙十足，可指定item高度、透视、挤压等属性，接收滑动时选中事件。", + "image": "" + }, + { + "id": 180, + "family": 5, + "name": "ScrollConfiguration", + "nameCN": "ios菜单按钮", + "linkWidget": "162,163,164", + "lever": 3, + "info": "需要包裹一个可滑动的组件，并通过behavior属性控制滑动的效果，可以去除滑动的蓝色阴影等。", + "image": "" + }, + { + "id": 181, + "family": 5, + "name": "DropdownButtonHideUnderline", + "nameCN": "下拉按钮隐藏线", + "linkWidget": "55", + "lever": 1, + "info": "用于去除DropdownButton的下划线，本身没有什么应用价值。", + "image": "" + }, + { + "id": 182, + "family": 1, + "name": "Overlay", + "nameCN": "悬浮组件", + "linkWidget": "", + "lever": 5, + "info": "可以将组件在全应用中进行悬浮显示，能够添加或移除组件，它们有独立管理的栈。", + "image": "" + }, + { + "id": 183, + "family": 4, + "name": "CustomScrollView", + "nameCN": "通用滑动视图", + "linkWidget": "184,185,188", + "lever": 5, + "info": "一个通用的滑动结构，可以指定滑动方向、是否反向、滑动控制器等属性。其中包含的子组件们必须是Sliver家族。", + "image": "" + }, + { + "id": 184, + "family": 4, + "name": "SliverAppBar", + "nameCN": "Sliver头部栏", + "linkWidget": "183,196", + "lever": 4, + "info": "Sliver家族的顶部栏通用结构，可以指定左中右组件、收缩空间、影深、固定模式、背景色等属性。", + "image": "" + }, + { + "id": 185, + "family": 4, + "name": "SliverList", + "nameCN": "Sliver列表", + "linkWidget": "183,186,187", + "lever": 5, + "info": "Sliver家族的列表组件，通过指定delegate构造子组件。通常用于CustomScrollView中。", + "image": "" + }, + { + "id": 186, + "family": 4, + "name": "SliverFixedExtentList", + "nameCN": "Sliver固定延展列表", + "linkWidget": "183,185,187", + "lever": 3, + "info": "Sliver家族的列表组件，通过delegate构造子组件，可以指定item的高度。通常用于CustomScrollView中。", + "image": "" + }, + { + "id": 187, + "family": 4, + "name": "SliverFillViewport", + "nameCN": "Sliver填充视图列表", + "linkWidget": "183,185,186", + "lever": 3, + "info": "Sliver家族的列表组件，通过delegate构造子组件，item的高度会填空视口，可以指定是否的分率。", + "image": "" + }, + { + "id": 188, + "family": 4, + "name": "SliverGird", + "nameCN": "Sliver网格", + "linkWidget": "183", + "lever": 4, + "info": + "Sliver家族的网格列表组件，和GirdView类似，通过count和extent构造。通常用于CustomScrollView中。", + "image": "" + }, + { + "id": 189, + "family": 4, + "name": "SliverToBoxAdapter", + "nameCN": "Sliver适配器", + "linkWidget": "183", + "lever": 4, + "info": "可以容纳一个普通的组件，并将其转化成Sliver家族组件的适配器。", + "image": "" + }, + { + "id": 190, + "family": 4, + "name": "SliverPersistentHeader", + "nameCN": "Sliver存留头", + "linkWidget": "183", + "lever": 5, + "info": "通常用于CustomScrollView中，可以让一个组件在滑动中停留在顶部，不会滑动消失。", + "image": "" + }, + { + "id": 191, + "family": 4, + "name": "SliverPadding", + "nameCN": "Sliver内间距", + "linkWidget": "74", + "lever": 3, + "info": "可容纳一个Sliver家族的子组件，添加自身内边距来限制孩子组件的占位,核心属性为padding。", + "image": "" + }, + { + "id": 192, + "family": 4, + "name": "SliverOpacity", + "nameCN": "Sliver透明度", + "linkWidget": "73", + "lever": 3, + "info": "可容纳一个Sliver家族的子组件，并通过opacity来指定子组件的透明度。", + "image": "" + }, + { + "id": 193, + "family": 0, + "name": "AboutListTile", + "nameCN": "关于应用条目", + "linkWidget": "130,145", + "lever": 3, + "info": "一个点击条目，点击时可以弹出应用相关信息，可指定应用图标、应用名、应用版本号等信息和内部的子组件列表。", + "image": "" + }, + { + "id": 194, + "family": 1, + "name": "Scrollbar", + "nameCN": "滑动指示栏", + "linkWidget": "195,164,162", + "lever": 3, + "info": "需要包裹一个可滑动区域，当可滑动时，会显示滑动的bar用于指示。", + "image": "" + }, + { + "id": 195, + "family": 1, + "name": "CupertinoScrollbar", + "nameCN": "iOS滑动指示栏", + "linkWidget": "194,164,162", + "lever": 3, + "info": "iOS风格的滑动指示栏，需要包裹一个可滑动区域，当可滑动时，会显示滑动的bar用于指示。", + "image": "" + }, + { + "id": 196, + "family": 4, + "name": "FlexibleSpaceBar", + "nameCN": "ios菜单按钮", + "linkWidget": "184", + "lever": 3, + "info": "通常用于SliverAppBar中的可伸展区域，可指定标题、标题间距、背景、折叠模式等。", + "image": "" + }, + { + "id": 197, + "family": 6, + "name": "ErrorWidget", + "nameCN": "错误组件", + "linkWidget": "", + "lever": 1, + "info": "用于显示一个错误信息的组件，红底黄字，在开发过程中经常看到，一般不使用。", + "image": "" + }, + { + "id": 198, + "family": 1, + "name": "Form", + "nameCN": "表单组件", + "linkWidget": "199", + "lever": 4, + "info": + "表单组件，可以接收其下的FormField组件的变化回调，通过onWillPop拦截页面返回，通过FormState可对表单字段进行保存或校验。", + "image": "" + }, + { + "id": 199, + "family": 1, + "name": "TextFormField", + "nameCN": "文字表单输入", + "linkWidget": "54,198", + "lever": 4, + "info": "和TextField属性基本一致，在其基础上增加字段的校验和提交的回调，FormState的save会触发onSaved回调。", + "image": "" + }, + { + "id": 200, + "family": 1, + "name": "Stepper", + "nameCN": "步骤组件", + "linkWidget": "", + "lever": 5, + "info": "步骤组件，可指定一步步的操作，可以自定义步骤的内容，确认和返回的按钮以及步骤排列的方向。", + "image": "" + }, + { + "id": 201, + "family": 1, + "name": "AnimatedSize", + "nameCN": "尺寸动画", + "linkWidget": "92", + "lever": 3, + "info": "子组件大小发生变化是，进行动画渐变，可指定时长、对齐方式、曲线、vsync等属性。", + "image": "" + }, + { + "id": 202, + "family": 0, + "name": "Builder", + "nameCN": "构造器", + "linkWidget": "", + "lever": 2, + "info": "一个不影响子组件占位空间，不具有显示性的组件，存在的唯一价值是提供当前组件对应元素的上下文。", + "image": "" + }, + { + "id": 203, + "family": 0, + "name": "OrientationBuilder", + "nameCN": "方向构造器", + "linkWidget": "202", + "lever": 2, + "info": "能够回调父组件是横向还是纵向,可以据此来构建不同的子组件。", + "image": "" + }, + { + "id": 204, + "family": 0, + "name": "PreferredSize", + "nameCN": "优先尺寸", + "linkWidget": "57,64", + "lever": 2, + "info": "实现了PreferredSizeWidget接口，可容纳一个子组件，设置优先尺寸，不会对其子组件施加任何约束。", + "image": "" + }, + { + "id": 205, + "family": 0, + "name": "TabPageSelector", + "nameCN": "页签滑动选择器", + "linkWidget": "206,59", + "lever": 2, + "info": "通常作为指示器与TabBarView联用,共同使用一个TabController。可指定颜色、大小、选中色。", + "image": "" + }, + { + "id": 206, + "family": 0, + "name": "TabPageSelectorIndicator", + "nameCN": "页签指示器", + "linkWidget": "205", + "lever": 2, + "info": "一个有边线的圆形组件，可指定大小、颜色、边线色。是TabPageSelector的部分之一，一般不单独使用。", + "image": "" + }, + { + "id": 208, + "family": 0, + "name": "Title", + "nameCN": "应用标题", + "linkWidget": "65", + "lever": 2, + "info": "该组件用于描述app在操作系统中的名称,可以在应用栏列表里看到效果。MaterialApp中的title字段效果的根源是该组件。", + "image": "" + }, + { + "id": 211, + "family": 0, + "name": "MaterialBanner", + "nameCN": "横幅组件", + "linkWidget": "", + "lever": 2, + "info": "Material风格的横幅组件，支持左中右或左中下结构，可指定边距背景色等", + "image": "" + }, + { + "id": 214, + "family": 0, + "name": "NavigationToolbar", + "nameCN": "导航工具条", + "linkWidget": "57", + "lever": 2, + "info": "左中右模式的通用结构组件,可指定中间组件距左侧边距及是否居中。源码在AppBar等导航条结构中有使用它。", + "image": "" + }, + { + "id": 218, + "family": 0, + "name": "CupertinoNavigationBarBackButton", + "nameCN": "iOS风格返回按钮", + "linkWidget": "57", + "lever": 2, + "info": "Cupertino风格的导航栏返回按钮,可指定颜色和点击事件,一般不单独使用。", + "image": "" + }, + { + "id": 231, + "family": 1, + "name": "InputDecorator", + "nameCN": "输入装饰", + "linkWidget": "54", + "lever": 2, + "info": "在外层包裹输入的装饰,是TextField的底层核心组件之一，一般不单独使用。", + "image": "" + }, + { + "id": 232, + "family": 1, + "name": "Navigator", + "nameCN": "导航器", + "linkWidget": "65", + "lever": 4, + "info": + "Navigator用堆栈规则管理一组子组件,可以将子组件切入弹出及监听出入栈事件。MaterialApp路由管理的本源就是使用了Navigator。", + "image": "" + }, + { + "id": 244, + "family": 1, + "name": "EditableText", + "nameCN": "可编辑文字", + "linkWidget": "2,54", + "lever": 2, + "info": "可以编辑的文字,是TextField的底层最核心组件，一般不单独使用。", + "image": "" + }, + { + "id": 245, + "family": 1, + "name": "CupertinoTextField", + "nameCN": "iOS风格输入框", + "linkWidget": "54", + "lever": 4, + "info": + "Cupertino风格的输入框,属性和TextField类似,可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。", + "image": "" + }, + { + "id": 251, + "family": 4, + "name": "NestedScrollView", + "nameCN": "嵌套滑动视图", + "linkWidget": "183", + "lever": 4, + "info": "用于多个视图滑动嵌套处理,可以指定头部、滑动控制器、滑动方向等,其中body必须是可滑动类型的组件。", + "image": "" + }, + { + "id": 253, + "family": 1, + "name": "Scrollable", + "nameCN": "可滑动组件", + "linkWidget": "340,349", + "lever": 4, + "info": + "实现了一个可滚动组件的交互模型,需要viewportBuilder进的viewport的构造。是ScrollView的核心实现组件之一，一般不直接使用。", + "image": "" + }, + { + "id": 255, + "family": 1, + "name": "ValueListenableBuilder", + "nameCN": "监听值构造器", + "linkWidget": "", + "lever": 5, + "info": "可以监听一个值，当其变化时通过builder回调能重建界面，避免使用setState刷新。", + "image": "" + }, + { + "id": 262, + "family": 1, + "name": "CupertinoSegmentedControl", + "nameCN": "iOS多栏切换", + "linkWidget": "33", + "lever": 4, + "info": "iOS风格的多按钮栏，表现和ToggleButtons类似,可指定内边距。", + "image": "" + }, + { + "id": 263, + "family": 2, + "name": "FractionalTranslation", + "nameCN": "分度偏移", + "linkWidget": "", + "lever": 3, + "info": "通过offset属性将子组件进行偏移,偏移量为OffSet横纵*子组件大小。", + "image": "" + }, + { + "id": 264, + "family": 2, + "name": "RepaintBoundary", + "nameCN": "重绘边界", + "linkWidget": "166", + "lever": 5, + "info": + "为子组件创建一个单独的显示列表,提升性能。源码中在TextField、DrawerController、Scrollbar、Sliver等组件中均有应用", + "image": "" + }, + { + "id": 277, + "family": 2, + "name": "ShaderMask", + "nameCN": "着色器遮罩", + "linkWidget": "88,38", + "lever": 4, + "info": "可容纳一个孩子，并通过着色器来对孩子进行着色，可指定混色模式。通常用于组件渐变色处理。", + "image": "" + }, + { + "id": 278, + "family": 2, + "name": "BackdropFilter", + "nameCN": "背景滤镜", + "linkWidget": "88,97,67", + "lever": 4, + "info": "可容纳一个孩子，并将背景进行模糊滤镜。可以通过Stack将背景模糊实现组件的模糊效果。", + "image": "" + }, + { + "id": 279, + "family": 2, + "name": "PhysicalShape", + "nameCN": "物理形状", + "linkWidget": "69", + "lever": 4, + "info": "可以让子组件按照路径进行剪裁,并且可以指定背景色、影深、阴影颜色、剪切行为。", + "image": "" + }, + { + "id": 285, + "family": 2, + "name": "CustomSingleChildLayout", + "nameCN": "通用单子布局", + "linkWidget": "341", + "lever": 3, + "info": "可容纳一个子组件，并指定代理类对子组件进行排布。代理类可获取父容器区域和子组件的区域大小，及区域约束情况。", + "image": "" + }, + { + "id": 287, + "family": 2, + "name": "LayoutBuilder", + "nameCN": "布局构造器", + "linkWidget": "", + "lever": 4, + "info": "可以检测到父容器的区域大小，并根据父容器的尺寸信息可以完成自定义布局。" + "是一个非常实用的布局组件。", + "image": "" + }, + { + "id": 292, + "family": 2, + "name": "IgnorePointer", + "nameCN": "忽视点击", + "linkWidget": "295,146,149,150", + "lever": 4, + "info": "容纳一个子组件，可以通过指定ignoring属性，来决定孩子是否忽略手势事件，其本身不接受事件。", + "image": "" + }, + { + "id": 293, + "family": 1, + "name": "MouseRegion", + "nameCN": "鼠标区域", + "linkWidget": "", + "lever": 3, + "info": "用于鼠标事件监听的组件,通常用于桌面和Web平台，可监听鼠标的移入、移除、移动事件。", + "image": "" + }, + { + "id": 295, + "family": 2, + "name": "AbsorbPointer", + "nameCN": "吸收点击", + "linkWidget": "146,149,150,292", + "lever": 4, + "info": "容纳一个子组件，可以通过指定ignoring属性，来决定孩子是否忽略手势事件，其本身接受事件。", + "image": "" + }, + { + "id": 297, + "family": 2, + "name": "IntrinsicWidth", + "nameCN": "固有宽", + "linkWidget": "298", + "lever": 4, + "info": "根据子元素的固有宽度度调整其子元素大小的组件,可解决很多布局的疑难杂症,但相对昂贵。", + "image": "" + }, + { + "id": 298, + "family": 2, + "name": "IntrinsicHeight", + "nameCN": "固有高", + "linkWidget": "297", + "lever": 4, + "info": "根据子元素的固有高度调整其子元素大小的组件,可解决很多布局的疑难杂症,但相对昂贵。", + "image": "" + }, + { + "id": 307, + "family": 4, + "name": "SliverOverlapAbsorber", + "nameCN": "重叠吸收器", + "linkWidget": "251,308", + "lever": 3, + "info": "包裹另一个的sliver，并迫使其布局范围被视为重叠。需要和SliverOverlapInjector联用。", + "image": "" + }, + { + "id": 308, + "family": 4, + "name": "SliverOverlapInjector", + "nameCN": "重叠注射器", + "linkWidget": "251,307", + "lever": 3, + "info": "一个sliver,需要和SliverOverlapAbsorber联用,处理视图重叠问题。", + "image": "" + }, + { + "id": 312, + "family": 6, + "name": "PerformanceOverlay", + "nameCN": "性能浮层", + "linkWidget": "65", + "lever": 2, + "info": "可以非常方便地开启性能监测的两个柱图,方便查看刷新界面时帧率的变化情况。", + "image": "" + }, { + "id": 313, + "family": 6, + "name": "RawImage", + "nameCN": "原图片", + "linkWidget": "38", + "lever": 2, + "info": "是实现Image组件的核心组件，可以显示ui的Image,基本属性同Image,一般很少单独使用。", + "image": "" + }, + { + "id": 315, + "family": 5, + "name": "LayoutId", + "nameCN": "布局Id", + "linkWidget": "341", + "lever": 2, + "info": "只能用于CustomMultiChildLayout组件中，为其子组件标识身份。", + "image": "" + }, + { + "id": 324, + "family": 5, + "name": "DefaultTextStyle", + "nameCN": "默认字体样式", + "linkWidget": "2,114,124", + "lever": 3, + "info": "可容纳一个孩子，为后代的文字指定默认样式。常用于多个相同文字的样式统一，避免一一设置。", + "image": "" + }, + { + "id": 325, + "family": 5, + "name": "IconTheme", + "nameCN": "图标样式", + "linkWidget": "6", + "lever": 3, + "info": "可容纳一个孩子，为后代的图标指定默认样式。常用于多个相同图标的样式统一，避免一一设置。", + "image": "" + }, + { + "id": 326, + "family": 5, + "name": "ButtonTheme", + "nameCN": "按钮样式", + "linkWidget": "23,25,26,27", + "lever": 3, + "info": "主要用于为后代的Button类型组件统一设置默认属性,也可以通过该组件获取默认Button的属性。", + "image": "" + }, + { + "id": 327, + "family": 5, + "name": "MaterialBannerTheme", + "nameCN": "横幅样式", + "linkWidget": "211", + "lever": 2, + "info": "主要用于为后代的MaterialBanner组件统一设置默认属性,也可以通过该组件获取默认MaterialBanner的属性。", + "image": "" + }, + { + "id": 328, + "family": 5, + "name": "ChipTheme", + "nameCN": "小条样式", + "linkWidget": "11,153,12,13,14,15", + "lever": 3, + "info": "主要用于为后代的Chip类型组件统一设置默认属性,也可以通过该组件获取默认Chip的属性。", + "image": "" + }, + { + "id": 329, + "family": 5, + "name": "DividerTheme", + "nameCN": "分割线样式", + "linkWidget": "34,35", + "lever": 3, + "info": "主要用于为后代的Divider类型组件统一设置默认属性,也可以通过该组件获取默认Divider的属性。", + "image": "" + }, + { + "id": 330, + "family": 5, + "name": "PopupMenuTheme", + "nameCN": "弹出菜单样式", + "linkWidget": "56", + "lever": 2, + "info": "主要用于为后代的PopupMenuButton组件统一设置默认属性,也可以通过该组件获取默认PopupMenu的属性。", + "image": "" + }, + { + "id": 331, + "family": 5, + "name": "SliderTheme", + "nameCN": "滑块样式", + "linkWidget": "42", + "lever": 3, + "info": "可容纳一个孩子，为后代的Slider指定默认样式。常用于Slider的样式统一，避免一一设置，也可以对Slider进行样式定制。", + "image": "" + }, + { + "id": 332, + "family": 5, + "name": "ToggleButtonsTheme", + "nameCN": "滑块样式", + "linkWidget": "33", + "lever": 2, + "info": "主要用于为后代的ToggleButtons组件统一设置默认属性,也可以通过该组件获取默认ToggleButtons的属性。", + "image": "" + }, + { + "id": 333, + "family": 5, + "name": "TooltipTheme", + "nameCN": "提示主题", + "linkWidget": "50", + "lever": 2, + "info": "主要用于为后代的Tooltip组件统一设置默认属性,也可以通过该组件获取默认TooltipTheme的属性。", + "image": "" + }, + { + "id": 334, + "family": 5, + "name": "ListTileTheme", + "nameCN": "ListTile主题", + "linkWidget": "16", + "lever": 2, + "info": "主要用于为后代的ListTile组件统一设置默认属性,也可以通过该组件获取默认ListTile的属性。", + "image": "" + }, + { + "id": 338, + "family": 5, + "name": "ButtonBarTheme", + "nameCN": "按钮条主题", + "linkWidget": "29", + "lever": 2, + "info": "主要用于为后代的ButtonBar组件统一设置默认属性,也可以通过该组件获取默认ButtonBarTheme的属性。", + "image": "" + }, + { + "id": 340, + "family": 3, + "name": "Viewport", + "nameCN": "视口组件", + "linkWidget": "253,349", + "lever": 1, + "info": + "通常用于为滑动视图提供视口,仅构建显示和预加载的部位。可指定预加载的长度、滑动轴向等。是ScrollView的核心实现组件之一，一般不直接使用。", + "image": "" + }, + { + "id": 341, + "family": 3, + "name": "CustomMultiChildLayout", + "nameCN": "通用多子布局", + "linkWidget": "315,285", + "lever": 4, + "info": "使用一个代理类对子组件集进行布局控制,子组件必须使用LayoutId组件进行标识。", + "image": "" + }, + { + "id": 342, + "family": 3, + "name": "ListBody", + "nameCN": "列表体", + "linkWidget": "162", + "lever": 1, + "info": "将若干子组件按照轴向进行排列，可设置的属性很少，一般很少使用，而选择使用ListView。", + "image": "" + }, + { + "id": 351, + "family": 1, + "name": "InteractiveViewer", + "nameCN": "交互视图", + "linkWidget": "147,146,78", + "lever": 4, + "info": "主要对移动、缩放等手势交互进行封装，简化使用，可指定移动边界、缩放比例、手势监听等。", + "image": "" + }, + { + "id": 352, + "family": 0, + "name": "CupertinoDialogAction", + "nameCN": "交互视图", + "linkWidget": "129", + "lever": 1, + "info": " 一个简单的按钮，通常用于CupertinoAlertDialog中，一般不单独使用。", + "image": "" + } +]; diff --git a/lib/blocs/detail/detail_bloc.dart b/lib/blocs/detail/detail_bloc.dart index 222db29..c4a2184 100644 --- a/lib/blocs/detail/detail_bloc.dart +++ b/lib/blocs/detail/detail_bloc.dart @@ -28,8 +28,7 @@ class DetailBloc extends Bloc { } } - Stream _mapLoadWidgetToState( - WidgetModel widgetModel) async* { + Stream _mapLoadWidgetToState(WidgetModel widgetModel) async* { yield DetailLoading(); try { final nodes = await this.repository.loadNode(widgetModel); diff --git a/lib/blocs/global/global_state.dart b/lib/blocs/global/global_state.dart index a1c4689..290c914 100644 --- a/lib/blocs/global/global_state.dart +++ b/lib/blocs/global/global_state.dart @@ -1,5 +1,6 @@ import 'package:equatable/equatable.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_unit_mac/storage/po/node_po.dart'; class GlobalState extends Equatable { final String fontFamily; diff --git a/lib/main.dart b/lib/main.dart index 39ad8b2..eb1d4c1 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -5,6 +5,5 @@ import 'package:flutter_unit_mac/views/app/bloc_wrapper.dart'; import 'views/app/flutter_app.dart'; void main() { - print(Directory.current.path); runApp(BlocWrapper(child: FlutterApp())); } diff --git a/lib/model/node_model.dart b/lib/model/node_model.dart index 591937c..32142bd 100644 --- a/lib/model/node_model.dart +++ b/lib/model/node_model.dart @@ -1,10 +1,10 @@ import 'package:equatable/equatable.dart'; +import 'package:flutter_unit_mac/storage/po/node_po.dart'; /// create by 张风捷特烈 on 2020-03-04 /// contact me by email 1981462002@qq.com /// 说明: 详情页节点-展示-数据模型 - class NodeModel extends Equatable { final String name; final String subtitle; @@ -17,13 +17,19 @@ class NodeModel extends Equatable { factory NodeModel.fromJson(Map map) { return NodeModel( - name: map['name'], - subtitle: map["subtitle"], - code: map["code"]); + name: map['name'], subtitle: map["subtitle"], code: map["code"]); } @override String toString() { return 'Node{name: $name, subtitle: $subtitle, code: $code}'; } -} \ No newline at end of file + + static NodeModel fromPo(NodePo po) { + return NodeModel( + name: po.name, + subtitle: po.subtitle, + code: po.code, + ); + } +} diff --git a/lib/repositories/impl/widget_innner_repository.dart b/lib/repositories/impl/widget_innner_repository.dart new file mode 100644 index 0000000..4e123a6 --- /dev/null +++ b/lib/repositories/impl/widget_innner_repository.dart @@ -0,0 +1,81 @@ +import 'dart:convert'; + +import 'package:flutter/services.dart'; +import 'package:flutter_unit_mac/app/data/flutter_unit_data.dart'; +import 'package:flutter_unit_mac/storage/app_storage.dart'; +import 'package:flutter_unit_mac/app/enums.dart'; +import 'package:flutter_unit_mac/storage/dao/node_dao.dart'; + +import 'package:flutter_unit_mac/storage/po/widget_po.dart'; +import 'package:flutter_unit_mac/storage/dao/widget_dao.dart'; +import 'package:flutter_unit_mac/model/node_model.dart'; +import 'package:flutter_unit_mac/model/widget_model.dart'; +import 'package:flutter_unit_mac/repositories/itf/widget_repository.dart'; + +/// create by 张风捷特烈 on 2020-03-03 +/// contact me by email 1981462002@qq.com +/// 说明 : Widget数据仓库 + +class WidgetInnerRepository implements WidgetRepository { + final AppStorage storage; + + WidgetInnerRepository(this.storage); + + @override + Future> loadWidgets(WidgetFamily family) async { + var widgets = widgetData.map((e) => WidgetPo.fromJson(e)).toList(); + var result = widgets + .map(WidgetModel.fromPo) + .where((element) => element.family == family) + .toList(); + result.sort((a, b) => b.lever.compareTo(a.lever)); + return result; + } + + @override + Future> loadCollectWidgets() async { +// var data = await _widgetDao.queryCollect(); +// var widgets = data.map((e) => WidgetPo.fromJson(e)).toList(); +// var list = widgets.map(WidgetModel.fromPo).toList(); +// return list; + } + + @override + Future> searchWidgets(SearchArgs args) async { + var widgets = widgetData.map((e) => WidgetPo.fromJson(e)).toList(); + var result = widgets + .map(WidgetModel.fromPo) + .where((element) => element.name.toLowerCase().contains(args.name.toLowerCase()) || element.nameCN.toLowerCase().contains(args.name.toLowerCase())) + .where((element) => args.stars.contains(element.lever.round())) + .toList(); + result.sort((a, b) => b.lever.compareTo(a.lever)); + return result; + } + + @override + Future> loadNode(WidgetModel widgetModel) async { + var nodes = AppStorage.nodes + .where((element) => element.widgetId == widgetModel.id) + .map(NodeModel.fromPo).toList(); + return nodes; + } + + @override + Future> loadWidget(List id) async { + var widgetsPool = widgetData.map((e) => WidgetPo.fromJson(e)).toList(); + var data = widgetsPool.where((element) => id.contains(element.id)); + return data.map(WidgetModel.fromPo).toList(); + } + + @override + Future toggleCollect( + int id, + ) { +// return _widgetDao.toggleCollect(id); + } + + @override + Future collected(int id) async { + return true; + } +} diff --git a/lib/storage/app_storage.dart b/lib/storage/app_storage.dart index f86b27a..1eba38a 100644 --- a/lib/storage/app_storage.dart +++ b/lib/storage/app_storage.dart @@ -1,4 +1,4 @@ - +import 'dart:convert'; import 'dart:io'; import 'dart:typed_data'; @@ -6,9 +6,11 @@ import 'package:flutter/services.dart'; import 'package:flutter_unit_mac/app/res/cons.dart'; import 'package:flutter_unit_mac/app/res/sp.dart'; import 'package:flutter_unit_mac/blocs/global/global_state.dart'; +import 'package:flutter_unit_mac/storage/po/node_po.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:sqflite/sqflite.dart'; import 'package:path/path.dart' as path; + /// create by 张风捷特烈 on 2020-03-04 /// contact me by email 1981462002@qq.com /// 说明: @@ -17,6 +19,8 @@ class AppStorage { SharedPreferences _sp; Database _database; + static List nodes; + Future get sp async { _sp = _sp ?? await SharedPreferences.getInstance(); return _sp; @@ -29,15 +33,18 @@ class AppStorage { // 初始化 App 固化的配置数据 Future initApp() async { - var prefs = await sp; - _database = await initDb(); - var showBg = prefs.getBool(SP.showBackground) ?? true; - var themeIndex = prefs.getInt(SP.themeColorIndex) ?? 4; - var fontIndex = prefs.getInt(SP.fontFamily) ?? 1; - var codeIndex = prefs.getInt(SP.codeStyleIndex) ?? 0; - var itemStyleIndex = prefs.getInt(SP.itemStyleIndex) ?? 0; + var str = await rootBundle.loadString('assets/data/node.json'); + var data = json.decode(str) as List; + nodes = data.map((e) => NodePo.fromJson(e)).toList(); + + var showBg = true; + var themeIndex = 4; + var fontIndex = 1; + var codeIndex = 0; + var itemStyleIndex = 1; return GlobalState( + showBackGround: showBg, themeColor: Cons.themeColorSupport.keys.toList()[themeIndex], fontFamily: Cons.fontFamilySupport[fontIndex], @@ -57,7 +64,7 @@ class AppStorage { } catch (_) {} ByteData data = await rootBundle.load(path.join("assets", "flutter.db")); List bytes = - data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes); + data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes); await File(dbPath).writeAsBytes(bytes, flush: true); } else { print("========= 数据库 ======已存在===="); diff --git a/lib/views/app/bloc_wrapper.dart b/lib/views/app/bloc_wrapper.dart index 78da5e9..67bce23 100644 --- a/lib/views/app/bloc_wrapper.dart +++ b/lib/views/app/bloc_wrapper.dart @@ -4,6 +4,7 @@ import 'package:flutter_unit_mac/app/enums.dart'; import 'package:flutter_unit_mac/blocs/bloc_exp.dart'; import 'package:flutter_unit_mac/repositories/impl/catagory_db_repository.dart'; import 'package:flutter_unit_mac/repositories/impl/widget_db_repository.dart'; +import 'package:flutter_unit_mac/repositories/impl/widget_innner_repository.dart'; import 'package:flutter_unit_mac/storage/app_storage.dart'; /// create by 张风捷特烈 on 2020/4/28 @@ -17,7 +18,7 @@ class BlocWrapper extends StatelessWidget { BlocWrapper({this.child}); - final repository = WidgetDbRepository(storage); + final repository = WidgetInnerRepository(storage); final categoryRepo = CategoryDbRepository(storage); @override diff --git a/lib/views/app/navigation/unit_navigation.dart b/lib/views/app/navigation/unit_navigation.dart index 173194b..2b2feb6 100644 --- a/lib/views/app/navigation/unit_navigation.dart +++ b/lib/views/app/navigation/unit_navigation.dart @@ -36,7 +36,7 @@ class _UnitNavigationState extends State { _controller.dispose(); //释放控制器 super.dispose(); } - + final tempText = Text('这里是一片未知的领域\n等待着勇者的探寻...',style: TextStyle(fontSize: 24,color: Colors.white),); @override Widget build(BuildContext context) { return BlocBuilder( @@ -59,10 +59,15 @@ class _UnitNavigationState extends State { controller: _controller, children: [ HomePage(), - CollectPage(), - PaintUnitPage(), - LayoutUnitPage(), - BugUnitPage(), + Container(color: Colors.red,alignment: Alignment.center,child:tempText,), + Container(color: Colors.blue,alignment: Alignment.center,child: tempText), + Container(color: Colors.purpleAccent,alignment: Alignment.center,child: tempText), + Container(color: Colors.green,alignment: Alignment.center,child: tempText), + +// CollectPage(), +// PaintUnitPage(), +// LayoutUnitPage(), +// BugUnitPage(), ], ), ), diff --git a/lib/views/app/splash/unit_splash.dart b/lib/views/app/splash/unit_splash.dart index 90b8605..e3fcb2f 100644 --- a/lib/views/app/splash/unit_splash.dart +++ b/lib/views/app/splash/unit_splash.dart @@ -23,7 +23,7 @@ class UnitSplash extends StatefulWidget { class _UnitSplashState extends State with TickerProviderStateMixin { AnimationController _controller; AnimationController _secondController; - double _factor; + double _factor=0.0; Animation _curveAnim; bool _animEnd = false; @@ -69,9 +69,10 @@ class _UnitSplashState extends State with TickerProviderStateMixin { Container( width: winW, height: winH, - child: CustomPaint( - painter: UnitPainter(factor: _factor), - ), + child: Container() +// CustomPaint( +// painter: UnitPainter(factor: _factor), +// ), ), buildText(winH, winW), buildHead(), @@ -138,8 +139,8 @@ class _UnitSplashState extends State with TickerProviderStateMixin { begin: const Offset(0, -5), ).animate(_controller), child: Container( - height: 45, - width: 45, + height: 150*_factor, + width: 150*_factor, child: Image.asset('assets/images/icon_head.png'), )); diff --git a/lib/views/pages/detail/widget_detail_page.dart b/lib/views/pages/detail/widget_detail_page.dart index 5019126..b5b7a6e 100644 --- a/lib/views/pages/detail/widget_detail_page.dart +++ b/lib/views/pages/detail/widget_detail_page.dart @@ -62,7 +62,7 @@ class _WidgetDetailPageState extends State { actions: [ Builder(builder: (ctx)=>GestureDetector( onLongPress: (){ - Scaffold.of(ctx).openEndDrawer(); +// Scaffold.of(ctx).openEndDrawer(); }, child: Padding( padding: const EdgeInsets.all(15.0), @@ -71,7 +71,7 @@ class _WidgetDetailPageState extends State { onTap: () { Navigator.of(ctx).pop(); })), - _buildCollectButton(_models.last, context), +// _buildCollectButton(_models.last, context), ], ), body: SingleChildScrollView( diff --git a/lib/views/pages/home/home_drawer.dart b/lib/views/pages/home/home_drawer.dart index 5846a13..535ce4e 100644 --- a/lib/views/pages/home/home_drawer.dart +++ b/lib/views/pages/home/home_drawer.dart @@ -101,7 +101,7 @@ class HomeDrawer extends StatelessWidget { title: Text('属性集录'), trailing: _nextIcon(context), onTap: () { - Navigator.of(context).pushNamed(Router.attr); +// Navigator.of(context).pushNamed(Router.attr); }, ), ListTile( @@ -111,7 +111,7 @@ class HomeDrawer extends StatelessWidget { ), title: Text('绘画集录'), trailing: _nextIcon(context), - onTap: () => Navigator.of(context).pushNamed(Router.paint), +// onTap: () => Navigator.of(context).pushNamed(Router.paint), ), ListTile( leading: Icon( @@ -121,7 +121,7 @@ class HomeDrawer extends StatelessWidget { title: Text('布局集录'), trailing: _nextIcon(context), onTap: () { - Navigator.of(context).pushNamed(Router.layout); +// Navigator.of(context).pushNamed(Router.layout); }, ), ListTile( @@ -132,7 +132,7 @@ class HomeDrawer extends StatelessWidget { trailing: _nextIcon(context), title: Text('bug/feature 集录'), onTap: () { - Navigator.of(context).pushNamed(Router.bug); +// Navigator.of(context).pushNamed(Router.bug); }, ), ], diff --git a/lib/views/pages/home/home_page.dart b/lib/views/pages/home/home_page.dart index a805c88..5daaa94 100644 --- a/lib/views/pages/home/home_page.dart +++ b/lib/views/pages/home/home_page.dart @@ -27,7 +27,6 @@ class _HomePageState extends State { @override void initState() { - print(Directory.current.path); _ctrl = ScrollController()..addListener(_updateAppBarHeight); super.initState(); } @@ -56,10 +55,10 @@ class _HomePageState extends State { } final gridDelegate = const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, + crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 20, - childAspectRatio: 3.0, + childAspectRatio: 4, ); Widget _buildContent(BuildContext context, HomeState state) { diff --git a/lib/views/pages/search/serach_page.dart b/lib/views/pages/search/serach_page.dart index 10f3aa2..0319491 100644 --- a/lib/views/pages/search/serach_page.dart +++ b/lib/views/pages/search/serach_page.dart @@ -6,6 +6,7 @@ import 'package:flutter_unit_mac/blocs/bloc_exp.dart'; import 'package:flutter_unit_mac/components/permanent/circle.dart'; import 'package:flutter_unit_mac/storage/dao/widget_dao.dart'; import 'package:flutter_unit_mac/model/widget_model.dart'; +import 'package:flutter_unit_mac/views/items/home_item_support.dart'; import 'package:flutter_unit_mac/views/items/techno_widget_list_item.dart'; import 'package:flutter_unit_mac/views/pages/search/app_search_bar.dart'; import 'package:flutter_unit_mac/views/pages/search/error_page.dart'; @@ -111,10 +112,10 @@ class _SearchPageState extends State { Widget _buildSliverList(List models) => SliverPadding( padding: EdgeInsets.all(20), sliver: SliverGrid.count( - crossAxisCount: 2, + crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 20, - childAspectRatio: 3.5, + childAspectRatio: 4, children: models .asMap() .keys @@ -122,9 +123,7 @@ class _SearchPageState extends State { // margin: EdgeInsets.symmetric(horizontal: 15, vertical: 5), child: InkWell( onTap: () => _toDetailPage(models[index]), - child: TechnoWidgetListItem( - data: models[index], - )), + child: HomeItemSupport.get(models[index], 1)), )) .toList(), // delegate: SliverChildBuilderDelegate( @@ -147,8 +146,7 @@ class _SearchPageState extends State { if (temp.length < 5) { temp.addAll(List.generate(5 - temp.length, (e) => -1)); } - BlocProvider.of(context) - .add(EventTextChanged(args: SearchArgs(name: '', stars: temp))); + BlocProvider.of(context).add(EventTextChanged(args: SearchArgs(name: '', stars: temp))); } _toDetailPage(WidgetModel model) { diff --git a/lib/views/pages/setting/code_style_setting.dart b/lib/views/pages/setting/code_style_setting.dart index 02958c1..ac02bb4 100644 --- a/lib/views/pages/setting/code_style_setting.dart +++ b/lib/views/pages/setting/code_style_setting.dart @@ -34,7 +34,7 @@ class Hello { crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 20, - childAspectRatio: 1.5, + childAspectRatio: 2.5, ); @override diff --git a/lib/views/pages/setting/setting_page.dart b/lib/views/pages/setting/setting_page.dart index b468844..cacabfa 100644 --- a/lib/views/pages/setting/setting_page.dart +++ b/lib/views/pages/setting/setting_page.dart @@ -35,16 +35,16 @@ class SettingPage extends StatelessWidget { trailing: _nextIcon(context), onTap: () => Navigator.of(context).pushNamed(Router.font_setting), ), - Divider(), - ListTile( - leading: Icon( - TolyIcon.icon_item, - color: Theme.of(context).primaryColor, - ), - title: Text('item样式设置'), - trailing: _nextIcon(context), - onTap: () => Navigator.of(context).pushNamed(Router.item_style_setting), - ), +// Divider(), +// ListTile( +// leading: Icon( +// TolyIcon.icon_item, +// color: Theme.of(context).primaryColor, +// ), +// title: Text('item样式设置'), +// trailing: _nextIcon(context), +// onTap: () => Navigator.of(context).pushNamed(Router.item_style_setting), +// ), Divider(), ListTile( leading: Icon( diff --git a/lib/views/widgets.zip b/lib/views/widgets.zip deleted file mode 100644 index 828202c..0000000 Binary files a/lib/views/widgets.zip and /dev/null differ diff --git a/lib/views/widgets/MultiChildRenderObjectWidget/RichText/node2_widget.dart b/lib/views/widgets/MultiChildRenderObjectWidget/RichText/node2_widget.dart index 9c7c145..3595b9f 100644 --- a/lib/views/widgets/MultiChildRenderObjectWidget/RichText/node2_widget.dart +++ b/lib/views/widgets/MultiChildRenderObjectWidget/RichText/node2_widget.dart @@ -12,45 +12,51 @@ import 'package:flutter/material.dart'; class RichTextWithWidget extends StatelessWidget { @override Widget build(BuildContext context) { - return RichText( - text: TextSpan( - text: 'hello ', - style: TextStyle(color: Colors.black, fontSize: 18), - children: [ - WidgetSpan( - child: Image.asset( - 'assets/images/icon_head.png', - width: 30, - ), - alignment: PlaceholderAlignment.baseline, - baseline: TextBaseline.ideographic), - TextSpan( - text: ' , welcome to ', - style: TextStyle(color: Colors.blue, fontSize: 18), - ), - WidgetSpan( - child: FlutterLogo(), - alignment: PlaceholderAlignment.baseline, - baseline: TextBaseline.ideographic), - TextSpan( - text: ' .\n', - ), - TextSpan( - text: 'focus me on ', - style: TextStyle(color: Colors.orange, fontSize: 16), - ), - TextSpan( - text: 'https://github.com/toly1994328', - style: TextStyle( - color: Colors.blue, - fontSize: 18, - decoration: TextDecoration.underline), - ), - TextSpan( - text: ' .\n', - ), - ], - ), + return Container( + width: 300, + height: 60, + alignment: Alignment.center, + child: Text('暂不支持Web') +// RichText( +// text: TextSpan( +// text: 'hello ', +// style: TextStyle(color: Colors.black, fontSize: 18), +// children: [ +// WidgetSpan( +// child: Image.asset( +// 'assets/images/icon_head.png', +// width: 30, +// ), +// alignment: PlaceholderAlignment.baseline, +// baseline: TextBaseline.ideographic), +// TextSpan( +// text: ' , welcome to ', +// style: TextStyle(color: Colors.blue, fontSize: 18), +// ), +// WidgetSpan( +// child: FlutterLogo(), +// alignment: PlaceholderAlignment.baseline, +// baseline: TextBaseline.ideographic), +// TextSpan( +// text: ' .\n', +// ), +// TextSpan( +// text: 'focus me on ', +// style: TextStyle(color: Colors.orange, fontSize: 16), +// ), +// TextSpan( +// text: 'https://github.com/toly1994328', +// style: TextStyle( +// color: Colors.blue, +// fontSize: 18, +// decoration: TextDecoration.underline), +// ), +// TextSpan( +// text: ' .\n', +// ), +// ], +// ), +// ), ); } } diff --git a/lib/views/widgets/Other/PerformanceOverlay/node1_base.dart b/lib/views/widgets/Other/PerformanceOverlay/node1_base.dart new file mode 100644 index 0000000..f420a57 --- /dev/null +++ b/lib/views/widgets/Other/PerformanceOverlay/node1_base.dart @@ -0,0 +1,22 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 312 PerformanceOverlay 性能浮层 6 可以非常方便地开启性能监测的两个柱图,方便查看刷新界面时帧率的变化情况。 +// { +// "widgetId": 312, +// "name": "PerformanceOverlay基本使用", +// "priority": 1, +// "subtitle": "使用PerformanceOverlay.allEnabled可以开始所有的监测项。", +// } + +class PerformanceOverlayDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return PerformanceOverlay.allEnabled( + + ); + } +} + diff --git a/lib/views/widgets/Other/RawImage/node1_base.dart b/lib/views/widgets/Other/RawImage/node1_base.dart new file mode 100644 index 0000000..f8a5a0a --- /dev/null +++ b/lib/views/widgets/Other/RawImage/node1_base.dart @@ -0,0 +1,100 @@ +import 'dart:async'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'dart:ui' as ui; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 313 RawImage 6 是实现Image组件的核心组件，可以显示ui的Image,基本属性同Image,一般很少单独使用。 +// { +// "widgetId": 313, +// "name": "RawImage基本使用", +// "priority": 1, +// "subtitle": "【image】 : 图片 【ui.Image】\n" +// "【width】 : 宽 【int】\n" +// "【height】: 高 【int】\n" +// "【isAntiAlias】: 是否抗锯齿 【bool】\n" +// "【filterQuality】: 过滤质量 【FilterQuality】\n" +// "很多属性同Image,详见之.", +// } +class RawImageDemo extends StatefulWidget { + @override + _RawImageDemoState createState() => _RawImageDemoState(); +} + +class _RawImageDemoState extends State { + ui.Image _image; + + @override + void initState() { + super.initState(); + _loadImageFromAssets('assets/images/icon_head.png'); + } + + @override + Widget build(BuildContext context) { + if (_image == null) + return Container( + width: 80, + height: 80, + ); + + return Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + RawImage( + image: _image, + width: 150, + height: 150, + isAntiAlias: true, + filterQuality: FilterQuality.high, + ), + Text('isAntiAlias: true'), + Text('FilterQuality.high') + ], + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + RawImage( + image: _image, + width: 150, + height: 150, + isAntiAlias: false, + ), + Text('isAntiAlias: false'), + Text('FilterQuality.low') + ], + ), + ], + ); + } + + void _loadImageFromAssets(String name) async { + _image = await loadImageByProvider(AssetImage(name)); + + setState(() {}); + } + + //通过ImageProvider读取Image + Future loadImageByProvider( + ImageProvider provider, { + ImageConfiguration config = ImageConfiguration.empty, + }) async { + Completer completer = Completer(); //完成的回调 + ImageStreamListener listener; + ImageStream stream = provider.resolve(config); //获取图片流 + listener = ImageStreamListener((ImageInfo frame, bool sync) { + //监听 + final ui.Image image = frame.image; + completer.complete(image); //完成 + stream.removeListener(listener); //移除监听 + }); + stream.addListener(listener); //添加监听 + return completer.future; //返回 + } +} diff --git a/lib/views/widgets/ProxyWidget/ButtonBarTheme/node1_base.dart b/lib/views/widgets/ProxyWidget/ButtonBarTheme/node1_base.dart new file mode 100644 index 0000000..73d03cd --- /dev/null +++ b/lib/views/widgets/ProxyWidget/ButtonBarTheme/node1_base.dart @@ -0,0 +1,46 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 338 ButtonBarTheme 5 主要用于为后代的ButtonBar组件统一设置默认属性,也可以通过该组件获取默认ButtonBarTheme的属性。 +// { +// "widgetId": 338, +// "name": "ButtonBarTheme基本使用", +// "priority": 1, +// "subtitle": "可指定ButtonBarThemeData数据属性为【后代】的ButtonBar组件设置默认样式，如对齐方式、样式、边距等。也可以用ButtonBarTheme.of获取ButtonBar的主题属性。", +// } + +class ButtonBarThemeDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return ButtonBarTheme( + child: TempButtonBar(), + data: ButtonBarTheme.of(context).copyWith( + alignment: MainAxisAlignment.center, + buttonPadding: EdgeInsets.symmetric(horizontal: 6), + overflowDirection: VerticalDirection.up, + buttonMinWidth: 150, + buttonHeight: 30, + buttonTextTheme: ButtonTextTheme.primary)); + } +} + +class TempButtonBar extends StatelessWidget { + @override + Widget build(BuildContext context) { + return ButtonBar( + alignment: MainAxisAlignment.center, + children: [ + RaisedButton( + color: Colors.blue, child: Text("1.Raised"), onPressed: () {}), + OutlineButton(child: Text("2.Outline"), onPressed: () {}), + FlatButton( + color: Colors.blue, + onPressed: () {}, + child: Text("3.Flat"), + ) + ], + ); + } +} diff --git a/lib/views/widgets/ProxyWidget/TooltipTheme/node1_base.dart b/lib/views/widgets/ProxyWidget/TooltipTheme/node1_base.dart new file mode 100644 index 0000000..d9dff80 --- /dev/null +++ b/lib/views/widgets/ProxyWidget/TooltipTheme/node1_base.dart @@ -0,0 +1,51 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 333 TooltipTheme 5 主要用于为后代的Tooltip组件统一设置默认属性,也可以通过该组件获取默认TooltipTheme的属性。 +// { +// "widgetId": 333, +// "name": "TooltipTheme基本使用", +// "priority": 1, +// "subtitle": "可指定TooltipThemeData数据属性为【后代】的Tooltip组件设置默认样式，如装饰、文字样式、显示时长、边距等。也可以用TooltipTheme.of获取Tooltip的主题属性。", +// } + +class TooltipThemeDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return TooltipTheme( + child: TempTooltip(), + data: TooltipTheme.of(context).copyWith( + preferBelow: false, + padding: EdgeInsets.all(5), + verticalOffset: 20, + margin: EdgeInsets.all(2), + textStyle: TextStyle( + color: Colors.red, + shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]), + decoration: BoxDecoration(boxShadow: [ + BoxShadow( + color: Colors.orangeAccent, + offset: Offset(1, 1), + blurRadius: 8) + ]))); + } +} + +class TempTooltip extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Tooltip( + message: "天王盖地虎", + child: Icon(Icons.info_outline)), + Tooltip( + message: "宝塔镇河妖", + child: Icon(Icons.info_outline)), + ], + ); + } +} diff --git a/lib/views/widgets/StatelessWidget/CupertinoDialogAction/node1_base.dart b/lib/views/widgets/StatelessWidget/CupertinoDialogAction/node1_base.dart new file mode 100644 index 0000000..bc68abc --- /dev/null +++ b/lib/views/widgets/StatelessWidget/CupertinoDialogAction/node1_base.dart @@ -0,0 +1,44 @@ +import 'dart:async'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'dart:ui' as ui; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 352 CupertinoDialogAction 0 一个简单的按钮，通常用于CupertinoAlertDialog中，一般不单独使用。 +// { +// "widgetId": 352, +// "name": "CupertinoDialogAction基本使用", +// "priority": 1, +// "subtitle": "【isDefaultAction】 : 是否是默认性操作 【bool】\n" +// "【isDestructiveAction】 : 是否是毁灭性操作 【bool】\n" +// "【textStyle】: 文字样式 【TextStyle】\n" +// "【onPressed】: 点击事件 【VoidCallback】\n" +// "【child】: 子组件 【Widget】", +// } +class CupertinoDialogActionDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Column( + children: [ + CupertinoDialogAction( + isDestructiveAction: false, + onPressed: ()=>_toast(context), + child: Text('CupertinoDialogAction'), + ), + CupertinoDialogAction( + isDestructiveAction: true, + onPressed: ()=>_toast(context), + child: Text('CupertinoDialogAction'), + ), + ], + ); + } + + _toast(BuildContext context){ + Scaffold.of(context).showSnackBar(SnackBar( + backgroundColor: Theme.of(context).primaryColor, + content: Text('CupertinoDialogAction'),)); + } +} diff --git a/lib/views/widgets/StatelessWidget/zz_no/CupertinoSegmentedControlTest.dart b/lib/views/widgets/StatelessWidget/zz_no/CupertinoSegmentedControlTest.dart new file mode 100755 index 0000000..e1e5607 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/zz_no/CupertinoSegmentedControlTest.dart @@ -0,0 +1,60 @@ +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; + + +//class CupertinoButtonTest extends StatelessWidget { +// CupertinoButtonTest({Key key}) : super(key: key); +// +// @override +// Widget build(BuildContext context) { +// return CupertinoSegmentedControl( +// onValueChanged: (v) { +// print(object) +// }, +// pressedColor: Color(0xff7c1c25), +// borderColor: Color(0xffac172a), +// selectedColor: Color(0xffac172a), +// groupValue: value, +// children: { +// 'a': Container( +// alignment: Alignment.center, +// width: 130.0, +// child: Text('a') +// ), +// 'c': Text('C'), +// 'b': Text('B'), +// }, +// ); +//} +// +class CupertinoSegmentedControlTest extends StatefulWidget { + _Demo createState() => _Demo(); +} + +class _Demo extends State { + String value = 'Java'; + @override + Widget build(BuildContext context) { + return CupertinoSegmentedControl( + onValueChanged: (v) { + this.setState(() { + value = v; + }); + }, + pressedColor: CupertinoColors.activeGreen,//点击时颜色 + borderColor: CupertinoColors.inactiveGray,//边框颜色 + selectedColor: CupertinoColors.activeBlue,//选中的颜色 + groupValue: value,//当前值 + children: {//对于组件 + 'Java': Container( + alignment: Alignment.center, + width: 100.0, + child: Text('Java') + ), + 'Kotlin': Text('Kotlin'), + 'Dart': Text('Dart'), + }, + ); + } +} diff --git a/lib/views/widgets/exp/other_unit.dart b/lib/views/widgets/exp/other_unit.dart index 7f9bb09..bcb507c 100644 --- a/lib/views/widgets/exp/other_unit.dart +++ b/lib/views/widgets/exp/other_unit.dart @@ -6,4 +6,6 @@ library other_unit.dart; export '../Other/ErrorWidget/node1_base.dart'; -export '../Other/Table/node1_base.dart'; \ No newline at end of file +export '../Other/Table/node1_base.dart'; +export '../Other/RawImage/node1_base.dart'; +export '../Other/PerformanceOverlay/node1_base.dart'; \ No newline at end of file diff --git a/lib/views/widgets/exp/proxy_unit.dart b/lib/views/widgets/exp/proxy_unit.dart index 5f5a708..2042101 100644 --- a/lib/views/widgets/exp/proxy_unit.dart +++ b/lib/views/widgets/exp/proxy_unit.dart @@ -22,4 +22,6 @@ export '../ProxyWidget/ChipTheme/node1_base.dart' hide CustomFilterChip; export '../ProxyWidget/ListTileTheme/node1_base.dart'; export '../ProxyWidget/MaterialBannerTheme/node1_base.dart'; export '../ProxyWidget/PopupMenuTheme/node1_base.dart'; -export '../ProxyWidget/ToggleButtonsTheme/node1_base.dart'; \ No newline at end of file +export '../ProxyWidget/ToggleButtonsTheme/node1_base.dart'; +export '../ProxyWidget/ButtonBarTheme/node1_base.dart'; +export '../ProxyWidget/TooltipTheme/node1_base.dart'; diff --git a/lib/views/widgets/exp/stateless_unit.dart b/lib/views/widgets/exp/stateless_unit.dart index 6c135e2..fe813a0 100644 --- a/lib/views/widgets/exp/stateless_unit.dart +++ b/lib/views/widgets/exp/stateless_unit.dart @@ -11,6 +11,7 @@ export '../StatelessWidget/PreferredSize/node1_base.dart'; export '../StatelessWidget/PreferredSize/node2_adapter.dart'; export '../StatelessWidget/Builder/node1_base.dart'; export '../StatelessWidget/NavigationToolbar/node1_base.dart'; +export '../StatelessWidget/CupertinoDialogAction/node1_base.dart'; export '../StatelessWidget/CheckboxListTile/node1_base.dart'; export '../StatelessWidget/CheckboxListTile/node2_select.dart'; diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index c876aff..f480d85 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.dart @@ -103,10 +103,30 @@ class WidgetsMap { return [ ToggleButtonsThemeDemo(), ]; + case "PerformanceOverlay": + return [ + PerformanceOverlayDemo(), + ]; case "NavigationToolbar": return [ NavigationToolbarDemo(), ]; + case "CupertinoDialogAction": + return [ + CupertinoDialogActionDemo(), + ]; + case "ButtonBarTheme": + return [ + ButtonBarThemeDemo(), + ]; + case "RawImage": + return [ + RawImageDemo(), + ]; + case "TooltipTheme": + return [ + TooltipThemeDemo(), + ]; case "CupertinoTextField": return [ CupertinoTextFieldDemo(), @@ -134,7 +154,7 @@ class WidgetsMap { return [ CustomFadeInImage(), ]; - case "InteractiveViewer": + case "InteractiveViewer": return [ InteractiveViewerDemo(), InteractiveViewerDemo2(), @@ -149,7 +169,7 @@ class WidgetsMap { CustomVisibility(), ReplacementVisibility(), ]; - case "RepaintBoundary": + case "RepaintBoundary": return [ RepaintBoundaryDemo(), RepaintBoundarySave(), diff --git a/pubspec.yaml b/pubspec.yaml index 474837e..59cd8ed 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -52,7 +52,7 @@ flutter: - assets/images/head_icon/ - assets/images/widgets/ # - assets/data/widget.json - - assets/flutter.db + - assets/data/node.json # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg