add file

lib/widgets/components/Bar/AppBar/demo.dart

@@ -0,0 +1,135 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午7:33
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: AppBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class AppBarLessDefaultComplex extends StatefulWidget {
+  const AppBarLessDefaultComplex() : super();
+
+  @override
+  State<StatefulWidget> createState() => _AppBarLessDefaultComplex();
+}
+
+/*
+* AppBar 默认的实例,有状态
+* */
+class _AppBarLessDefaultComplex extends State with SingleTickerProviderStateMixin {
+  ScrollController _scrollViewController;
+  TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollViewController = new ScrollController();
+    _tabController = new TabController(vsync: this, length: 6);// 和下面的 TabBar.tabs 数量对应
+  }
+
+  @override
+  void dispose() {
+    _scrollViewController.dispose();
+    _tabController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // 如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。
+    // 否则，如果最近的 Navigator 具有任何先前的 router ，则会插入BackButton。
+    // 这种行为可以通过设置来关闭automaticallyImplyLeading 为false。在这种情况下，空的 leading widget 将导致 middle/title widget 拉伸开始。
+    return new SizedBox(
+      height: 500,
+      child:new AppBar( // 大量配置属性参考 SliverAppBar 示例
+        title: new Text('title'),
+        leading: new Icon(Icons.home),
+        backgroundColor: Colors.amber[500],
+        centerTitle: true,
+        actions: <Widget>[
+          new IconButton(
+              icon: new Icon(Icons.add_alarm),
+              tooltip: 'Add Alarm',
+              onPressed: () {
+                // do nothing
+              }),
+          new PopupMenuButton<String>(
+              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
+                new PopupMenuItem<String>(
+                    value: "price", child: new Text('Sort by price')),
+                new PopupMenuItem<String>(
+                    value: "time", child: new Text('Sort by time')),
+              ],
+              onSelected: (String action) {
+                switch (action) {
+                  case "price":
+                  // do nothing
+                    break;
+                  case "time":
+                  // do nothing
+                    break;
+                }
+              })
+        ],
+        bottom: new TabBar(
+          isScrollable: true,
+          controller: _tabController,
+          tabs: <Widget>[
+            new Tab(text: "Tabs 1"),
+            new Tab(text: "Tabs 2"),
+            new Tab(text: "Tabs 3"),
+            new Tab(text: "Tabs 4"),
+            new Tab(text: "Tabs 5"),
+            new Tab(text: "Tabs 6"),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/*
+* AppBar 默认的实例,无状态
+* */
+class AppBarLessDefaultSimple extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const AppBarLessDefaultSimple([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+      return new SizedBox(
+          height: 200,
+          child:AppBar(
+            title: Text('My Fancy Dress'),
+            actions: <Widget>[
+              IconButton(
+                icon: Icon(Icons.playlist_play),
+                tooltip: 'Air it',
+                onPressed: ()=>{},
+              ),
+              IconButton(
+                icon: Icon(Icons.playlist_add),
+                tooltip: 'Restitch it',
+                onPressed: ()=>{},
+              ),
+              IconButton(
+                icon: Icon(Icons.playlist_add_check),
+                tooltip: 'Repair it',
+                onPressed: ()=>{},
+              ),
+            ],
+          )
+      );
+  }
+}

lib/widgets/components/Bar/AppBar/index.dart

@@ -0,0 +1,97 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午7:30
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: AppBar 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as AppBarDemo;
+
+const String _Text0 =
+"""### **简介**
+> AppBar “应用栏”
+- 应用栏由工具栏和可能的其他 widget 组成，例如 TabBar和FlexibleSpaceBar。
+- 应用栏通常用于 Scaffold.appBa r属性，该属性将应用栏放置在屏幕顶部的固定高度小部件中。
+- 对于可滚动的应用栏，请参阅SliverAppBar，它将AppBar嵌入 sliver 中以便在CustomScrollView中使用。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> AppBar
+- AppBar 在底部上方显示工具栏 widget，前导 leading ，标题 title 和操作 actions。
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> AppBar
+- 一个完整的 AppBar 的例子, 增加 PopupMenuButton,TabBar 的示例子。
+- 所述底部通常用于一个的TabBar。如果指定了flexibleSpace窗口小部件，则它将堆叠在工具栏和底部窗口 widget 后面。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Bar/AppBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'AppBar',
+      codeUrl: '${Application.github['widgetsURL']}componentss/Bar/AppBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/AppBar-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 AppBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            AppBarDemo.AppBarLessDefaultSimple(),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text2),
+            SizedBox(height: 20.0), // 间距
+            AppBarDemo.AppBarLessDefaultComplex(),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt) {
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+          ])
+  );
+}
+
+

lib/widgets/components/Bar/BottomAppBar/demo.dart

@@ -0,0 +1,47 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午8:56
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: BottomAppBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* AppBar 默认的实例,无状态
+* */
+class AppBarLessDefaultSimple extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const AppBarLessDefaultSimple([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new SizedBox(
+      height: 100,
+      child: Scaffold(
+        //appBar: AppBar(title: const Text('Bottom App Bar')),
+        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+        floatingActionButton: FloatingActionButton(
+          child: const Icon(Icons.add), onPressed: () {},),
+          bottomNavigationBar: BottomAppBar(
+            shape: CircularNotchedRectangle(),
+            notchMargin: 10.0,// FloatingActionButton和BottomAppBar 之间的差距
+            color:Colors.pink,
+            child: Row(
+              mainAxisSize: MainAxisSize.max,
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: <Widget>[
+                IconButton(icon: Icon(Icons.menu), onPressed: () {},),
+                IconButton(icon: Icon(Icons.search), onPressed: () {},),
+              ],
+            ),
+          ),
+        )
+    );
+}}

lib/widgets/components/Bar/BottomAppBar/index.dart

@@ -0,0 +1,76 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午8:53
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: BottomAppBar 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as BottomAppBarDemo;
+
+const String _Text0 =
+"""### **简介**
+> BottomAppBar “底部应用栏”
+- 一个通常与 Scaffold.bottomNavigationBar 一起使用的容器，可以在顶部有一个凹口，为重叠的FloatingActionButton腾出空间 。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 通常与Scaffold和FloatingActionButton一起使用。
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> BottomAppBar
+- 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components//Bar/BottomAppBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'BottomAppBar',
+      codeUrl: '${Application.github['widgetsURL']}componentss/Bar/BottomAppBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/BottomAppBar-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 BottomAppBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            BottomAppBarDemo.AppBarLessDefaultSimple(),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}
+
+
+

lib/widgets/components/Bar/ButtonBar/demo.dart

@@ -0,0 +1,76 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午11:11
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: ButtonBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class ButtonBarFullDefault extends StatefulWidget {
+  const ButtonBarFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _ButtonBarFullDefault();
+}
+
+/*
+* ButtonBar 默认的实例,有状态
+* */
+class _ButtonBarFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return ButtonBar(
+      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
+    );
+  }
+}
+
+/*
+* ButtonBar 默认的实例,无状态
+* */
+class ButtonBarLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const ButtonBarLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        margin: new EdgeInsets.symmetric(vertical: 0.0),
+        height: 100.0,
+        child: new Scrollbar(child:ListView(
+            scrollDirection: Axis.horizontal, // 水平listView
+            children: <Widget>[
+              ButtonBar(
+                alignment: MainAxisAlignment.spaceAround, //布局方向，默认MainAxisAlignment.end
+                mainAxisSize: MainAxisSize.max, //主轴大小，默认MainAxisSize.max
+                children: <Widget>[ // Button集合
+                  RaisedButton(child: Text('ButtonBar1'),color: Colors.red,onPressed: ()=>{},),
+                  RaisedButton(child: Text('ButtonBar2'),color: Colors.red,onPressed: ()=>{},),
+                  RaisedButton(child: Text('ButtonBar3'),color: Colors.red,onPressed: ()=>{},),
+                ],
+              ),
+              ButtonBar(
+                alignment: MainAxisAlignment.end, //布局方向，默认MainAxisAlignment.end
+                mainAxisSize: MainAxisSize.min, //主轴大小，默认MainAxisSize.max
+                children: <Widget>[ // Button集合
+                  RaisedButton(child: Text('ButtonBar1'),color: Colors.yellow,onPressed: ()=>{},),
+                  RaisedButton(child: Text('ButtonBar2'),color: Colors.yellow,onPressed: ()=>{},),
+                  RaisedButton(child: Text('ButtonBar3'),color: Colors.yellow,onPressed: ()=>{},),
+                ],
+              )
+            ]
+        )
+    ));
+  }
+}

lib/widgets/components/Bar/ButtonBar/index.dart

@@ -0,0 +1,75 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午11:10
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: ButtonBar 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as ButtonBarDemo;
+
+const String _Text0 =
+"""### **简介**
+> ButtonBar “末端对齐的按钮容器”
+- 横排的Button布局
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 根据当前ButtonTheme中的填充水平放置按钮 。子 button 在布置行与 MainAxisAlignment.end
+- 当Directionality为TextDirection.ltr时，按钮栏的子项右对齐，最后一个子项成为最右边的子项。当Directionality TextDirection.rtl时，子项被左对齐，最后一个子项成为最左边的子项。
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> ButtonBar
+- 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Bar/ButtonBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'ButtonBar',
+      codeUrl: '${Application
+          .github['widgetsURL']}componentss//Bar/ButtonBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/ButtonBar-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 ButtonBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            //SizedBox(height: 20.0), // 间距
+            ButtonBarDemo.ButtonBarLessDefault()
+          ])
+  );
+}
+

lib/widgets/components/Bar/FlexibleSpaceBar/demo.dart

@@ -0,0 +1,78 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午10:38
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlexibleSpaceBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class FlexibleSpaceBarFullDefault extends StatefulWidget {
+  const FlexibleSpaceBarFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _FlexibleSpaceBarFullDefault();
+}
+
+/*
+* FlexibleSpaceBar 默认的实例,有状态
+* */
+class _FlexibleSpaceBarFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return FlexibleSpaceBar(
+      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
+    );
+  }
+}
+
+/*
+* FlexibleSpaceBar 默认的实例,无状态
+* */
+class FlexibleSpaceBarLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const FlexibleSpaceBarLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        height: 300.0,
+        child: Scaffold(
+          body: NestedScrollView(
+            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
+              return <Widget>[
+                SliverAppBar(
+                  expandedHeight: 150.0,
+                  floating: false,
+                  pinned: true,
+                  flexibleSpace: FlexibleSpaceBar(
+                      centerTitle: true,
+                      title: Text("Collapsing Toolbar",
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontSize: 16.0,
+                          )),
+                      background: Image.network(
+                        "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
+                        fit: BoxFit.cover,
+                      )),
+                ),
+              ];
+            },
+            body: Center(
+              child: Text("向上提拉 ⬆ 查看效果..."),
+            ),
+          ),
+        )
+    );
+}}

lib/widgets/components/Bar/FlexibleSpaceBar/index.dart

@@ -0,0 +1,77 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午10:38
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlexibleSpaceBar 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as FlexibleSpaceBarDemo;
+
+const String _Text0 =
+"""### **简介**
+> FlexibleSpaceBar “扩展和折叠的应用栏”
+- AppBar的一部分，可以扩展和折叠。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 最常用于 SliverAppBar.flexibleSpace 字段
+- 灵活的空格键随着应用滚动而扩展和收缩，以便AppBar 从应用程序的顶部到达应用程序滚动内容的顶部。
+- 要调整 AppBar 大小,必须将其包装在 FlexibleSpaceBar.createSettings 返回的 widget 中 ，以将大小调整信息传递给 FlexibleSpaceBar。
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> FlexibleSpaceBar
+- 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components//Bar/FlexibleSpaceBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'FlexibleSpaceBar',
+      codeUrl: '${Application
+          .github['widgetsURL']}componentss/Bar/FlexibleSpaceBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/FlexibleSpaceBar-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 FlexibleSpaceBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            FlexibleSpaceBarDemo.FlexibleSpaceBarLessDefault(),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}
+

lib/widgets/components/Bar/SliverAppBar/demo.dart

@@ -0,0 +1,165 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午4:11
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: SliverAppBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class SliverAppBarFullDefault extends StatefulWidget {
+  const SliverAppBarFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _SliverAppBarFullDefault();
+}
+
+/*
+* SliverAppBar 默认的实例,有状态
+* */
+class _SliverAppBarFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return SliverAppBar(
+      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
+    );
+  }
+}
+
+/*
+* SliverAppBar 默认的实例,无状态
+* */
+class SliverAppBarLessDefault extends StatelessWidget {
+//  final widget;
+//  final parent;
+//  const SliverAppBarLessDefault([this.widget, this.parent])
+//      : super();
+
+  final List<ListItem> listData = [];
+  @override
+  Widget build(BuildContext context) {
+    for (int i = 0; i < 20; i++) {
+      listData.add(new ListItem("我是测试标题$i", Icons.cake));
+    }
+    return new SizedBox(
+        height: 500.0,
+        child:NestedScrollView(
+          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
+            return <Widget>[
+              SliverAppBar(
+                //leading, // 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
+                //title, // Toolbar 中主要内容，通常显示为当前界面的标题文字
+                //actions, // 一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
+                //flexibleSpace,
+                //bottom,         //底部内容区域
+                //elevation, //阴影,纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值
+                //flexibleSpace：一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
+                //backgroundColor,  // 背景色,APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
+                //brightness,   // 主题明亮,App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
+                //iconTheme,  // 图标主题,App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
+                //textTheme,    //文字主题, App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
+                //centerTitle,     //标题是否居中, 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样
+                primary: true,  //是否预留高度
+                forceElevated:false,
+                automaticallyImplyLeading:true,
+                titleSpacing: NavigationToolbar.kMiddleSpacing,
+                snap:false,   //与floating结合使用
+                expandedHeight: 200.0,//展开高度
+                floating: false,//是否随着滑动隐藏标题
+                pinned: true,//是否固定在顶部
+                flexibleSpace: FlexibleSpaceBar( //可以展开区域，通常是一个FlexibleSpaceBar
+                    centerTitle: true,
+                    title: Text("我是一个帅气的标题",
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontSize: 16.0,
+                        )),
+                    background: Image.network(
+                      //"http://h.hiphotos.baidu.com/image/pic/item/342ac65c103853434cc02dda9f13b07eca80883a.jpg",
+                      "http://b.zol-img.com.cn/desk/bizhi/image/6/960x600/1432800027589.jpg",
+                      //"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531798262708&di=53d278a8427f482c5b836fa0e057f4ea&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F342ac65c103853434cc02dda9f13b07eca80883a.jpg",
+                      fit: BoxFit.fill,
+                    )),
+              ),
+  //            SliverPersistentHeader(
+  //                delegate: _SliverAppBarDelegate(
+  //                  TabBar(
+  //                    controller: new TabController(length: 2, vsync: this),
+  //                    labelColor: Colors.black87,
+  //                    unselectedLabelColor: Colors.grey,
+  //                    tabs: [
+  //                      Tab(icon: Icon(Icons.security), text: "security"),
+  //                      Tab(icon: Icon(Icons.cake), text: "cake"),
+  //                    ],
+  //                  ),
+  //                ))
+            ];
+        },
+      body: Center(
+        child: new ListView.builder(
+          shrinkWrap: true,
+          itemBuilder: (BuildContext context, int index) {
+            return new ListItemWidget(listData[index]);
+          },
+          itemCount: listData.length,
+        ),
+      ),
+    ));
+  }
+}
+
+class ListItem {
+  final String title;
+  final IconData iconData;
+
+  ListItem(this.title, this.iconData);
+}
+
+class ListItemWidget extends StatelessWidget {
+  final ListItem listItem;
+
+  ListItemWidget(this.listItem);
+
+  @override
+  Widget build(BuildContext context) {
+    return new InkWell(
+      child: new ListTile(
+        leading: new Icon(listItem.iconData),
+        title: new Text(listItem.title),
+      ),
+      onTap: () {},
+    );
+  }
+}
+
+class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
+  _SliverAppBarDelegate(this._tabBar);
+
+  final TabBar _tabBar;
+
+  @override
+  double get minExtent => _tabBar.preferredSize.height;
+
+  @override
+  double get maxExtent => _tabBar.preferredSize.height;
+
+  @override
+  Widget build(
+      BuildContext context, double shrinkOffset, bool overlapsContent) {
+    return new Container(
+      child: _tabBar,
+    );
+  }
+
+  @override
+  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
+    return false;
+  }
+}

lib/widgets/components/Bar/SliverAppBar/index.dart

@@ -0,0 +1,85 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午4:10
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: SliverAppBar 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as SliverAppBarDemo;
+
+const String _Text0 =
+"""### **简介**
+> SliverAppBar “应用栏”
+- 它类似于Android中的toolbar。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 虽然基本相同，构造方法也是非常的简单，但是却不能直接使用它，由官方文档可以看到通常结合ScrollView来使用它。
+- AppBar 和 SliverAppBar 都是继承StatefulWidget 类，都代表 Toobar。
+- 二者的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是可以跟随内容滚动的。
+- 下面的示例,放在 NestedScrollView 实现上提到顶的悬停。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Bar/SliverAppBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SliverAppBar',
+      codeUrl: '${Application.github['widgetsURL']}componentss/Bar/SliverAppBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/widgets/SliverAppBar-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 SliverAppBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            SliverAppBarDemo.SliverAppBarLessDefault()
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt) {
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+          ])
+  );
+}
+
+

lib/widgets/components/Bar/SnackBar/demo.dart

@@ -0,0 +1,87 @@
+/**
+  * Created with Android Studio.
+  * User: ryan
+  * Date: 2019/1/2
+  * Time: 上午12:07
+  * email: zhu.yan@alibaba-inc.com
+  * tartget: SnackBar 的示例
+  */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class SnackBarFullDefault extends StatefulWidget {
+  const SnackBarFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _SnackBarFullDefault();
+}
+
+/*
+* SnackBar 默认的实例,有状态
+* */
+class _SnackBarFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return SnackBar(
+      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
+    );
+  }
+}
+
+/*
+* SnackBar 默认的实例,无状态
+* */
+class SnackBarLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const SnackBarLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    // 当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决
+    return new Center(
+        child: new Column(
+          children: <Widget>[
+            new GestureDetector(
+              onTap: () {
+                final snackBar = new SnackBar(
+                  content: new Text('这是一个SnackBar, 右侧有SnackBarAction'),
+                  backgroundColor:Colors.red,
+                  action: new SnackBarAction( // 提示信息上添加一个撤消的按钮
+                    textColor:Colors.black,
+                    label: '撤消',
+                    onPressed: () {
+                      // Some code to undo the change!
+                    },
+                  ),
+                  duration:Duration(minutes: 1),// 持续时间
+                  //animation,
+                );
+                Scaffold.of(context).showSnackBar(snackBar);
+              },
+              child: new Text('显示SnackBar'),
+            ),
+            new GestureDetector(
+              onTap: () {
+                final snackBar = new SnackBar(
+                  content: new Text('右侧无SnackBarAction'),
+                  backgroundColor:Colors.red,
+                  duration:Duration(minutes: 1),// 持续时间
+                  //animation,
+                );
+                Scaffold.of(context).showSnackBar(snackBar);
+              },
+              child: new Text('显示无SnackBarAction的SnackBar'),
+            ),
+          ],
+        )
+    );
+  }
+}

lib/widgets/components/Bar/SnackBar/index.dart

@@ -0,0 +1,91 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/2
+ * Time: 上午12:06
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: SnackBar 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as SnackBarDemo;
+
+const String _Text0 =
+"""### **简介**
+> SnackBar “屏幕底部消息”
+- 带有可选操作的轻量级消息，短暂显示在屏幕底部。
+- SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> Scaffold.of(context).showSnackBar()，传递描述消息的SnackBar实例。
+- 要控制SnackBar保持可见的时间，请指定持续时间。
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> SnackBar
+- 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components//Bar/SnackBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SnackBar',
+      codeUrl: '${Application.github['widgetsURL']}componentss/Bar/SnackBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/SnackBar-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 SnackBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            SnackBarDemo.SnackBarLessDefault(),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt) {
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+          ])
+  );
+}
+
+

lib/widgets/components/Bar/SnackBarAction/demo.dart

@@ -0,0 +1,61 @@
+/**
+ * Created with Android Studio.
+ * User: sanfan.hx
+ * Date: 2019/1/6
+ * Time: 下午17:08
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget: SnackBarAction 的示例
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+class SnackBarActionDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<SnackBarActionDemo> {
+  Widget build(BuildContext context) {
+      return new Center(
+        child: new Column(
+          children: <Widget>[
+            new GestureDetector(
+              onTap: () {
+                final snackBar = new SnackBar(
+                  content: new Text('这是一个SnackBar, 右侧有SnackBarAction, 3秒后消失'),
+                  backgroundColor:Color(0xffc91b3a),
+                  action: new SnackBarAction( // 提示信息上添加一个撤消的按钮
+                    textColor:Colors.white,
+                    label: '撤消',
+                    onPressed: () {
+                      // Some code to undo the change!
+                    },
+                  ),
+                  duration:Duration(seconds: 3),// 持续时间
+                  //animation,
+                );
+                Scaffold.of(context).showSnackBar(snackBar);
+              },
+             
+              child: new Text('点我显示有action的SnackBar'),
+            ),
+            new GestureDetector(
+              onTap: () async {
+                final snackBar = new SnackBar(
+                  content: new Text('右侧无SnackBarAction, 3秒后消失'),
+                  backgroundColor:Color(0xffc91b3a),
+                  duration:Duration(seconds: 3),// 持续时间
+                  //animation,
+                );
+                Scaffold.of(context).showSnackBar(snackBar);
+              },
+              child: new Text('点我显示无SnackBarAction的SnackBar'),
+            ),
+          ],
+        )
+    );
+  }
+
+}

lib/widgets/components/Bar/SnackBarAction/index.dart

@@ -0,0 +1,50 @@
+/**
+ * Created with Android Studio.
+ * User: sanfan.hx
+ * Date: 2019/1/6
+ * Time: 下午17:08
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget: SnackBarAction 的示例
+ */
+import '../../../../common/widget_demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import '../../../../components/markdown.dart';
+import './demo.dart' as SnackBarDemo;
+
+const String _Text0 = """
+### **简介**
+> SnackBarAction “屏幕底部消息右侧可操作的行为”
+
+带有可选操作的轻量级消息，短暂显示在屏幕底部, 并提供按钮交互。
+
+### **基本用法**
+
+> 为SnackBar加入action[SnackBarAction]显示按区, 默认下是隐藏的.
+
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Bar/SnackBarAction';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SnackBarAction',
+      codeUrl: 'components/Bar/SnackBarAction/demo.dart',
+      contentList: [
+        _Text0,
+        SnackBarDemo.SnackBarActionDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/SnackBarAction-class.html',
+    );
+  }
+}

lib/widgets/components/Bar/TabBar/demo.dart

@@ -0,0 +1,78 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/6
+ * Time: 下午7:33
+ * email: sanfann@alibaba-inc.com
+ * tartget: TabBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+class TabBarDemo extends StatefulWidget {
+  const TabBarDemo() : super();
+
+  @override
+  State<StatefulWidget> createState() => _TabBarDemo();
+}
+
+/*
+* AppBar 默认的实例,有状态
+* */
+class _TabBarDemo extends State with SingleTickerProviderStateMixin {
+  ScrollController _scrollViewController;
+  TabController _tabController;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollViewController = new ScrollController();
+    _tabController = new TabController(vsync: this, length: 6);// 和下面的 TabBar.tabs 数量对应
+  }
+
+  @override
+  void dispose() {
+    _scrollViewController.dispose();
+    _tabController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // 如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。
+    // 否则，如果最近的 Navigator 具有任何先前的 router ，则会插入BackButton。
+    // 这种行为可以通过设置来关闭automaticallyImplyLeading 为false。在这种情况下，空的 leading widget 将导致 middle/title widget 拉伸开始。
+    return new SizedBox(
+      height: 500,
+      child:new Scaffold(
+        appBar: new AppBar( // 大量配置属性参考 SliverAppBar 示例
+          title: new Text('TabBar'),
+          leading: new Icon(Icons.home),
+          backgroundColor: Colors.amber[1000],
+          bottom: new TabBar(
+            isScrollable: true,
+            controller: _tabController,
+            tabs: <Widget>[
+              new Tab(text: "Tabs 1"),
+              new Tab(text: "Tabs 2"),
+              new Tab(text: "Tabs 3"),
+              new Tab(text: "Tabs 4"),
+              new Tab(text: "Tabs 5"),
+              new Tab(text: "Tabs 6"),
+            ],
+          ),
+        ),
+        body: new TabBarView(controller: _tabController, children: <Widget>[
+          Text('TabsView 1'),
+          Text('TabsView 2'),
+          Text('TabsView 3'),
+          Text('TabsView 4'),
+          Text('TabsView 5'),
+          Text('TabsView 6'),
+        ]),
+      )
+
+    );
+  }
+}

lib/widgets/components/Bar/TabBar/index.dart

@@ -0,0 +1,70 @@
+/**
+ * Created with Android Studio.
+ * User: sanfan.hx
+ * Date: 2019/1/6
+ * Time: 下午17:08
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget: SnackBarAction 的示例
+ */
+import '../../../../common/widget_demo.dart';
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import './demo.dart';
+
+const String _Text0 = """
+### **简介**
+> SnackBarAction 来实现并行界面的横向滑动展示
+
+TabBar，是材料设计中很常用的一种横向标签. 来实现并行界面的横向滑动展示，在Flutter的世界中，TabBar有着相同的作用。通常，我们会在AppBar的底部部分结合TabBarView来使用TabBar。
+
+
+
+### **基本用法**
+
+> 在容器顶部或者底部配置, TabBar组件, 横向切换视口窗口中的内容
+
+
+**TabBar** 有以下几项属性
+
+- tabs 一般使用Tab对象,当然也可以是其他的Widget
+- controller TabController对象
+- isScrollable 是否可滚动
+- indicatorColor 指示器颜色
+- indicatorWeight 指示器厚度
+- indicatorPadding 底部指示器的Padding
+- indicator 指示器decoration，例如边框等
+- indicatorSize 指示器大小计算方式
+- labelColor 选中Tab文字颜色
+- labelStyle 选中Tab文字Style
+- unselectedLabelColor 未选中Tab中文字颜色
+- unselectedLabelStyle 未选中Tab中文字style
+
+**TabBarView** 有以下几项属性
+- children tabBar中对象分别对应的视图窗口内容, children的长度通常与tabs中的tab对象长度相同
+- controller TabController对象
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Bar/TabBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'TabBar',
+      codeUrl: 'components/Bar/TabBar/index.dart',
+      contentList: [
+        _Text0,
+        TabBarDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/SnackBarAction-class.html',
+    );
+  }
+}

lib/widgets/components/Bar/index.dart

@@ -0,0 +1,68 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/12/27
+ * Time: 下午2:50
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'SliverAppBar/index.dart' as SliverAppBar;
+import 'AppBar/index.dart' as AppBar;
+import 'BottomAppBar/index.dart' as BottomAppBar;
+import 'FlexibleSpaceBar/index.dart' as FlexibleSpaceBar;
+import 'ButtonBar/index.dart' as ButtonBar;
+import 'SnackBar/index.dart' as SnackBar;
+import 'SnackBarAction/index.dart' as SnackBarAction;
+import 'TabBar/index.dart' as TabBar;
+
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'AppBar',
+    routerName: AppBar.Demo.routeName,
+    buildRouter: (BuildContext context) => AppBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SliverAppBar',
+    routerName: SliverAppBar.Demo.routeName,
+    buildRouter: (BuildContext context) => SliverAppBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'BottomAppBar',
+    routerName: BottomAppBar.Demo.routeName,
+    buildRouter: (BuildContext context) => BottomAppBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'FlexibleSpaceBar',
+    routerName: FlexibleSpaceBar.Demo.routeName,
+    buildRouter: (BuildContext context) => FlexibleSpaceBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ButtonBar',
+    routerName: ButtonBar.Demo.routeName,
+    buildRouter: (BuildContext context) => ButtonBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SnackBar',
+    routerName: SnackBar.Demo.routeName,
+    buildRouter: (BuildContext context) => SnackBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SnackBarAction',
+    routerName: SnackBarAction.Demo.routeName,
+    buildRouter: (BuildContext context) => SnackBarAction.Demo(),
+  ),
+  WidgetPoint(
+    name: 'TabBar',
+    routerName: TabBar.Demo.routeName,
+    buildRouter: (BuildContext context) => TabBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'TabBarView',
+    routerName: TabBar.Demo.routeName,
+    buildRouter: (BuildContext context) => TabBar.Demo(),
+  ),
+];

lib/widgets/components/Card/Card/demo.dart

@@ -0,0 +1,86 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午2:57
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: Card 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class CardFullDefault extends StatefulWidget {
+  const CardFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _CardFullDefault();
+}
+
+/*
+* Card 默认的实例,有状态
+* */
+class _CardFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
+    );
+  }
+}
+
+/*
+* Card 默认的实例,无状态
+* */
+class CardLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const CardLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      clipBehavior:Clip.antiAlias,// 根据设置裁剪内容
+      color:Colors.green, //  卡片背景颜色
+      elevation:20.0, // 卡片的z坐标,控制卡片下面的阴影大小
+      margin:EdgeInsets.all(20.0),
+      //  margin: EdgeInsetsDirectional.only(bottom: 30.0, top: 30.0, start: 30.0),// 边距
+      semanticContainer:true, // 表示单个语义容器，还是false表示单个语义节点的集合，接受单个孩子，但该孩子可以是Row，Column或其他包含子级列表的widget
+//      shape:new Border.all(
+//          color: Colors.indigo, width: 1.0, style: BorderStyle.solid), // 卡片材质的形状，以及边框
+      shape:RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0)), // 圆角
+      //borderRadius: BorderRadius.all(Radius.circular(8.0)),
+      child: Column( //card里面的子控件
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          const ListTile(
+            leading: Icon(Icons.access_time),
+            title: Text('The Enchanted Nightingale',style: TextStyle(color: Colors.white, fontSize: 40.0)),
+            subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.',style: TextStyle(color: Colors.yellow, fontSize: 16.0)),
+            contentPadding: EdgeInsets.all(20.0),// item 内容内边距
+          ),
+          ButtonTheme.bar( // make buttons use the appropriate styles for cards
+            child: ButtonBar(
+              children: <Widget>[
+                FlatButton(
+                  child: const Text('BUY TICKETS',style: TextStyle(color: Colors.black, fontSize: 14.0)),
+                  onPressed: () { /* ... */ },
+                ),
+                FlatButton(
+                  child: const Text('LISTEN',style: TextStyle(color: Colors.black, fontSize: 14.0)),
+                  onPressed: () { /* ... */ },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/components/Card/Card/index.dart

@@ -0,0 +1,74 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午2:56
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: Card 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as CardDemo;
+
+const String _Text0 =
+"""### **简介**
+> Card “卡片”
+- 卡片是用于表示一些相关信息的一张材料，例如相册，地理位置，用餐，联系方式等
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 此示例显示了创建卡片窗口组件，其中显示了相册信息和两个操作
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> Card
+- 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Card/Card';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Card',
+      codeUrl: '${Application
+          .github['widgetsURL']}componentss/Card/Card/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/Card-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 Card widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            CardDemo.CardLessDefault()
+          ])
+  );
+}
+

lib/widgets/components/Card/index.dart

@@ -0,0 +1,20 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/12/27
+ * Time: 下午2:50
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'Card/index.dart' as Card;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Card',
+    routerName: Card.Demo.routeName,
+    buildRouter: (BuildContext context) => Card.Demo(),
+  )
+];

lib/widgets/components/Chip/Chip/demo.dart

@@ -0,0 +1,84 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-18 11:40:57 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-20 15:03:18
+ */
+import 'package:flutter/material.dart';
+
+class ChipDemo extends StatefulWidget {
+  _ChipDemoState createState() => _ChipDemoState();
+}
+
+class _ChipDemoState extends State<ChipDemo> {
+  String dec='点击回收';
+  int count=0;
+  _modifty(){
+    setState(() {
+           dec='delete success: $count';
+        });
+   
+  }
+  
+  @override
+  Widget build(BuildContext context) {
+    return  Column(
+        children: <Widget>[
+          Container(
+            child: Chip(
+              padding: EdgeInsets.only(right: 100.0,),
+           //标签前面的小widget
+          avatar: CircleAvatar(
+           backgroundColor: Colors.red.shade200,
+           child: Text('A',style: TextStyle(color: Colors.white),),
+          
+         ),
+         label: Text('pai mai  ',style: TextStyle(color: Colors.white,fontSize: 18.0),),
+         backgroundColor: Colors.red.shade100,
+         labelPadding: EdgeInsets.all(6.0),
+       ),
+    ),
+      Container(
+      
+        height: 100.0,
+        child: Chip(
+          //头像
+          avatar: CircleAvatar(
+            child: Icon(Icons.account_circle,color: Colors.red.shade200,),
+            backgroundColor:Colors.white,
+            
+          ),
+          //设置widget背景颜色
+          backgroundColor: Colors.red.shade100,
+         /**剪辑窗口widget内容
+          * antiAlias:剪辑具有抗锯齿功能，它比antiAliasWithSaveLayer快得多，但比hardEdge慢。
+          antiAliasWithSaveLayer:立即剪辑具有抗锯齿，并且可以分配屏幕外缓冲区，后续涂料都在该缓冲区完成，然后再进行修剪和合成
+          */
+          clipBehavior: Clip.antiAlias,
+          
+          //设置padding值
+          labelPadding: EdgeInsets.all(8.0),
+          label: Text(dec),
+           //设置onDeleted时候显示的图标
+          deleteIcon: Icon(Icons.delete,color: Colors.white,size: 20.0,),
+          onDeleted: (){
+            count++;
+            _modifty();
+          },
+          deleteButtonTooltipMessage: '删除',
+          deleteIconColor: Colors.blueGrey.shade100,
+          //将最小点击目标大小扩展到48*48px
+          materialTapTargetSize: MaterialTapTargetSize.padded,
+          padding: EdgeInsets.all(2.0),
+          //修改字体格式
+          labelStyle: TextStyle(fontWeight: FontWeight.bold),
+          // shape: _MyBorder(),
+        ),
+      )
+        ],
+    );
+  }
+}
+
+
+

lib/widgets/components/Chip/Chip/index.dart

@@ -0,0 +1,41 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-18 11:40:57 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 15:13:23
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> chip是表示属性，文本，实体或动作的元素
+- 需要在Material wedige 中。 
+''';
+const String content1 = '''
+### **基本用法**
+- 需要Material widget.
+- 这个label和clipBehavior参数不能为空
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/Chip';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+         ChipDemo(),
+        ],
+        codeUrl: 'components/Chip/Chip/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/Chip-class.html',
+        title: 'Chip');
+  }
+}

lib/widgets/components/Chip/ChipTheme/demo.dart

@@ -0,0 +1,60 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-18 15:14:10 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 19:15:25
+ */
+import 'package:flutter/material.dart';
+
+class ChipThemeDemo extends StatefulWidget {
+  _ChipThemeDemoState createState() => _ChipThemeDemoState();
+}
+
+class _ChipThemeDemoState extends State<ChipThemeDemo> {
+  Color _color = Colors.red;
+
+  @override
+  Widget build(BuildContext context) {
+    return ChipTheme(
+      data: ChipTheme.of(context).copyWith(backgroundColor:Colors.red.shade800 ),
+      child: ChoiceChip(
+        padding: EdgeInsets.only(left: 100.0,right: 100.0,top: 10.0,bottom: 10.0),
+        label: Text('down'),
+        labelStyle: TextStyle(color: Colors.white),
+        onSelected: (bool value) {
+          setState(() {
+            _color = value ? Colors.lightBlue : Colors.red;
+          });
+        },
+        selected: _color == Colors.lightBlue,
+      ),
+    );
+  }
+}
+
+  // Widget build(BuildContext context) {
+  
+  //   return Container(
+  //     child: ChipTheme(
+  //       data: ChipThemeData(
+  //         backgroundColor: Colors.red.shade500,
+  //         //描述颜色对比度（暗，亮，设置固定值）
+  //         brightness : Brightness.dark,
+  //         deleteIconColor: Colors.red.shade200,
+  //         //背景颜色，表示它被禁用
+  //         disabledColor: Colors.grey.shade50,
+  //         labelPadding: EdgeInsets.all(10.0),
+  //         labelStyle: TextStyle(fontSize: 15.0,fontStyle: FontStyle.italic),
+  //         padding: EdgeInsets.all(2.0),
+  //         //用于另一种chip widget 标签样式
+  //         secondaryLabelStyle: TextStyle(fontSize: 20.0,fontStyle: FontStyle.normal),
+  //         selectedColor: Colors.yellow,
+  //         //表示已经选中度颜色
+  //         secondarySelectedColor: Colors.black
+  //         // shape: 
+  //       ),
+  //     ),
+  //   );
+
+    
+  // }

lib/widgets/components/Chip/ChipTheme/index.dart

@@ -0,0 +1,42 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-18 15:14:03 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2018-12-18 15:14:03 
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 基于 RawChip-based widgets，如chip，inputChip,ChoiceChip,FilterChip等
+- chipTheme描述了应用它的chip的颜色，形状和文本样式
+ 
+''';
+const String content1 = '''
+### **基本用法**
+- 可通过chipTheme.of获取当前主题的ChipThemeData对象
+- 当widget使用ChipTheme.of时，如果主题稍后更改，则会自动重建。
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/ChipTheme';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+         ChipThemeDemo(),
+        ],
+        codeUrl: 'components/Chip/ChipTheme/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/ChipTheme-class.html',
+        title: 'ChipTheme');
+  }
+}

lib/widgets/components/Chip/ChipThemeData/demo.dart

@@ -0,0 +1,38 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-18 15:14:10 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 19:39:41
+ */
+import 'package:flutter/material.dart';
+
+class ChipThemeDemo extends StatefulWidget {
+  _ChipThemeDemoState createState() => _ChipThemeDemoState();
+}
+
+class _ChipThemeDemoState extends State<ChipThemeDemo> {
+  Color _color = Colors.red;
+
+  @override
+  Widget build(BuildContext context) {
+    return ChipTheme(
+      data: ChipThemeData.fromDefaults(
+        // brightness: Brightness.dark,
+      labelStyle: TextStyle(fontSize: 15.0), 
+      primaryColor: Colors.red,secondaryColor: Colors.red.shade800),
+      child: ChoiceChip(
+        padding: EdgeInsets.only(left: 100.0,right: 100.0,top: 10.0,bottom: 10.0),
+        label: Text('down'),
+        onSelected: (bool value) {
+          setState(() {
+            _color = value ? Colors.black : Colors.red;
+          });
+        },
+        selected: _color == Colors.black,
+      ),
+    );
+  }
+}
+
+
+  

lib/widgets/components/Chip/ChipThemeData/index.dart

@@ -0,0 +1,42 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-18 15:14:03 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 17:38:56
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 保存chip主题的颜色，形状和文本样式
+- 使用它配置chipTheme widget，或者为Theme widget小部件设置 ThemeData.chipTheme。
+ 
+''';
+const String content1 = '''
+### **基本用法**
+- 创建ChipThemeData最简单的方法是使用copyWith您从得到一个ChipTheme.of，
+或创建一个全新的一个具有 ChipThemeData..fromDefaults。。
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/ChipThemeData';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+         ChipThemeDemo(),
+        ],
+        codeUrl: 'components/Chip/ChipThemeData/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/ChipThemeData-class.html',
+        title: 'ChipThemeData');
+  }
+}

lib/widgets/components/Chip/ChoiceChip/demo.dart

@@ -0,0 +1,62 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-19 15:13:24 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-20 19:32:10
+ */
+
+import 'package:flutter/material.dart';
+
+class ChoiceChipDemo extends StatefulWidget {
+  _ChoiceChipDemoState createState() => _ChoiceChipDemoState();
+}
+
+class _ChoiceChipDemoState extends State<ChoiceChipDemo> {
+   String _selected = '';
+ 
+  List<String> _sub=<String>[
+  'java','web','android'
+];
+
+  Iterable<Widget> get actorWidgets sync*{
+    for(String choiceSub in _sub){
+      yield Padding(
+        padding:EdgeInsets.all(15.0) ,
+        child: ChoiceChip(
+        // avatar: Icon(Icons.access_alarm,size: 20.0,color: Colors.white,),
+        //未选定的时候背景
+        backgroundColor:Colors.red,
+        //被禁用得时候背景
+        disabledColor: Colors.blue,
+        label: Text(choiceSub),
+        labelStyle: TextStyle(fontWeight: FontWeight.w200,fontSize: 15.0),
+        labelPadding: EdgeInsets.only(left: 20.0,right: 20.0),
+
+        materialTapTargetSize: MaterialTapTargetSize.padded,
+        onSelected: (bool value) {
+          setState(() {
+            _selected = value ? choiceSub : 'Colors.red';
+          });
+        },
+        selected: _selected == choiceSub,)
+        );
+        
+    }
+  }
+
+ @override
+  Widget build(BuildContext context) {
+  return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        Wrap(
+          children: actorWidgets.toList(),
+        ),
+      ],
+    );
+
+  }
+}
+
+
+  

lib/widgets/components/Chip/ChoiceChip/index.dart

@@ -0,0 +1,41 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-19 15:13:29 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 10:22:57
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 允许从一组选项中进行单一的选择
+- ChoiceChip包含相关的描述性文本或者类别
+
+''';
+const String content1 = '''
+### **基本用法**
+- onSelected : 选择或者取消选择状态间切换调用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/ChoiceChip';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+         ChoiceChipDemo(),
+        ],
+        codeUrl: 'components/Chip/ChoiceChip/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/ChoiceChip-class.html',
+        title: 'ChoiceChip');
+  }
+}

lib/widgets/components/Chip/FilterChip/demo.dart

@@ -0,0 +1,69 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 10:19:46 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-20 14:09:31
+ */
+import 'package:flutter/material.dart';
+
+class FilterChipDemo extends StatefulWidget {
+  _FilterChipDemoState createState() => _FilterChipDemoState();
+}
+
+class ActorFilerEntry{
+  final String name;
+  final String initials;
+  const ActorFilerEntry(this.name,this.initials);
+}
+
+
+class _FilterChipDemoState extends State<FilterChipDemo> {
+  final List<ActorFilerEntry> _list=<ActorFilerEntry>[
+    const ActorFilerEntry('android', 'ad'),
+    const ActorFilerEntry('java', 'ja'),
+    const ActorFilerEntry('php', 'ph'),
+    const ActorFilerEntry('web', 'wb'),
+  ];
+
+  List<String> _filters=<String>[];
+  Iterable<Widget> get actorWidgets sync*{
+    for(ActorFilerEntry actor in _list){
+      yield Padding(
+        padding: const EdgeInsets.all(4.0),
+        child: FilterChip(
+          // avatar: CircleAvatar(child: Text(actor.initials),),
+          label: Text(actor.name),
+          selected: _filters.contains(actor.name),
+          onSelected: (bool value){
+            setState(() {
+                          if(value){
+                            _filters.add(actor.name);
+                          }else{
+                            _filters.retainWhere((String name){
+                              return name==actor.name;
+                            });
+                          }
+                        });
+          },
+        ),
+      );
+    }
+  }
+  
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        Wrap(
+          children: actorWidgets.toList(),
+        ),
+        Text('look for :${_filters.join(',')}')
+      ],
+    );
+  }
+}
+
+
+  

lib/widgets/components/Chip/FilterChip/index.dart

@@ -0,0 +1,40 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 10:19:55 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 10:25:22
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 通过使用标签或者描述性词语来过滤内容
+- FilterChip是checkbox或switch widget 的替换品。
+
+''';
+const String content1 = '''
+### **基本用法**
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/FilterChip';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          FilterChipDemo(),
+        ],
+        codeUrl: 'components/Chip/FilterChip/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/FilterChip-class.html',
+        title: 'FilterChip');
+  }
+}

lib/widgets/components/Chip/RawChip/demo.dart

@@ -0,0 +1,69 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 20:30:36 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 11:23:21
+ */
+
+import 'package:flutter/material.dart';
+
+
+class FilterChipDemo extends StatefulWidget {
+  _FilterChipDemoState createState() => _FilterChipDemoState();
+}
+
+class InputEntry{
+  final String name;
+  final String initials;
+  const InputEntry(this.name,this.initials);
+}
+ 
+class _FilterChipDemoState extends State<FilterChipDemo> {
+
+final List<InputEntry> _lists=<InputEntry>[
+    const InputEntry('android', 'A'),
+    const InputEntry('java', 'J'),
+    const InputEntry('php', 'P'),
+    const InputEntry('web', 'W'),
+];
+
+List<String> _inputs=<String>[];
+Iterable<Widget> get RawChipWidget sync*{
+  for(InputEntry value in _lists){
+    yield Padding(
+      padding: const EdgeInsets.all(4.0),
+      child: RawChip(
+        avatar: CircleAvatar(
+           backgroundColor: Colors.redAccent.shade400,
+           child: Text(value.initials),
+        ),
+        label: Text(value.name),
+        onDeleted: (){
+          // _inputs.add(value.name);
+          setState(() {
+                       _lists.remove(value);
+                       
+                    });
+         
+        },
+        
+      ),
+    );
+  }
+}
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+         Wrap(
+          children: RawChipWidget.toList(),
+        ),
+    
+      ],
+    );
+  }
+}
+
+
+  

lib/widgets/components/Chip/RawChip/index.dart

@@ -0,0 +1,47 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 20:30:41 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 11:35:51
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 所有chip widget类型的基础，集合所有功能，我们通常不是直接使用它，而是根据自己需要选择chi， 比如：
+- chip ,一个简单的芯片，只能显示信息，并被删除
+- inputChip,以紧凑的形式表现复杂的信息，例如：实体（人，地点，或者事物）或者会话文本
+- choiceChip,允许从一组选项中进行单一的选择
+- FilterChip,使用标签或描述作为过滤内容的方式
+
+ 
+''';
+const String content1 = '''
+### **基本用法**
+- inputChip可以通过设置进行选择onSelected，通过设置onDeleted可以删除，并且可以通过OnPressed表现按压效果
+- inputChip 有一个前导图标和尾随图标，填充颜色可以订制
+- inputChip 可以和其他UI元素搭配使用，比如：wrap,ListView(scrollDirection为Axis.horizo​​ntal)
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/RawChip';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          FilterChipDemo(),
+        ],
+        codeUrl: 'components/Chip/RawChip/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/RawChip-class.html',
+        title: 'RawChip');
+  }
+}

lib/widgets/components/Chip/index.dart

@@ -0,0 +1,49 @@
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'Chip/index.dart' as Chip;
+import 'ChipTheme/index.dart' as ChipTheme;
+import 'ChipThemeData/index.dart' as ChipThemeData;
+import 'ChoiceChip/index.dart' as ChoiceChip;
+import 'FilterChip/index.dart' as FilterChip;
+import 'InputChip/index.dart' as InputChip;
+import 'RawChip/index.dart' as RawChip;
+
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'Chip',
+    routerName: Chip.Demo.routeName,
+    buildRouter: (BuildContext context) => Chip.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ChipTheme',
+    routerName: ChipTheme.Demo.routeName,
+    buildRouter: (BuildContext context) => ChipTheme.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ChipThemeData',
+    routerName: ChipThemeData.Demo.routeName,
+    buildRouter: (BuildContext context) => ChipThemeData.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ChoiceChip',
+    routerName: ChoiceChip.Demo.routeName,
+    buildRouter: (BuildContext context) => ChoiceChip.Demo(),
+  ),
+  WidgetPoint(
+    name: 'FilterChip',
+    routerName: FilterChip.Demo.routeName,
+    buildRouter: (BuildContext context) => FilterChip.Demo(),
+  ),
+  WidgetPoint(
+    name: 'InputChip',
+    routerName: InputChip.Demo.routeName,
+    buildRouter: (BuildContext context) => InputChip.Demo(),
+  ),
+  WidgetPoint(
+    name: 'RawChip',
+    routerName: RawChip.Demo.routeName,
+    buildRouter: (BuildContext context) => RawChip.Demo(),
+  ),
+];

lib/widgets/components/Chip/inputChip/demo.dart

@@ -0,0 +1,77 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 13:32:22 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 11:31:12
+ */
+
+import 'package:flutter/material.dart';
+
+
+class FilterChipDemo extends StatefulWidget {
+  _FilterChipDemoState createState() => _FilterChipDemoState();
+}
+
+class InputEntry{
+  final String name;
+  final String initials;
+  const InputEntry(this.name,this.initials);
+  
+}
+ 
+class _FilterChipDemoState extends State<FilterChipDemo> {
+
+final List<InputEntry> _lists=<InputEntry>[
+    const InputEntry('android', 'A'),
+    const InputEntry('java', 'J'),
+    const InputEntry('php', 'P'),
+    const InputEntry('web', 'W'),
+];
+
+List<InputEntry> _inputLists=<InputEntry>[];
+Iterable<Widget> get inputWidget sync*{
+  for(InputEntry value in _lists){
+    _inputLists.add(value);
+    yield Padding(
+      padding: const EdgeInsets.all(4.0),
+      child: InputChip(
+        avatar: CircleAvatar(
+           backgroundColor: Colors.redAccent.shade400,
+           child: Text(value.initials),
+        ),
+        label: Text(value.name),
+        onDeleted: (){
+          setState(() {
+                      _lists.remove(value);
+                    });
+         
+        },
+        
+      ),
+    );
+  }
+}
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: <Widget>[
+         Wrap(
+          children: inputWidget.toList(),
+        ),
+      //   InputChip(
+      //   label: Text('刷新'),
+      //   onSelected: (bool value){
+          
+      //   },
+      // )
+      ],
+
+      
+
+    );
+  }
+}
+
+
+  

lib/widgets/components/Chip/inputChip/index.dart

@@ -0,0 +1,43 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 13:32:15 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 10:42:05
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 输入型chip
+- 以紧凑的形式表现复杂的信息，例如：实体（人，地点，或者事物）或者会话文本
+ 
+''';
+const String content1 = '''
+### **基本用法**
+- inputChip可以通过设置进行选择onSelected，通过设置onDeleted可以删除，并且可以通过OnPressed表现按压效果
+- inputChip 有一个前导图标和尾随图标，填充颜色可以订制
+- inputChip 可以和其他UI元素搭配使用，比如：wrap,ListView(scrollDirection为Axis.horizo​​ntal)
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/InputChip';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          FilterChipDemo(),
+        ],
+        codeUrl: 'components/Chip/FilterChip/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/InputChip-class.html',
+        title: 'InputChip');
+  }
+}

lib/widgets/components/Dialog/AboutDialog/demo.dart

@@ -0,0 +1,52 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class AboutDialogDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<AboutDialogDemo> {
+  
+  void showAlertDialog(BuildContext context) {
+    showDialog(
+        context: context,
+        builder: (_) => new AboutDialog(
+          applicationName: '名称',
+          applicationIcon: new Icon(Icons.ac_unit),
+          applicationVersion: 'V1.0',
+          children: <Widget>[
+            Text('我是一个关于的dialog')
+          ]
+        ));
+  }
+  Widget build(BuildContext context) {
+    return new RaisedButton(
+        padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
+        //padding
+        child: new Text(
+          'show aboutDialog',
+          style: new TextStyle(
+            fontSize: 18.0, //textsize
+            color: Colors.white, // textcolor
+          ),
+        ),
+        color: Theme.of(context).accentColor,
+        elevation: 4.0,
+        //shadow
+        splashColor: Colors.blueGrey,
+        onPressed: () {
+          showAlertDialog(context);
+      });
+  }
+}

lib/widgets/components/Dialog/AboutDialog/index.dart

@@ -0,0 +1,46 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> AboutDialog 通常用于传递企业或者app的官方信息
+
+
+
+### **基本用法**
+
+>  通常作为子窗口小部件传递给showDialog，后者显示对话框。
+
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Dialog/AboutDialog';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'AlertDialog',
+      codeUrl: 'components/Dialog/AboutDialog/demo.dart',
+      contentList: [
+        _Text0,
+        AboutDialogDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/AboutDialog-class.html',
+    );
+  }
+}

lib/widgets/components/Dialog/AlertDialog/demo.dart

@@ -0,0 +1,145 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class AlertDialogDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<AlertDialogDemo> {
+  
+  void showAlertDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false, // user must tap button!
+      builder: (BuildContext context) {
+        return AlertDialog(
+          title: Text('title'),
+          content: SingleChildScrollView(
+            child: ListBody(
+              children: <Widget>[
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+                Text('too long~~~'),
+
+              ],
+            ),
+          ),
+          actions: <Widget>[
+            FlatButton(
+              child: Text('关闭'),
+              onPressed: () {
+                Navigator.of(context).pop();
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+  Widget build(BuildContext context) {
+    return new RaisedButton(
+        padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
+        //padding
+        child: new Text(
+          '点我显示 AlertDialog',
+          style: new TextStyle(
+            fontSize: 18.0, //textsize
+            color: Colors.white, // textcolor
+          ),
+        ),
+        color: Theme.of(context).accentColor,
+        elevation: 4.0,
+        //shadow
+        splashColor: Colors.blueGrey,
+        onPressed: () {
+          showAlertDialog(context);
+      });
+  }
+}

lib/widgets/components/Dialog/AlertDialog/index.dart

@@ -0,0 +1,50 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> AlertDialog 向用户传递信息的弹出层。
+
+
+
+### **基本用法**
+
+> 通常作为子窗口小部件传递给showDialog，后者显示对话框。
+
+当**AlertDialog**的的元素过多过长时, 请优先考虑**SingleChildScrollView** 用来避免内容溢出
+
+
+
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Dialog/AlertDialog';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'AlertDialog',
+      codeUrl: 'components/Dialog/AlertDialog/demo.dart',
+      contentList: [
+        _Text0,
+        AlertDialogDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/AlertDialog-class.html',
+    );
+  }
+}

lib/widgets/components/Dialog/Dialog/demo.dart

@@ -0,0 +1,107 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class DialogDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<DialogDemo> {
+
+  void showAlertDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false, // user must tap button!
+      builder: (BuildContext context) {
+        return Dialog(
+          child: Text("我是一个Dialog"),
+        );
+      },
+    );
+  }
+  Widget build(BuildContext context) {
+    return new RaisedButton(
+        padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
+        //padding
+        child: new Text(
+          '点我显示 Dialog',
+          style: new TextStyle(
+            fontSize: 18.0, //textsize
+            color: Colors.white, // textcolor
+          ),
+        ),
+        color: Theme.of(context).accentColor,
+        elevation: 4.0,
+        //shadow
+        splashColor: Colors.blueGrey,
+        onPressed: () {
+          showAlertDialog(context);
+        });
+  }
+}
+
+
+class DialogMoreDemo extends StatefulWidget {
+  _DialogMoreDemo createState() => _DialogMoreDemo();
+}
+
+class _DialogMoreDemo extends State<DialogMoreDemo> {
+  int value = 0;
+  void showCommonDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false, // user must tap button!
+      builder: (context) {
+        return StatefulBuilder(
+          builder: (context, state) {
+            return Dialog(
+                child: RaisedButton(
+                  onPressed: () {
+                    print("print $value");
+                    state(() {
+                      value += 1;
+                    });
+                  },
+                  child:  Text("我是一个Dialog, 点我更新value: ${value}"),
+                )
+            );
+          }
+        );
+      }
+    );
+  }
+  Widget build(BuildContext context) {
+    return new Column(
+      children: <Widget>[
+        new RaisedButton(
+          padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
+          //padding
+          child: new Text(
+          '点我显示Dialog',
+          style: new TextStyle(
+            fontSize: 18.0, //textsize
+            color: Colors.white, // textcolor
+          ),
+          ),
+          color: Theme.of(context).accentColor,
+          elevation: 4.0,
+          //shadow
+          splashColor: Colors.blueGrey,
+          onPressed: () {
+            showCommonDialog(context);
+          }
+        )
+      ],
+    );
+  }
+}

lib/widgets/components/Dialog/Dialog/index.dart

@@ -0,0 +1,59 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> AlertDialog 向用户传递信息的弹出层。
+
+这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 **AlertDialog**或者**SimpleDialog**
+
+
+
+### **基本用法**
+
+> 通常作为子窗口小部件传递给showDialog，后者显示对话框。
+
+
+""";
+
+const String _Text1 = """
+### **进阶用法**
+
+> 犹豫当前组件没有任何可选项目, 我们可以通过自定义样式, 去完成自己想要的各种样式的弹框, 满足我们的个性化需求
+
+注意事项: 当前弹出的dialog并非是一个单纯的组件, 而是一个新路由界面, 如果我想通过操作dialog中的内容, 直接使用setState触发的是原界面中的状态 
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Dialog/Dialog';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Dialog',
+      codeUrl: 'components/Dialog/Dialog/demo.dart',
+      contentList: [
+        _Text0,
+        DialogDemo(),
+        _Text1,
+        DialogMoreDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/Dialog-class.html',
+    );
+  }
+}

lib/widgets/components/Dialog/SimpleDialog/demo.dart

@@ -0,0 +1,65 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class SimpleDialogDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<SimpleDialogDemo> {
+  
+  void showAlertDialog(BuildContext context) {
+    showDialog<Null>(
+      context: context,
+      builder: (BuildContext context) {
+        return new SimpleDialog(
+          title: new Text('选择'),
+          children: <Widget>[
+            new SimpleDialogOption(
+              child: new Text('选项 1'),
+              onPressed: () {
+                Navigator.of(context).pop();
+              },
+            ),
+            new SimpleDialogOption(
+              child: new Text('选项 2'),
+              onPressed: () {
+                Navigator.of(context).pop();
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+  Widget build(BuildContext context) {
+    return new RaisedButton(
+        padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
+        //padding
+        child: new Text(
+          'show SimpleDialog',
+          style: new TextStyle(
+            fontSize: 18.0, //textsize
+            color: Colors.white, // textcolor
+          ),
+        ),
+        color: Theme.of(context).accentColor,
+        elevation: 4.0,
+        //shadow
+        splashColor: Colors.blueGrey,
+        onPressed: () {
+          showAlertDialog(context);
+      });
+  }
+
+}

lib/widgets/components/Dialog/SimpleDialog/index.dart

@@ -0,0 +1,46 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> SimpleDialog 是一个用于向用户传递确定信息并提供选项的弹出层
+
+
+
+### **基本用法**
+
+> 通常作为子窗口小部件传递给showDialog，后者显示对话框。
+
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Dialog/SimpleDialog';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SimpleDialog',
+      codeUrl: 'components/Dialog/SimpleDialog/demo.dart',
+      contentList: [
+        _Text0,
+        SimpleDialogDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/SimpleDialog-class.html',
+    );
+  }
+}

lib/widgets/components/Dialog/index.dart

@@ -0,0 +1,29 @@
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+import 'AlertDialog/index.dart' as AlertDialog;
+import 'Dialog/index.dart' as Dialog;
+import 'SimpleDialog/index.dart' as SimpleDialog;
+import 'AboutDialog/index.dart' as AboutDialog;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'AlertDialog',
+    routerName: AlertDialog.Demo.routeName,
+    buildRouter: (BuildContext context) => AlertDialog.Demo(),
+  ),
+  WidgetPoint(
+    name: 'Dialog',
+    routerName: Dialog.Demo.routeName,
+    buildRouter: (BuildContext context) => Dialog.Demo(),
+  ),
+  WidgetPoint(
+    name: 'SimpleDialog',
+    routerName: SimpleDialog.Demo.routeName,
+    buildRouter: (BuildContext context) => SimpleDialog.Demo(),
+  ),
+  WidgetPoint(
+    name: 'AboutDialog',
+    routerName: AboutDialog.Demo.routeName,
+    buildRouter: (BuildContext context) => AboutDialog.Demo(),
+  ),
+];

lib/widgets/components/Grid/GridTile/demo.dart

@@ -0,0 +1,60 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class GridTileDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<GridTileDemo> {
+
+
+  Widget build(BuildContext context) {
+    return Container(
+      height: 400,
+      color: Color(0xffc91b3a),
+      child:  new GridView.count(
+          crossAxisCount: 2,
+          mainAxisSpacing: 10.0,
+          crossAxisSpacing: 4.0,
+          padding: const EdgeInsets.all(4.0),
+          childAspectRatio: 1.3,
+        children: <Widget>[
+          GridTile(
+            header: Text("GridTile header", style: TextStyle(color: Colors.white)),
+            child: Container(
+              padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
+              child: Text("GridTile child", style: TextStyle(color: Colors.white)),
+            ),
+            footer: Text("GridTile footer", style: TextStyle(color: Colors.white)),
+          ),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+        ],
+      )
+    );
+  }
+}

lib/widgets/components/Grid/GridTile/index.dart

@@ -0,0 +1,47 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> GridTile 是GridList中的一种瓷片组件;包含header, body, footer三部份;
+
+
+### **基本用法**
+
+> 一个grid列表包含多个Item, 每个Item通常包含一些视觉丰富的内容(例如，图像), 我们可以用GridTileBar去定义他的页眉与页脚。
+
+如下实例中, 第一个是item便是GridTile组件构成. 包含header, body, footer;
+""";
+
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Grid/GridTile';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'GridTile',
+      codeUrl: 'components/Grid/GridTile/demo.dart',
+      contentList: [
+        _Text0,
+        GridTileDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/Dialog-class.html',
+    );
+  }
+}

lib/widgets/components/Grid/GridTileBar/demo.dart

@@ -0,0 +1,62 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class GridTileDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<GridTileDemo> {
+
+
+  Widget build(BuildContext context) {
+    return Container(
+      height: 400,
+      color: Color(0xffc91b3a),
+      child:  new GridView.count(
+          crossAxisCount: 2,
+          mainAxisSpacing: 10.0,
+          crossAxisSpacing: 4.0,
+          padding: const EdgeInsets.all(4.0),
+          childAspectRatio: 1.3,
+        children: <Widget>[
+          GridTile(
+            header: GridTileBar(
+              title: Text('title'),
+              subtitle: Text('subtitle'),
+              leading: Icon(Icons.add),
+              trailing: Text("trailing"),
+            ),
+            child: Container(),
+
+          ),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+        ],
+      )
+    );
+  }
+}

lib/widgets/components/Grid/GridTileBar/index.dart

@@ -0,0 +1,51 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> GridTileBar 通常用来做GridTile的header与footer组件;
+
+
+### **基本用法**
+
+> GridTileBar含有五个属性
+
+- backgroundColor 描述GridTileBar的背景颜色
+- leading GridTileBar左侧的widget, 通常我们用图标来占位
+- subtitle 次标题
+- title 主标题
+- trailing GridTileBar右侧的widgett, 通常我们用来做交互操作类的组件
+""";
+
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Grid/GridTileBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'GridTileBar',
+      codeUrl: 'components/Grid/GridTileBar/demo.dart',
+      contentList: [
+        _Text0,
+        GridTileDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/GridTileBar-class.html',
+    );
+  }
+}

lib/widgets/components/Grid/GridView/demo.dart

@@ -0,0 +1,62 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:31
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'dart:math';
+import 'dart:async';
+import 'package:flutter/material.dart';
+
+
+class GridTileDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<GridTileDemo> {
+
+
+  Widget build(BuildContext context) {
+    return Container(
+      height: 400,
+      color: Color(0xffc91b3a),
+      child:  new GridView.count(
+          crossAxisCount: 2,
+          mainAxisSpacing: 10.0,
+          crossAxisSpacing: 4.0,
+          padding: const EdgeInsets.all(4.0),
+          childAspectRatio: 1.3,
+        children: <Widget>[
+          GridTile(
+            header: GridTileBar(
+              title: Text('title'),
+              subtitle: Text('subtitle'),
+              leading: Icon(Icons.add),
+              trailing: Text("trailing"),
+            ),
+            child: Container(),
+
+          ),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+          new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
+        ],
+      )
+    );
+  }
+}

lib/widgets/components/Grid/GridView/index.dart

@@ -0,0 +1,45 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 10:26
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import '../../../../common/widget_demo.dart';
+import 'package:flutter/material.dart';
+import 'demo.dart';
+
+const String _Text0 = """
+### **简介**
+> GridView 通常用来做GridTile的header与footer组件;
+
+
+### **基本用法**
+
+> 1231
+""";
+
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Grid/GridView';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'GridTileBar',
+      codeUrl: 'components/Grid/GridView/demo.dart',
+      contentList: [
+        _Text0,
+        GridTileDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/GridView-class.html',
+    );
+  }
+}

lib/widgets/components/Grid/index.dart

@@ -0,0 +1,26 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 07/01/2019
+ * Time: 19:40
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+import 'GridTile/index.dart' as GridTile;
+
+import 'GridTileBar/index.dart' as GridTileBar;
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'GridTile',
+    routerName: GridTile.Demo.routeName,
+    buildRouter: (BuildContext context) => GridTile.Demo(),
+  ),
+  WidgetPoint(
+    name: 'GridTileBar',
+    routerName: GridTileBar.Demo.routeName,
+    buildRouter: (BuildContext context) => GridTileBar.Demo(),
+  )
+];

lib/widgets/components/LIst/AnimatedList/demo.dart

@@ -0,0 +1,131 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import './model.dart';
+
+class AnimatedListFullDefault extends StatefulWidget {
+  AnimatedListFullDefault({Key key, this.parent}) : super(key: key);
+  final parent;
+
+  @override
+  _AnimatedListFullDefault createState() => _AnimatedListFullDefault();
+}
+
+/*
+* AnimatedList 默认的实例,有状态
+* */
+class _AnimatedListFullDefault extends State<AnimatedListFullDefault> {
+  final GlobalKey<AnimatedListState> _listKey = new GlobalKey<AnimatedListState>();
+  ListModel<int> _list;
+  int _selectedItem;
+  int _nextItem; // The next item inserted when the user presses the '+' button.
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.parent is State) {
+      widget.parent.animatedList = this; // 修改父级的对象引用
+    }
+    _list = new ListModel<int>(
+      listKey: _listKey,
+      initialItems: <int>[0, 1, 2],
+      removedItemBuilder: _buildRemovedItem,
+    );
+    _nextItem = 3;
+  }
+
+  void insert() {
+    final int index = _selectedItem == null ? _list.length : _list.indexOf(_selectedItem);
+    _list.insert(index, _nextItem++);
+  }
+
+  // Remove the selected item from the list model.
+  void remove() {
+    if (_selectedItem != null) {
+      _list.removeAt(_list.indexOf(_selectedItem));
+      setState(() {
+        _selectedItem = null;
+      });
+    }
+  }
+
+  Widget _buildItem(BuildContext context, int index, Animation<double> animation) {
+    return new CardItem(
+      animation: animation,
+      item: _list[index],
+      selected: _selectedItem == _list[index],
+      onTap: () {
+        setState(() {
+          _selectedItem = _selectedItem == _list[index] ? null : _list[index];
+        });
+      },
+    );
+  }
+
+  Widget _buildRemovedItem(int item, BuildContext context, Animation<double> animation) {
+    return new CardItem(
+      animation: animation,
+      item: item,
+      selected: false,
+      // No gesture detector here: we don't want removed items to be interactive.
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        height: 500.0,
+        child:AnimatedList(
+          //shrinkWrap: true,
+          key: _listKey,
+          initialItemCount: _list.length,
+          itemBuilder: _buildItem,
+        ));
+  }
+  void methodA() {}
+}
+
+class CardItem extends StatelessWidget {
+  const CardItem({
+    Key key,
+    @required this.animation,
+    this.onTap,
+    @required this.item,
+    this.selected: false
+  }) : assert(animation != null),
+        assert(item != null && item >= 0),
+        assert(selected != null),
+        super(key: key);
+
+  final Animation<double> animation;
+  final VoidCallback onTap;
+  final int item;
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context) {
+    TextStyle textStyle = Theme.of(context).textTheme.display1;
+    if (selected)
+      textStyle = textStyle.copyWith(color: Colors.lightGreenAccent[400]);
+    return new Padding(
+      padding: const EdgeInsets.all(2.0),
+      child: new SizeTransition(
+        axis: Axis.vertical,
+        sizeFactor: animation,
+        child: new GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onTap: onTap,
+          child: new SizedBox(
+            height: 128.0,
+            child: new Card(
+              color: Colors.primaries[item % Colors.primaries.length],
+              child: new Center(
+                child: new Text('Item $item', style: textStyle),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/components/LIst/AnimatedList/index.dart

@@ -0,0 +1,116 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/31
+ * Time: 下午9:48
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: AnimatedList 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart';
+
+
+//var _AnimatedListFullDefault = AnimatedListDemo.AnimatedListFullDefault;
+GlobalKey globalKey = GlobalKey();
+
+const String _Text0 =
+"""### **简介**
+> AnimatedList “动画滚动容器”
+- 一个滚动容器，可在插入或移除项目时为其设置动画
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> AnimatedList
+- AnimatedListState 可用于动态插入或删除项目。
+- 下面示例展示效果:点击+号增加 card, 点击 card 保持激活状态，再点击-号，减少 card。
+""";
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components//List/AnimatedList';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  var animatedList = null;
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'AnimatedList',
+      codeUrl: '${Application.github['widgetsURL']}componentss/List/AnimatedList/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/widgets/AnimatedList-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 AnimatedList widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                assistButtonLeft(that),
+                SizedBox(width: 20.0), // 间距
+                assistButtonRight(that),
+              ],
+            ),
+            //AnimatedListDemo.AnimatedListFullDefault(key:globalKey,parent:context),
+            AnimatedListFullDefault(key:globalKey,parent:that),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}
+
+/*
+* 演示辅助按钮
+* */
+Widget assistButtonLeft(that) {
+  return FloatingActionButton(
+    // 文本内容
+      backgroundColor:Colors.red,
+      child: const Icon(Icons.add_circle_outline),
+      heroTag: null, // 不加这个参数会黑屏...
+      onPressed: () {
+        //demo.insert();
+        //print('${globalKey.currentState}');
+        that.animatedList.insert();
+      }
+  );
+}
+
+/*
+* 演示辅助按钮
+* */
+Widget assistButtonRight(that) {
+  return FloatingActionButton(
+    // 文本内容
+      backgroundColor:Colors.green,
+      child: const Icon(Icons.remove_circle_outline),
+      heroTag: null, // 不加这个参数会黑屏...
+      onPressed: () {
+        that.animatedList.remove();
+      }
+  );
+}
+

lib/widgets/components/LIst/AnimatedList/model.dart

@@ -0,0 +1,54 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/12/31
+ * Time: 下午10:15
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+/// Keeps a Dart List in sync with an AnimatedList.
+///
+/// The [insert] and [removeAt] methods apply to both the internal list and the
+/// animated list that belongs to [listKey].
+///
+/// This class only exposes as much of the Dart List API as is needed by the
+/// sample app. More list methods are easily added, however methods that mutate the
+/// list must make the same changes to the animated list in terms of
+/// [AnimatedListState.insertItem] and [AnimatedList.removeItem].
+///
+import 'package:flutter/material.dart';
+
+class ListModel<E> {
+  ListModel({
+    @required this.listKey,
+    @required this.removedItemBuilder,
+    Iterable<E> initialItems,
+  }) : assert(listKey != null),
+        assert(removedItemBuilder != null),
+        _items = new List<E>.from(initialItems ?? <E>[]);
+
+  final GlobalKey<AnimatedListState> listKey;
+  final dynamic removedItemBuilder;
+  final List<E> _items;
+
+  AnimatedListState get _animatedList => listKey.currentState;
+
+  void insert(int index, E item) {
+    _items.insert(index, item);
+    _animatedList.insertItem(index);
+  }
+
+  E removeAt(int index) {
+    final E removedItem = _items.removeAt(index);
+    if (removedItem != null) {
+      _animatedList.removeItem(index, (BuildContext context, Animation<double> animation) {
+        return removedItemBuilder(removedItem, context, animation);
+      });
+    }
+    return removedItem;
+  }
+
+  int get length => _items.length;
+  E operator [](int index) => _items[index];
+  int indexOf(E item) => _items.indexOf(item);
+}

lib/widgets/components/LIst/ListBody/demo.dart

@@ -0,0 +1,75 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/31
+ * Time: 下午2:42
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: ListBody 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class ListBodyFullDefault extends StatefulWidget {
+  const ListBodyFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _ListBodyFullDefault();
+}
+
+/*
+* ListBody 默认的实例,有状态
+* */
+class _ListBodyFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return ListBody(
+      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
+    );
+  }
+}
+
+/*
+* ListBody 默认的实例,无状态
+* */
+class ListBodyLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const ListBodyLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return ListBody(
+          mainAxis: Axis.vertical, // 排列的主轴方向
+          reverse: false, // 是否反向
+          children: <Widget>[
+            Container(color: Colors.red,
+                width: 50.0,
+                height: 150.0,
+                child: Text('标题1', style: TextStyle(color: Color(0xffffffff)))),
+            Container(color: Colors.yellow,
+                width: 50.0,
+                height: 50.0,
+                child: Text('标题2', style: TextStyle(color: Color(0xffffffff)))),
+            Container(color: Colors.green,
+                width: 50.0,
+                height: 50.0,
+                child: Text('标题3', style: TextStyle(color: Color(0xffffffff)))),
+            Container(color: Colors.blue,
+                width: 50.0,
+                height: 50.0,
+                child: Text('标题4', style: TextStyle(color: Color(0xffffffff)))),
+            Container(color: Colors.black,
+                width: 50.0,
+                height: 50.0,
+                child: Text('标题5', style: TextStyle(color: Color(0xffffffff))))
+          ],
+        );
+  }
+}

lib/widgets/components/LIst/ListBody/index.dart

@@ -0,0 +1,72 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/31
+ * Time: 下午2:38
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: ListBody 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as ListBodyDemo;
+
+const String _Text0 =
+"""### **简介**
+> ListBody “列表组件”
+- 作用是按给定的轴方向，按照顺序排列子节点。
+- 是一个不常直接使用的控件，一般都会配合ListView或者Column等控件使用。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 布局行为
+- 在主轴上，子节点按照顺序进行布局，在交叉轴上，子节点尺寸会被拉伸，以适应交叉轴的区域。
+- 在主轴上，给予子节点的空间必须是不受限制的（unlimited），使得子节点可以全部被容纳，ListBody不会去裁剪或者缩放其子节点。
+- ListBody的布局代码非常简单，根据主轴的方向，对子节点依次排布。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components//List/ListBody';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'ListBody',
+      codeUrl: '${Application
+          .github['widgetsURL']}/componentss/List/ListBody/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/widgets/ListBody-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 ListBody widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            ListBodyDemo.ListBodyLessDefault(),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}

lib/widgets/components/LIst/ListView/demo.dart

@@ -0,0 +1,142 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/31
+ * Time: 下午2:27
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: ListView 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class ListViewFullDefault extends StatefulWidget {
+  const ListViewFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _ListViewFullDefault();
+}
+
+/*
+* ListView 默认的实例,有状态
+* */
+class _ListViewFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+    return ListView(
+    );
+  }
+}
+
+/*
+* ListView 默认的实例,无状态
+* */
+class ListViewLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+  final index;
+
+  const ListViewLessDefault([this.index, this.widget, this.parent,])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    switch(index){
+      case 0:
+        return ListView(
+          shrinkWrap: true,
+          padding: EdgeInsets.all(20.0),
+          children: <Widget>[
+            Text('I\'m dedicating every day to you'),
+            ListTile(
+              leading:  Icon(Icons.map),
+              title:  Text('Maps'),
+            ),
+            Text('Domestic life was never quite my style'),
+            ListTile(
+              leading:  Icon(Icons.photo_album),
+              title:  Text('Album'),
+            ),
+            Text('When you smile, you knock me out, I fall apart'),
+            ListTile(
+              leading:  Icon(Icons.phone),
+              title:  Text('Phone'),
+            ),
+            Text('And I thought I was so smart'),
+          ],
+        );
+        break;
+      case 1:
+        return SizedBox(
+          height: 300.0,
+          child:  ListView.builder(
+            scrollDirection: Axis.vertical,
+            itemCount: 10, // item 的个数
+            itemExtent: 50.0, // 如果为非null，则强制子项在滚动方向上具有给定范围
+            itemBuilder: (BuildContext context, int index) {
+              return ListTile(
+                  title:  Text("title $index"), // item 标题
+                  leading: Icon(Icons.keyboard), // item 前置图标
+                  subtitle: Text("subtitle $index"), // item 副标题
+                  trailing: Icon(Icons.keyboard_arrow_right),// item 后置图标
+                  isThreeLine:false,  // item 是否三行显示
+                  dense:true,                // item 直观感受是整体大小
+                  contentPadding: EdgeInsets.all(10.0),// item 内容内边距
+                  enabled:true,
+                  onTap:(){print('点击:${index}');},// item onTap 点击事件
+                  onLongPress:(){print('长按:${index}');},// item onLongPress 长按事件
+                  selected:false,     // item 是否选中状态
+              );
+            },
+          ),
+        );
+        break;
+      case 2:
+        return SizedBox(
+          height: 300.0,
+          child:  ListView.separated(
+            scrollDirection: Axis.vertical,
+            itemCount: 100, // item 的个数
+            separatorBuilder: (BuildContext context, int index) => Divider(height:1.0,color: Colors.blue),  // 添加分割线
+            itemBuilder: (BuildContext context, int index) {
+              return ListTile(
+                title:  Text("title $index"), // item 标题
+                leading: Icon(Icons.keyboard), // item 前置图标
+                subtitle: Text("subtitle $index"), // item 副标题
+                trailing: Icon(Icons.keyboard_arrow_right),// item 后置图标
+                isThreeLine:false,  // item 是否三行显示
+                dense:true,                // item 直观感受是整体大小
+                contentPadding: EdgeInsets.all(10.0),// item 内容内边距
+                enabled:true,
+                onTap:(){print('点击:${index}');},// item onTap 点击事件
+                onLongPress:(){print('长按:${index}');},// item onLongPress 长按事件
+                selected:false,     // item 是否选中状态
+              );
+            },
+          ),
+        );
+      break;
+      case 3:
+        return SizedBox(
+          height: 300.0,
+          child:  ListView.custom(
+            scrollDirection: Axis.vertical,
+            childrenDelegate:SliverChildBuilderDelegate((BuildContext context, int index) {
+              return Container(
+                height: 50.0,
+                alignment: Alignment.center,
+                color: Colors.lightBlue[100 * (index % 9)],
+                child: Text('list item $index'),
+              );
+            }, childCount: 10),
+          ),
+        );
+        break;
+    }
+
+  }
+}

lib/widgets/components/LIst/ListView/index.dart

@@ -0,0 +1,122 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/31
+ * Time: 下午2:25
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: ListView 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as ListViewDemo;
+
+const String _Text0 =
+"""### **简介**
+> ListView “滚动列表”
+- 一个非常常用的控件，涉及到数据列表展示的，一般情况下都会选用该控件。
+- 跟GridView相似，基本上是一个slivers里面只包含一个SliverList的CustomScrollView。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 布局行为
+
+- ListView在主轴方向可以滚动，在交叉轴方向，则是填满ListView。
+- 一个组合控件。ListView跟GridView类似，都是继承自BoxScrollView。
+- ### 在Flutter中有几种构建ListView的方式,分别是: **默认List，ListView.builder， ListView.separated，ListView.custom**。
+""";
+
+const String _Text2 =
+"""
+> ListView() 
+- 默认 List 方式，是把数据 Iterable 添加到列表中，之后直接添加到 ListView 即可。
+- Tips: 如果需要设置分割线，需要对列表 item 添加处理，ListTile.divideTiles。
+- 仅适用于内容较少的情形，因为它是一次性渲染所有的 items ，当 items 的数目较多时，很容易出现卡顿现象的，导致滑动不流畅。
+""";
+
+const String _Text3 =
+"""
+> ListView.builder()
+- 设置单个item的属性，懒加载的，假如有 1000 个列表，初始渲染时并不会所有都渲染，而只会特定数量的 item ，这对于性能和用户体验来说，是很好的提升。
+""";
+
+const String _Text4 =
+"""
+> 官方示例 ListView.separated()
+- 带分割线的item，separated 相比较于 builder，又多了一个参数 separatorBuilder ，用于控制列表各个元素的间隔如何渲染。
+""";
+
+const String _Text5 =
+"""
+> 官方示例 ListView.custom()
+- 必须的参数就是 childrenDelegate , 然后传入一个 实现了 SliverChildDelegate 的组件，如 SliverChildListDelegate 和 SliverChildBuilderDelegate。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/List/ListView';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'ListView',
+      codeUrl: '${Application.github['widgetsURL']}/componentss/List/ListView/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/widgets/ListView-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 ListView widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text2),
+            ListViewDemo.ListViewLessDefault(0),
+            MarkdownBody(data: _Text3),
+            ListViewDemo.ListViewLessDefault(1),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text4),
+            ListViewDemo.ListViewLessDefault(2),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text5),
+            ListViewDemo.ListViewLessDefault(3),
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt) {
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+          ])
+  );
+}
+
+

lib/widgets/components/LIst/index.dart

@@ -0,0 +1,32 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/12/27
+ * Time: 下午2:50
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'ListBody/index.dart' as ListBody;
+import 'ListView/index.dart' as ListView;
+import 'AnimatedList/index.dart' as AnimatedList;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'ListBody',
+    routerName: ListBody.Demo.routeName,
+    buildRouter: (BuildContext context) => ListBody.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ListView',
+    routerName: ListView.Demo.routeName,
+    buildRouter: (BuildContext context) => ListView.Demo(),
+  ),
+  WidgetPoint(
+    name: 'AnimatedList',
+    routerName: AnimatedList.Demo.routeName,
+    buildRouter: (BuildContext context) => AnimatedList.Demo(),
+  )
+];

lib/widgets/components/Menu/CheckedPopupMenuItem/demo.dart

@@ -0,0 +1,90 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-22 21:01:51 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 15:37:04
+ */
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+
+class CheckedPopupMenuItemDemo extends StatefulWidget {
+  _CheckedPopupMenuItemDemoState createState() =>
+      _CheckedPopupMenuItemDemoState();
+}
+
+class _CheckedPopupMenuItemDemoState extends State<CheckedPopupMenuItemDemo> {
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
+  List<String> _checkedValues;
+
+  final String _checkedValue1 = 'One';
+  final String _checkedValue2 = 'Two';
+  final String _checkedValue3 = 'Free';
+  final String _checkedValue4 = 'Four';
+
+  @override
+  void initState() {
+    super.initState();
+    _checkedValues = <String>[_checkedValue3];
+  }
+
+  void showInSnackBar(String value){
+    Fluttertoast.showToast(
+        msg: value,
+        toastLength: Toast.LENGTH_SHORT,
+        gravity: ToastGravity.CENTER,
+        timeInSecForIos: 1,
+        backgroundColor: Colors.grey,
+        textColor: Colors.white
+    );
+  }
+
+  bool isChecked(String value) => _checkedValues.contains(value);
+
+
+  void showCheckedMenuSelections(String value){
+    if(_checkedValues.contains(value)){
+      _checkedValues.remove(value);
+    }else{
+      _checkedValues.add(value);
+    }
+    showInSnackBar('Checked $_checkedValues');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Theme.of(context).primaryColor,
+      child: ListTile(
+        title: const Text('CheckedPopupMenuItem Demo',style: TextStyle(color:  Colors.white),),
+        trailing: PopupMenuButton<String>(
+          padding: EdgeInsets.zero,
+          onSelected: showCheckedMenuSelections,
+          icon: Icon(Icons.menu,color: Colors.white,),
+          itemBuilder: (BuildContext context)=><PopupMenuItem<String>>[
+            CheckedPopupMenuItem<String>(
+                  value: _checkedValue1,
+                  checked: isChecked(_checkedValue1),
+                  child: Text(_checkedValue1)
+                ),
+                CheckedPopupMenuItem<String>(
+                  value: _checkedValue2,
+                  enabled: false,
+                  checked: isChecked(_checkedValue2),
+                  child: Text(_checkedValue2)
+                ),
+                CheckedPopupMenuItem<String>(
+                  value: _checkedValue3,
+                  checked: isChecked(_checkedValue3),
+                  child: Text(_checkedValue3)
+                ),
+                CheckedPopupMenuItem<String>(
+                  value: _checkedValue4,
+                  checked: isChecked(_checkedValue4),
+                  child: Text(_checkedValue4)
+                )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/components/Menu/CheckedPopupMenuItem/index.dart

@@ -0,0 +1,44 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-22 21:01:45 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-22 21:26:54
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String content0 = '''
+### **简介**
+> 带有选中标记的 Material 设计风格的弹出菜单
+- 默认高度为48px，水平布局使用 ListTile 复选标记是 Icons.done 图标，显示在 leading 位置
+- 只有在状态为选中时才会显示图标
+''';
+
+const String content1 = '''
+### **基本用法**
+> 配合 PopupMenuButton 使用
+- enabled 属性控制item是否为可点击
+- checked 标识item是否为选中状态
+''';
+
+class Demo extends StatefulWidget {
+   static const String routeName = '/components/Menu/CheckedPopupMenuItem';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      codeUrl: 'components/Menu/CheckedPopupMenuItem/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/material/CheckedPopupMenuItem-class.html',
+      title: 'CheckedPopupMenuItem',
+      contentList: [
+        content0,
+        content1,
+        CheckedPopupMenuItemDemo(),
+      ],
+    );
+  }
+}

lib/widgets/components/Menu/DropdownMenuItem/demo.dart

@@ -0,0 +1,95 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 14:05:32 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 14:05:52
+ */
+
+import 'package:flutter/material.dart';
+
+class DropdownMenuItemDemo extends StatefulWidget {
+  _DropdownMenuItemDemoState createState() => _DropdownMenuItemDemoState();
+}
+
+class _DropdownMenuItemDemoState extends State<DropdownMenuItemDemo> {
+
+    String dropdown1Value = 'Free';
+  String dropdown2Value;
+  String dropdown3Value = 'Four';
+
+  
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(24.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: <Widget>[
+          ListTile(
+            title: const Text('Simple dropdown:'),
+            trailing: DropdownButton<String>(
+              value: dropdown1Value,
+              onChanged: (String newValue) {
+                setState(() {
+                  dropdown1Value = newValue;
+                });
+              },
+              items: <String>['One', 'Two', 'Free', 'Four'].map<DropdownMenuItem<String>>((String value) {
+                return DropdownMenuItem<String>(
+                  value: value,
+                  child: Text(value),
+                );
+              }).toList(),
+            ),
+          ),
+          const SizedBox(
+            height: 24.0,
+          ),
+          ListTile(
+            title: const Text('Dropdown with a hint:'),
+            trailing: DropdownButton<String>(
+              value: dropdown2Value,
+              hint: const Text('Choose'),
+              onChanged: (String newValue) {
+                setState(() {
+                  dropdown2Value = newValue;
+                });
+              },
+              items: <String>['One', 'Two', 'Free', 'Four'].map<DropdownMenuItem<String>>((String value) {
+                return DropdownMenuItem<String>(
+                  value: value,
+                  child: Text(value),
+                );
+              }).toList(),
+            ),
+          ),
+          const SizedBox(
+            height: 24.0,
+          ),
+          ListTile(
+            title: const Text('Scrollable dropdown:'),
+            trailing: DropdownButton<String>(
+              value: dropdown3Value,
+              onChanged: (String newValue) {
+                setState(() {
+                  dropdown3Value = newValue;
+                });
+              },
+              items: <String>[
+                  'One', 'Two', 'Free', 'Four', 'Can', 'I', 'Have', 'A', 'Little',
+                  'Bit', 'More', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'
+                 ]
+                .map<DropdownMenuItem<String>>((String value) {
+                  return DropdownMenuItem<String>(
+                    value: value,
+                    child: Text(value),
+                  );
+                })
+                .toList(),
+             ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/components/Menu/DropdownMenuItem/index.dart

@@ -0,0 +1,46 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 11:20:07 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 14:51:44
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import './demo.dart';
+
+
+const String content0 = '''
+### **简介**
+> DropdownButton 创建的一个菜单项
+- DropdownButton 是 Material 设计风格中的一个从列表中选择某一个item的按钮
+- DropdownButton 按钮显示选定的Item的值以及打开用于选择其他item的菜单箭头
+- DropdownMenuItem<T> 这里面的T代表入参的类型，注意在给定菜单中，所有的item的类型要保持一致
+''';
+
+const String content1 = '''
+### **基本用法**
+> 配合 DropdownButton 使用
+- value 选中返回的值
+- child 子Widget项
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Menu/DropdownMenuItem';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content0,
+        content1,
+        DropdownMenuItemDemo(),
+      ],
+      title: 'DropdownMenuItem',
+      docUrl: 'https://docs.flutter.io/flutter/material/DropdownMenuItem-class.html',
+      codeUrl: 'components/Menu/DropdownMenuItem/demo.dart',
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuButton/demo.dart

@@ -0,0 +1,153 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 15:17:10 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 15:39:35
+ */
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+
+class PopupMenuButtonDemo extends StatefulWidget {
+  _PopupMenuButtonDemoState createState() => _PopupMenuButtonDemoState();
+}
+
+class _PopupMenuButtonDemoState extends State<PopupMenuButtonDemo> {
+  final String _simpleValue1 = 'Menu item value one';
+  final String _simpleValue2 = 'Menu item value two';
+  final String _simpleValue3 = 'Menu item value three';
+  String _simpleValue;
+
+  void showMenuSelection(String value) {
+    if (<String>[_simpleValue1, _simpleValue2, _simpleValue3].contains(value))
+      _simpleValue = value;
+    showInSnackBar('You selected: $value');
+  }
+
+    void showInSnackBar(String value) {
+    Fluttertoast.showToast(
+        msg: value,
+        toastLength: Toast.LENGTH_SHORT,
+        gravity: ToastGravity.CENTER,
+        timeInSecForIos: 1,
+        backgroundColor: Colors.grey,
+        textColor: Colors.white);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _simpleValue = _simpleValue2;
+  }
+
+
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Column(
+        children: <Widget>[
+          ListTile(
+            title: const Text('An item with a context menu button'),
+            trailing: PopupMenuButton<String>(
+              padding: EdgeInsets.zero,
+              onSelected: showMenuSelection,
+              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
+                    PopupMenuItem<String>(
+                        value: _simpleValue1,
+                        child: const Text('Context menu item one')),
+                    const PopupMenuItem<String>(
+                        enabled: false, child: Text('A disabled menu item')),
+                    PopupMenuItem<String>(
+                        value: _simpleValue3,
+                        child: const Text('Context menu item three')),
+                  ],
+            ),
+          ),
+          ListTile(
+            title: const Text('An item with a sectioned menu'),
+            trailing: PopupMenuButton<String>(
+              padding: EdgeInsets.zero,
+              onSelected: showMenuSelection,
+              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+                    const PopupMenuItem<String>(
+                        value: 'Preview',
+                        child: ListTile(
+                            leading: Icon(Icons.visibility),
+                            title: Text('Preview'))),
+                    const PopupMenuItem<String>(
+                        value: 'Share',
+                        child: ListTile(
+                            leading: Icon(Icons.person_add),
+                            title: Text('Share'))),
+                    const PopupMenuItem<String>(
+                        value: 'Get Link',
+                        child: ListTile(
+                            leading: Icon(Icons.link),
+                            title: Text('Get link'))),
+                    const PopupMenuDivider(),
+                    const PopupMenuItem<String>(
+                        value: 'Remove',
+                        child: ListTile(
+                            leading: Icon(Icons.delete), title: Text('Remove')))
+                  ],
+            ),
+          ),
+          PopupMenuButton<String>(
+            padding: EdgeInsets.zero,
+            initialValue: _simpleValue,
+            onSelected: showMenuSelection,
+            child: ListTile(
+                title: const Text('An item with a simple menu'),
+                subtitle: Text(_simpleValue)),
+            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
+                  PopupMenuItem<String>(
+                      value: _simpleValue1, child: Text(_simpleValue1)),
+                  PopupMenuItem<String>(
+                      value: _simpleValue2, child: Text(_simpleValue2)),
+                  PopupMenuItem<String>(
+                      value: _simpleValue3, child: Text(_simpleValue3))
+                ],
+          ),
+          ListTile(
+            title: const Text('An item with a sectioned menu'),
+            trailing: PopupMenuButton<String>(
+              padding: EdgeInsets.zero,
+              onSelected: showMenuSelection,
+              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+                const PopupMenuItem<String>(
+                  value: 'Preview',
+                  child: ListTile(
+                    leading: Icon(Icons.visibility),
+                    title: Text('Preview')
+                  )
+                ),
+                const PopupMenuItem<String>(
+                  value: 'Share',
+                  child: ListTile(
+                    leading: Icon(Icons.person_add),
+                    title: Text('Share')
+                  )
+                ),
+                const PopupMenuItem<String>(
+                  value: 'Get Link',
+                  child: ListTile(
+                    leading: Icon(Icons.link),
+                    title: Text('Get link')
+                  )
+                ),
+                const PopupMenuDivider(),
+                const PopupMenuItem<String>(
+                  value: 'Remove',
+                  child: ListTile(
+                    leading: Icon(Icons.delete),
+                    title: Text('Remove')
+                  )
+                )
+              ]
+            )
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuButton/index.dart

@@ -0,0 +1,47 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 14:43:50 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 15:44:31
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String content0 = '''
+### **简介**
+> 一个提供菜单栏弹出对话框的按钮
+- 点击的时候弹出菜单栏对话框，当选择其中一项后会调用 onSelected方法。传递其所选的菜单项的值
+- 可以提供child子widget或者一个icon给它，但是并不能两者都提供
+- 如果什么都没有提供给 PopupMenuButton ，则会根据运行平台创建一个overflow icon
+
+''';
+
+const String content1 = '''
+### **基本用法**
+> PopupMenuButton 通常配合 PopupMenuItem 一起使用
+- enabled 标识当前item是否可点击
+- PopupMenuItem 可以在child中传入带有Icon的widget
+- 可以指定 PopupMenuButton 的 初始值 initialValue
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Menu/PopupMenuButton';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content0,
+        content1,
+        PopupMenuButtonDemo(),
+      ],
+      codeUrl: 'components/Menu/PopupMenuButton/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/material/PopupMenuButton-class.html',
+      title: 'PopupMenuButton',
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuDivider/demo.dart

@@ -0,0 +1,69 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 15:45:26 
+ * @Last Modified by:   一凨 
+ * @Last Modified time: 2018-12-27 15:45:26 
+ */
+import 'package:flutter/material.dart';
+import 'package:fluttertoast/fluttertoast.dart';
+
+
+
+class PopupMenuDividerDemo extends StatelessWidget {
+
+
+    void showInSnackBar(String value) {
+    Fluttertoast.showToast(
+        msg: value,
+        toastLength: Toast.LENGTH_SHORT,
+        gravity: ToastGravity.CENTER,
+        timeInSecForIos: 1,
+        backgroundColor: Colors.grey,
+        textColor: Colors.white);
+  }
+
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child:ListTile(
+            title: const Text('An item with a sectioned menu'),
+            trailing: PopupMenuButton<String>(
+              padding: EdgeInsets.zero,
+              onSelected: showInSnackBar,
+              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
+                const PopupMenuItem<String>(
+                  value: 'Preview',
+                  child: ListTile(
+                    leading: Icon(Icons.visibility),
+                    title: Text('Preview')
+                  )
+                ),
+                const PopupMenuItem<String>(
+                  value: 'Share',
+                  child: ListTile(
+                    leading: Icon(Icons.person_add),
+                    title: Text('Share')
+                  )
+                ),
+                const PopupMenuItem<String>(
+                  value: 'Get Link',
+                  child: ListTile(
+                    leading: Icon(Icons.link),
+                    title: Text('Get link')
+                  )
+                ),
+                const PopupMenuDivider(),
+                const PopupMenuItem<String>(
+                  value: 'Remove',
+                  child: ListTile(
+                    leading: Icon(Icons.delete),
+                    title: Text('Remove')
+                  )
+                )
+              ]
+            )
+          ),
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuDivider/index.dart

@@ -0,0 +1,44 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 14:51:58 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 15:55:22
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import './demo.dart';
+
+const String content0 = '''
+### **简介**
+> 一个提供菜单栏弹出对话框中每一项的水平线
+- 配合 PopupMenuItem 和 PopupMenuButton 使用
+- PopupMenuDivider 可以调整高度，但无法调整颜色
+''';
+
+const String content1 = '''
+### **基本用法**
+> 此widget通过调整Divider widget 来适应于弹出菜单中
+- 在 PopupMenuButton 中直接 new PopupMenuDivider() 即可
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Menu/PopupMenuDivider';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content0,
+        content1,
+        PopupMenuDividerDemo(),
+      ],
+      codeUrl: 'components/Menu/PopupMenuDivider/demo.dart',
+      docUrl:
+          'https://docs.flutter.io/flutter/material/PopupMenuDivider-class.html',
+      title: 'PopupMenuDivider',
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuEntry/index.dart

@@ -0,0 +1,41 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-27 14:51:58 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 16:06:20
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import '../PopupMenuDivider/demo.dart';
+
+const String content0 = '''
+### **简介**
+> Material 风格中 弹出菜单的一个基类
+- 如果需要创建一个显示弹出菜单的按钮，请考虑使用 PopupMenuButton.
+''';
+
+const String content1 = '''
+### **基本用法**
+- PopupMenuDivider 是一条水平分割线，注意数组要使用父类 PopupMenuEntry，配合其他 item 样式共同使用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Menu/PopupMenuEntry';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content0,
+        content1,
+        PopupMenuDividerDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/PopupMenuEntry-class.html',
+      codeUrl: 'components/Menu/PopupMenuEntry/demo.dart',
+      title: 'PopupMenuEntry',
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuItem/index.dart

@@ -0,0 +1,41 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-29 15:04:51 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-29 15:07:16
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import '../PopupMenuDivider/demo.dart';
+
+const String content0 = '''
+### **简介**
+> Material 中窗口弹出的菜单
+- 如果需要创建一个显示弹出菜单的按钮，请考虑使用 PopupMenuButton.
+''';
+
+const String content1 = '''
+### **基本用法**
+- PopupMenuDivider 是一条水平分割线，注意数组要使用父类 PopupMenuEntry，配合其他 item 样式共同使用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Menu/PopupMenuItem';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content0,
+        content1,
+        PopupMenuDividerDemo()
+      ],
+      docUrl: "https://docs.flutter.io/flutter/material/PopupMenuItem-class.html",
+      codeUrl: 'components/Menu/PopupMenuEntry/demo.dart',
+      title: 'PopupMenuItem',
+    );
+  }
+}

lib/widgets/components/Menu/PopupMenuItemState/index.dart

@@ -0,0 +1,42 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-29 15:04:51 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-29 16:22:06
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import '../PopupMenuDivider/demo.dart';
+
+const String content0 = '''
+### **简介**
+> 这个state 是 PopupMenuItem 子类
+- 默认情况下，它实现了Material Design弹出菜单项的基本样式和布局，然而这个buidlChild方法可以重写，以调整放置在菜单中的位置。默认它返回PopupMenuItem.child。
+
+''';
+
+const String content1 = '''
+### **基本用法**
+- PopupMenuDivider 是一条水平分割线，注意数组要使用父类 PopupMenuEntry，配合其他 item 样式共同使用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Menu/PopupMenuItem';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content0,
+        content1,
+        PopupMenuDividerDemo()
+      ],
+      docUrl: "https://docs.flutter.io/flutter/material/PopupMenuItem-class.html",
+      codeUrl: 'components/Menu/PopupMenuEntry/demo.dart',
+      title: 'PopupMenuItem',
+    );
+  }
+}

lib/widgets/components/Menu/index.dart

@@ -0,0 +1,50 @@
+/*
+ * @Author: 一凨 
+ * @Date: 2018-12-22 21:01:42 
+ * @Last Modified by: 一凨
+ * @Last Modified time: 2018-12-27 14:53:04
+ */
+import 'package:flutter/material.dart';
+import '../../../model/widget.dart';
+
+import './CheckedPopupMenuItem/index.dart' as CheckedPopupMenuItem;
+import './DropdownMenuItem/index.dart' as DropdownMenuItem;
+import './PopupMenuButton/index.dart' as PopupMenuButton;
+import './PopupMenuDivider/index.dart' as PopupMenuDivider;
+import './PopupMenuEntry/index.dart' as PopupMenuEntry;
+import './PopupMenuItem/index.dart' as PopupMenuItem;
+import './PopupMenuItemState/index.dart' as PopupMenuItemState;
+
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name:'CheckedPopupMenuItem',
+    routerName: CheckedPopupMenuItem.Demo.routeName,
+    buildRouter: (BuildContext context) => CheckedPopupMenuItem.Demo(),
+  ),
+  WidgetPoint(
+    name:'DropdownMenuItem',
+    routerName: DropdownMenuItem.Demo.routeName,
+    buildRouter: (BuildContext context) => DropdownMenuItem.Demo(),
+  ),
+  WidgetPoint(
+    name:'PopupMenuButton',
+    routerName: PopupMenuButton.Demo.routeName,
+    buildRouter: (BuildContext context) => PopupMenuButton.Demo(),
+  ),
+  WidgetPoint(
+    name:'PopupMenuDivider',
+    routerName: PopupMenuDivider.Demo.routeName,
+    buildRouter: (BuildContext context) => PopupMenuDivider.Demo(),
+  ),
+  WidgetPoint(
+    name:'PopupMenuEntry',
+    routerName: PopupMenuEntry.Demo.routeName,
+    buildRouter: (BuildContext context) => PopupMenuEntry.Demo(),
+  ),
+  WidgetPoint(
+    name:'PopupMenuItemState',
+    routerName: PopupMenuItemState.Demo.routeName,
+    buildRouter: (BuildContext context) => PopupMenuItemState.Demo(),
+  ),
+];

lib/widgets/components/Navigation/BottomNavigationBar/demo.dart

@@ -0,0 +1,71 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/27
+ * Time: 下午6:27
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: BottomNavigationBar 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class BottomNavigationBarFullDefault extends StatefulWidget {
+  const BottomNavigationBarFullDefault() : super();
+  @override
+  State<StatefulWidget> createState() => _BottomNavigationBarFullDefault();
+}
+
+/*
+* BottomNavigationBar 默认的实例,有状态
+* */
+class _BottomNavigationBarFullDefault extends State {
+   int _currentIndex = 1;
+
+  void _onItemTapped(int index) {
+    setState(() {
+      _currentIndex = index;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BottomNavigationBar(
+      type: BottomNavigationBarType.fixed, // BottomNavigationBarType 中定义的类型，有 fixed 和 shifting 两种类型
+      iconSize: 24.0, // BottomNavigationBarItem 中 icon 的大小
+      currentIndex: _currentIndex, // 当前所高亮的按钮index
+      onTap: _onItemTapped, // 点击里面的按钮的回调函数，参数为当前点击的按钮 index
+      fixedColor: Colors.deepPurple, // 如果 type 类型为 fixed，则通过 fixedColor 设置选中 item 的颜色
+      items: <BottomNavigationBarItem> [
+        BottomNavigationBarItem(
+            title: new Text("Home"), icon: new Icon(Icons.home)),
+        BottomNavigationBarItem(
+            title: new Text("List"), icon: new Icon(Icons.list)),
+        BottomNavigationBarItem(
+            title: new Text("Message"), icon: new Icon(Icons.message)),
+
+      ],
+    );
+  }
+}
+
+/*
+* BottomNavigationBar 默认的实例,无状态
+* */
+class BottomNavigationBarLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const BottomNavigationBarLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return BottomNavigationBar(
+    );
+  }
+}

lib/widgets/components/Navigation/BottomNavigationBar/index.dart

@@ -0,0 +1,93 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/27
+ * Time: 下午6:28
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: BottomNavigationBar 的示例
+ */
+import '../customDemo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as BottomNavigationBarDemo;
+
+const String _text0 =
+"""### **简介**
+> BottomNavigationBar “底部导航栏”，
+- 显示在应用程序底部的导航栏,由文本标签，图标或两者形式的多个项目组成。
+- 它提供了应用程序顶级视图之间的快速导航。
+""";
+
+
+const String _text1 =
+"""### **基本用法**
+> BottomNavigationBar 底部导航栏通常与Scaffold结合使用
+- 它作为Scaffold.bottomNavigationBar参数。
+- BottomNavigationBar金支持0-4个之间个底部按钮数量，超出4个系统将会报异常。
+- 默认0-3个底部按钮数量时，BottomNavigationBar采用fixed的模式摆放底部按钮，当超过4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮
+- 下面的底部导航即是效果。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Navigation/BottomNavigationBar';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return CustomDemo(
+      title: 'BottomNavigationBar',
+      codeUrl: '${Application.github['widgetsURL']}components/Navigation/BottomNavigationBar/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html',
+      bottomNaviBar:BottomNavigationBarDemo.BottomNavigationBarFullDefault()
+    );
+  }
+}
+
+/**
+ * 所有的 BottomNavigationBar widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _text0),
+            textAlignBar(_text1),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                //BottomNavigationBarDemo.BottomNavigationBarFullDefault();
+              ],
+            ),
+            SizedBox(width: 20.0), // 间距
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt) {
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+          ])
+  );
+}
+
+

lib/widgets/components/Navigation/BottomNavigationBarItem/demo.dart

@@ -0,0 +1,82 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午10:00
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: BottomNavigationBarItem 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class BottomNavigationBarItemFullDefault extends StatefulWidget {
+  const BottomNavigationBarItemFullDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _BottomNavigationBarItemFullDefault();
+}
+
+/*
+* BottomNavigationBarItem 默认的实例,有状态
+* */
+class _BottomNavigationBarItemFullDefault extends State {
+  @override
+  Widget build(BuildContext context) {
+  }
+}
+
+/*
+* BottomNavigationBarItem 默认的实例,无状态
+* */
+class BottomNavigationBarItemLessDefault extends StatelessWidget {
+  final widget;
+  final parent;
+
+  const BottomNavigationBarItemLessDefault([this.widget, this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return new SizedBox(
+        height: 100,
+        child: Scaffold(
+          bottomNavigationBar: new BottomNavigationBar(items: [
+            new BottomNavigationBarItem(
+                icon: new Icon(Icons.laptop_chromebook),
+                title: new Text("主页"),
+                backgroundColor: Colors.red
+            ),
+            new BottomNavigationBarItem(
+                icon: new Icon(Icons.list), title: new Text("分类"),backgroundColor: Colors.grey),
+            new BottomNavigationBarItem(
+                icon: new Icon(Icons.local_grocery_store), title: new Text("购物车")),
+            new BottomNavigationBarItem(icon: new Icon(Icons.person), title: new Text("我的"))
+          ],
+            //onTap: onTap,
+            //currentIndex: page
+          ),
+        )
+    );
+  }
+}
+
+//backgroundColor: Colors.grey,
+//
+////      body: new PageView(
+////
+////          children: [
+////            new Index(),
+////            new Classify(),
+////            new Shopping(),
+////            new Myself()
+////          ],
+////
+////          controller: pageController,
+////          onPageChanged: onPageChanged
+////      ),
+//

lib/widgets/components/Navigation/BottomNavigationBarItem/index.dart

@@ -0,0 +1,89 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/1
+ * Time: 下午9:55
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: BottomNavigationBarItem 的示例
+ */
+import '../../../../common/widget-demo.dart';
+import '../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as BottomNavigationBarItemDemo;
+
+const String _Text0 =
+"""### **简介**
+> BottomNavigationBarItem “底部导航应用栏”
+- material 的 BottomNavigationBar 或带有图标和标题的 iOS主题 CupertinoTabBar 中的交互式按钮。
+""";
+
+
+const String _Text1 =
+"""### **基本用法**
+> 这个类很少单独使用。通常嵌入在上面的一个底部 bottom navigation widgets 中。
+""";
+
+const String _Text2 =
+"""### **进阶用法**
+> BottomNavigationBarItem
+- 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Navigation/BottomNavigationBarItem';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'BottomNavigationBarItem',
+      codeUrl: '${Application.github['widgetsURL']}componentss/Bar/BottomNavigationBarItem/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/widgets/BottomNavigationBarItem-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 BottomNavigationBarItem widget
+ * context: 运行上下文
+ * that: 指向有状态的 StatefulWidget
+ */
+Widget allCheckboxs(BuildContext context, _DemoState that) {
+  return Container(
+    //padding: new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0, right: 0),
+      child: Column(
+        //mainAxisSize: MainAxisSize.max,
+          children: <Widget>[
+            MarkdownBody(data: _Text0),
+            SizedBox(height: 20.0), // 间距
+            MarkdownBody(data: _Text1),
+            SizedBox(height: 20.0), // 间距
+            BottomNavigationBarItemDemo.BottomNavigationBarItemLessDefault(),
+            SizedBox(height: 20.0), // 间距
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt) {
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+          ])
+  );
+}
+
+

lib/widgets/components/Navigation/customDemo.dart

@@ -0,0 +1,35 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/12/27
+ * Time: 下午10:12
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+import '../../../common/widget-demo.dart';
+import 'package:flutter/material.dart';
+
+class CustomDemo extends WidgetDemo {
+
+  final Widget child;
+  final String docUrl;
+  final String title;
+  final String codeUrl;
+  final Widget bottomNaviBar;
+  CustomDemo(
+      {Key key,
+        @required this.title,
+        @required this.child,
+        @required this.codeUrl,
+        @required this.docUrl,
+        this.bottomNaviBar
+      })
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context,[bottomNavigationBar]) {
+    print('bottomNavigationBar:${bottomNaviBar}');
+    final factory = super.build(context,bottomNaviBar);
+    return factory;
+  }
+}

lib/widgets/components/Navigation/index.dart

@@ -0,0 +1,26 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/12/27
+ * Time: 下午2:50
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'BottomNavigationBar/index.dart' as BottomNavigationBar;
+import 'BottomNavigationBarItem/index.dart' as BottomNavigationBarItem;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'BottomNavigationBar',
+    routerName: BottomNavigationBar.Demo.routeName,
+    buildRouter: (BuildContext context) => BottomNavigationBar.Demo(),
+  ),
+  WidgetPoint(
+    name: 'BottomNavigationBarItem',
+    routerName: BottomNavigationBarItem.Demo.routeName,
+    buildRouter: (BuildContext context) => BottomNavigationBarItem.Demo(),
+  )
+];

lib/widgets/components/Panel/ExpansionPanel/demo.dart

@@ -0,0 +1,275 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+
+@visibleForTesting
+enum Location {
+  Barbados,
+  Bahamas,
+  Bermuda
+}
+
+typedef DemoItemBodyBuilder<T> = Widget Function(DemoItem<T> item);
+typedef ValueToString<T> = String Function(T value);
+
+class DualHeaderWithHint extends StatelessWidget {
+  const DualHeaderWithHint({
+    this.name,
+    this.value,
+    this.hint,
+    this.showHint
+  });
+
+  final String name;
+  final String value;
+  final String hint;
+  final bool showHint;
+
+  Widget _crossFade(Widget first, Widget second, bool isExpanded) {
+    return AnimatedCrossFade(
+      firstChild: first,
+      secondChild: second,
+      firstCurve: const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
+      secondCurve: const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
+      sizeCurve: Curves.fastOutSlowIn,
+      crossFadeState: isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+      duration: const Duration(milliseconds: 200),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final TextTheme textTheme = theme.textTheme;
+
+    return Row(
+      children: <Widget>[
+        Expanded(
+          flex: 2,
+          child: Container(
+            margin: const EdgeInsets.only(left: 24.0),
+            child: FittedBox(
+              fit: BoxFit.scaleDown,
+              alignment: Alignment.centerLeft,
+              child: Text(
+                name,
+                style: textTheme.body1.copyWith(fontSize: 15.0),
+              ),
+            ),
+          ),
+        ),
+        Expanded(
+          flex: 3,
+          child: Container(
+            margin: const EdgeInsets.only(left: 24.0),
+            child: _crossFade(
+              Text(value, style: textTheme.caption.copyWith(fontSize: 15.0)),
+              Text(hint, style: textTheme.caption.copyWith(fontSize: 15.0)),
+              showHint
+            )
+          )
+        )
+      ]
+    );
+  }
+}
+
+class CollapsibleBody extends StatelessWidget {
+  const CollapsibleBody({
+    this.margin = EdgeInsets.zero,
+    this.child,
+    this.onSave,
+    this.onCancel
+  });
+
+  final EdgeInsets margin;
+  final Widget child;
+  final VoidCallback onSave;
+  final VoidCallback onCancel;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final TextTheme textTheme = theme.textTheme;
+
+    return Column(
+      children: <Widget>[
+        Container(
+          margin: const EdgeInsets.only(
+            left: 24.0,
+            right: 24.0,
+            bottom: 24.0
+          ) - margin,
+          child: Center(
+            child: DefaultTextStyle(
+              style: textTheme.caption.copyWith(fontSize: 15.0),
+              child: child
+            )
+          )
+        ),
+        const Divider(height: 1.0),
+        Container(
+          padding: const EdgeInsets.symmetric(vertical: 16.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: <Widget>[
+              Container(
+                margin: const EdgeInsets.only(right: 8.0),
+                child: FlatButton(
+                  onPressed: onCancel,
+                  child: const Text('CANCEL', style: TextStyle(
+                    color: Colors.black54,
+                    fontSize: 15.0,
+                    fontWeight: FontWeight.w500
+                  ))
+                )
+              ),
+              Container(
+                margin: const EdgeInsets.only(right: 8.0),
+                child: FlatButton(
+                  onPressed: onSave,
+                  textTheme: ButtonTextTheme.accent,
+                  child: const Text('SAVE')
+                )
+              )
+            ]
+          )
+        )
+      ]
+    );
+  }
+}
+
+class DemoItem<T> {
+  DemoItem({
+    this.name,
+    this.value,
+    this.hint,
+    this.builder,
+    this.valueToString
+  }) : textController = TextEditingController(text: valueToString(value));
+
+  final String name;
+  final String hint;
+  final TextEditingController textController;
+  final DemoItemBodyBuilder<T> builder;
+  final ValueToString<T> valueToString;
+  T value;
+  bool isExpanded = false;
+
+  ExpansionPanelHeaderBuilder get headerBuilder {
+    return (BuildContext context, bool isExpanded) {
+      return DualHeaderWithHint(
+        name: name,
+        value: valueToString(value),
+        hint: hint,
+        showHint: isExpanded
+      );
+    };
+  }
+
+  Widget build() => builder(this);
+}
+
+class ExpansionPanelsDemo extends StatefulWidget {
+  static const String routeName = '/material/expansion_panels';
+
+  @override
+  _ExpansionPanelsDemoState createState() => _ExpansionPanelsDemoState();
+}
+
+class _ExpansionPanelsDemoState extends State<ExpansionPanelsDemo> {
+  List<DemoItem<dynamic>> _demoItems;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _demoItems = <DemoItem<dynamic>>[
+
+      DemoItem<Location>(
+        name: 'Location',
+        value: Location.Bahamas,
+        hint: 'Select location',
+        valueToString: (Location location) => location.toString().split('.')[1],
+        builder: (DemoItem<Location> item) {
+          void close() {
+            setState(() {
+              item.isExpanded = false;
+            });
+          }
+          return Form(
+            child: Builder(
+              builder: (BuildContext context) {
+                return CollapsibleBody(
+                  onSave: () { Form.of(context).save(); close(); },
+                  onCancel: () { Form.of(context).reset(); close(); },
+                  child: FormField<Location>(
+                    initialValue: item.value,
+                    onSaved: (Location result) { item.value = result; },
+                    builder: (FormFieldState<Location> field) {
+                      return Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: <Widget>[
+                          RadioListTile<Location>(
+                            value: Location.Bahamas,
+                            title: const Text('Bahamas'),
+                            groupValue: field.value,
+                            onChanged: field.didChange,
+                          ),
+                          RadioListTile<Location>(
+                            value: Location.Barbados,
+                            title: const Text('Barbados'),
+                            groupValue: field.value,
+                            onChanged: field.didChange,
+                          ),
+                          RadioListTile<Location>(
+                            value: Location.Bermuda,
+                            title: const Text('Bermuda'),
+                            groupValue: field.value,
+                            onChanged: field.didChange,
+                          ),
+                        ]
+                      );
+                    }
+                  ),
+                );
+              }
+            )
+          );
+        }
+      ),
+    ];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return  SingleChildScrollView(
+        child: SafeArea(
+          top: false,
+          bottom: false,
+          child: Container(
+            margin: const EdgeInsets.all(24.0),
+            child: ExpansionPanelList(
+              expansionCallback: (int index, bool isExpanded) {
+                setState(() {
+                  _demoItems[index].isExpanded = !isExpanded;
+                });
+              },
+              children: _demoItems.map<ExpansionPanel>((DemoItem<dynamic> item) {
+                return ExpansionPanel(
+                  isExpanded: true,
+                  headerBuilder: item.headerBuilder,
+                  body: item.build()
+                );
+              }).toList()
+            ),
+          ),
+        ),
+      );
+  }
+}

lib/widgets/components/Panel/ExpansionPanel/index.dart

@@ -0,0 +1,41 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-21 11:35:39 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 11:36:23
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 扩展面板，包含一个标题和一个正文，可以展开或者折叠。面板展开，主体可见。
+
+ 
+''';
+const String content1 = '''
+### **基本用法**
+
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Panel/ExpansionPanel';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          ExpansionPanelsDemo(),
+        ],
+        codeUrl: 'widgets/components/Panel/ExpansionPanel/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/RawChip-class.html',
+        title: 'ExpansionPanel');
+  }
+}

lib/widgets/components/Panel/ExpansionPanelList/demo.dart

@@ -0,0 +1,210 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+
+@visibleForTesting
+enum Location {
+  Barbados,
+  Bahamas,
+  Bermuda
+}
+
+typedef DemoItemBodyBuilder<T> = Widget Function(DemoItem<T> item);
+typedef ValueToString<T> = String Function(T value);
+
+/**
+ * google flutter 详情多个例子地址：
+ * https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/expansion_panels_demo.dart
+ */
+class DualHeaderWithHint extends StatelessWidget {
+  const DualHeaderWithHint({
+    this.name,
+    this.value,
+    this.hint,
+    this.showHint
+  });
+
+  final String name;
+  final String value;
+  final String hint;
+  final bool showHint;
+
+  Widget _crossFade(Widget first, Widget second, bool isExpanded) {
+    return AnimatedCrossFade(
+      firstChild: first,
+      secondChild: second,
+      firstCurve: const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
+      secondCurve: const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
+      sizeCurve: Curves.fastOutSlowIn,
+      crossFadeState: isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+      duration: const Duration(milliseconds: 200),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
+    final TextTheme textTheme = theme.textTheme;
+
+    return Row(
+      children: <Widget>[
+        Expanded(
+          flex: 2,
+          child: Container(
+            margin: const EdgeInsets.only(left: 24.0),
+            child: FittedBox(
+              fit: BoxFit.scaleDown,
+              alignment: Alignment.centerLeft,
+              child: Text(
+                name,
+                style: textTheme.body1.copyWith(fontSize: 15.0),
+              ),
+            ),
+          ),
+        ),
+        Expanded(
+          flex: 3,
+          child: Container(
+            margin: const EdgeInsets.only(left: 24.0),
+            child: _crossFade(
+              Text(value, style: textTheme.caption.copyWith(fontSize: 15.0)),
+              Text(hint, style: textTheme.caption.copyWith(fontSize: 15.0)),
+              showHint
+            )
+          )
+        )
+      ]
+    );
+  }
+}
+
+
+class DemoItem<T> {
+  DemoItem({
+    this.name,
+    this.value,
+    this.hint,
+    this.builder,
+    this.valueToString
+  }) : textController = TextEditingController(text: valueToString(value));
+
+  final String name;
+  final String hint;
+  final TextEditingController textController;
+  final DemoItemBodyBuilder<T> builder;
+  final ValueToString<T> valueToString;
+  T value;
+  bool isExpanded = true;
+
+  ExpansionPanelHeaderBuilder get headerBuilder {
+    return (BuildContext context, bool isExpanded) {
+      return DualHeaderWithHint(
+        name: name,
+        value: valueToString(value),
+        hint: hint,
+        showHint: isExpanded
+      );
+    };
+  }
+
+  Widget build() => builder(this);
+}
+
+class ExpansionPanelsDemo extends StatefulWidget {
+  // static const String routeName = '/material/expansion_panels';
+
+  @override
+  _ExpansionPanelsDemoState createState() => _ExpansionPanelsDemoState();
+}
+
+class _ExpansionPanelsDemoState extends State<ExpansionPanelsDemo> {
+  List<DemoItem<dynamic>> _demoItems;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _demoItems = <DemoItem<dynamic>>[
+
+      DemoItem<Location>(
+        name: 'Location',
+        value: Location.Bahamas,
+        hint: 'Select location',
+        valueToString: (Location location) => location.toString().split('.')[1],
+        builder: (DemoItem<Location> item) {
+          void close() {
+            setState(() {
+              item.isExpanded = false;
+            });
+          }
+          return Form(
+            child: Builder(
+              builder: (BuildContext context) {
+                return FormField<Location>(
+                    initialValue: item.value,
+                    onSaved: (Location result) { item.value = result; },
+                    builder: (FormFieldState<Location> field) {
+                      return Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: <Widget>[
+                          RadioListTile<Location>(
+                            value: Location.Bahamas,
+                            title: const Text('Bahamas'),
+                            groupValue: field.value,
+                            onChanged: field.didChange,
+                          ),
+                          RadioListTile<Location>(
+                            value: Location.Barbados,
+                            title: const Text('Barbados'),
+                            groupValue: field.value,
+                            onChanged: field.didChange,
+                          ),
+                          RadioListTile<Location>(
+                            value: Location.Bermuda,
+                            title: const Text('Bermuda'),
+                            groupValue: field.value,
+                            onChanged: field.didChange,
+                          ),
+                        ]
+                      );
+                    }
+                  );
+              }
+            )
+          );
+        }
+      ),
+    ];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return  SingleChildScrollView(
+        child: SafeArea(
+          top: false,
+          bottom: false,
+          child: Container(
+            margin: const EdgeInsets.all(24.0),
+            child: ExpansionPanelList(
+              expansionCallback: (int index, bool isExpanded) {
+                setState(() {
+                  _demoItems[index].isExpanded = !isExpanded;
+                });
+              },
+              children: _demoItems.map<ExpansionPanel>((DemoItem<dynamic> item) {
+                return ExpansionPanel(
+                  isExpanded: true,
+                  headerBuilder: item.headerBuilder,
+                  body: item.build()
+                );
+              }).toList()
+            ),
+          ),
+        ),
+      );
+  }
+}

lib/widgets/components/Panel/ExpansionPanelList/index.dart

@@ -0,0 +1,47 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 20:30:41 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2019-01-08 16:15:20
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 所有chip widget类型的基础，集合所有功能，我们通常不是直接使用它，而是根据自己需要选择chi， 比如：
+- chip ,一个简单的芯片，只能显示信息，并被删除
+- inputChip,以紧凑的形式表现复杂的信息，例如：实体（人，地点，或者事物）或者会话文本
+- choiceChip,允许从一组选项中进行单一的选择
+- FilterChip,使用标签或描述作为过滤内容的方式
+
+ 
+''';
+const String content1 = '''
+### **基本用法**
+- inputChip可以通过设置进行选择onSelected，通过设置onDeleted可以删除，并且可以通过OnPressed表现按压效果
+- inputChip 有一个前导图标和尾随图标，填充颜色可以订制
+- inputChip 可以和其他UI元素搭配使用，比如：wrap,ListView(scrollDirection为Axis.horizo​​ntal)
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Panel/ExpansionPanel';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          ExpansionPanelsDemo(),
+        ],
+        codeUrl: 'components/Panel/ExpansionPanelList/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/RawChip-class.html',
+        title: 'RawChip');
+  }
+}

lib/widgets/components/Panel/ExpansionPanelRadio/index.dart

@@ -0,0 +1,47 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-20 20:30:41 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 11:35:48
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+// import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 所有chip widget类型的基础，集合所有功能，我们通常不是直接使用它，而是根据自己需要选择chi， 比如：
+- chip ,一个简单的芯片，只能显示信息，并被删除
+- inputChip,以紧凑的形式表现复杂的信息，例如：实体（人，地点，或者事物）或者会话文本
+- choiceChip,允许从一组选项中进行单一的选择
+- FilterChip,使用标签或描述作为过滤内容的方式
+
+ 
+''';
+const String content1 = '''
+### **基本用法**
+- inputChip可以通过设置进行选择onSelected，通过设置onDeleted可以删除，并且可以通过OnPressed表现按压效果
+- inputChip 有一个前导图标和尾随图标，填充颜色可以订制
+- inputChip 可以和其他UI元素搭配使用，比如：wrap,ListView(scrollDirection为Axis.horizo​​ntal)
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Chip/RawChip';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          // FilterChipDemo(),
+        ],
+        codeUrl: 'components/Chip/RawChip/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/RawChip-class.html',
+        title: 'RawChip');
+  }
+}

lib/widgets/components/Panel/index.dart

@@ -0,0 +1,27 @@
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'ExpansionPanel/index.dart' as ExpansionPanel;
+import 'ExpansionPanelList/index.dart' as ExpansionPanelList;
+import 'ExpansionPanelRadio/index.dart' as ExpansionPanelRadio;
+
+
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'ExpansionPanel',
+    routerName: ExpansionPanel.Demo.routeName,
+    buildRouter: (BuildContext context) => ExpansionPanel.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ExpansionPanelRadio',
+    routerName: ExpansionPanelRadio.Demo.routeName,
+    buildRouter: (BuildContext context) => ExpansionPanelRadio.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ExpansionPanelList',
+    routerName: ExpansionPanelList.Demo.routeName,
+    buildRouter: (BuildContext context) => ExpansionPanelList.Demo(),
+  ),
+
+];

lib/widgets/components/Pick/DayPicker/demo.dart

@@ -0,0 +1,67 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:32 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 19:12:32
+ */
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+class DayPickerDemo extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _showDialog();
+}
+
+class _showDialog extends State<DayPickerDemo> {
+  DateTime _date = new DateTime.now();
+  TimeOfDay _time = new TimeOfDay.now();
+
+  Future<void> _selectDate(BuildContext context) async {
+    final DateTime picked = await showDatePicker(
+        context: context,
+        initialDate: _date,
+        firstDate: DateTime(2015, 8),
+        lastDate: DateTime(2101));
+    if (picked != null && picked != _date)
+      print("data selectied :${_date.toString()}");
+    setState(() {
+      _date = picked;
+    });
+
+    if (picked == null) _date = new DateTime.now();
+  }
+
+  Future<void> _selectTime(BuildContext context) async {
+    final TimeOfDay picked =
+        await showTimePicker(context: context, initialTime: _time);
+    if (picked != null && picked != _time)
+      print("data selectied :${_time.toString()}");
+    setState(() {
+      _time = picked;
+    });
+    if (picked == null) _time = new TimeOfDay.now();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      children: <Widget>[
+        new Text('日期选择'),
+        new RaisedButton(
+          child: new Text('date selected:${_date.toString()}'),
+          onPressed: () {
+            _selectDate(context);
+          },
+        ),
+        new Text('时间选择'),
+        new RaisedButton(
+          child: new Text('date selected:${_time.toString()}'),
+          onPressed: () {
+            _selectTime(context);
+          },
+        )
+      ],
+    );
+  }
+}

lib/widgets/components/Pick/DayPicker/index.dart

@@ -0,0 +1,40 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 15:50:02
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 显示给定月份的日期，并可以选择一天
+- 该选择器widget很少使用，相反，请考虑使用showDatePicker,它会创建一个日期选择器对话框
+''';
+const String content1 = '''
+### **基本用法**
+- currentDate,设置显示器当前显示时间
+- displayedMonth ,设置选择器显示天数的月份
+- firstDate,设置选择的最早日期
+- lastDate,设置可选择的最晚日期
+- selectedDate，设置当前选择的日期
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Pick/DayPicker';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [content0, content1, DayPickerDemo()],
+        codeUrl: 'components/Pick/DayPicker/demo.dart',
+        docUrl: "https://docs.flutter.io/flutter/material/DayPicker-class.html",
+        title: 'DayPicker');
+  }
+}

lib/widgets/components/Pick/MonthPicker/demo.dart

@@ -0,0 +1,48 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:32 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-21 11:26:21
+ */
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+class MothPickerDemo extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _first();
+}
+
+class _first extends State<MothPickerDemo> {
+  DateTime _date = new DateTime.now();
+
+  Future<void> _selectDate(BuildContext context) async {
+    final DateTime picked = await showDatePicker(
+        context: context,
+        initialDate: _date,
+        firstDate: DateTime(2015, 8),
+        lastDate: DateTime(2101));
+    if (picked != null && picked != _date)
+      print("data selectied :${_date.toString()}");
+    setState(() {
+      _date = picked;
+    });
+
+    if (picked == null) _date = new DateTime.now();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      children: <Widget>[
+        new Text('日期选择'),
+        new RaisedButton(
+          child: new Text('date selected:${_date.toString()}'),
+          onPressed: () {
+            _selectDate(context);
+          },
+        ),
+      ],
+    );
+  }
+}

lib/widgets/components/Pick/MonthPicker/index.dart

@@ -0,0 +1,40 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 17:06:34
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 运行选择一个月的可滚动月份列表
+- 年份选择器widget很少使用，相反，请考虑使用showDatePicker,它会创建一个日期选择器对话框
+''';
+const String content1 = '''
+### **基本用法**
+- firstData,设置用户选择的最早日期
+- lastData,设置用户可选择的最晚日期
+- selectedDate，设置当前选择的日期
+- onchanged，当用户选择一个月的时候调用
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Pick/MonthPicker';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [content0, content1, MothPickerDemo()],
+        codeUrl: 'components/Pick/MonthPicker/demo.dart',
+        docUrl:
+            "https://docs.flutter.io/flutter/material/MonthPicker-class.html",
+        title: 'MonthPicker');
+  }
+}

lib/widgets/components/Pick/ShowdatePicker/demo.dart

@@ -0,0 +1,67 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:32 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 19:12:32
+ */
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+class ShowDatePickerDemo extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _showDialog();
+}
+
+class _showDialog extends State<ShowDatePickerDemo> {
+  DateTime _date = new DateTime.now();
+  TimeOfDay _time = new TimeOfDay.now();
+
+  Future<void> _selectDate(BuildContext context) async {
+    final DateTime picked = await showDatePicker(
+        context: context,
+        initialDate: _date,
+        firstDate: DateTime(2015, 8),
+        lastDate: DateTime(2101));
+    if (picked != null && picked != _date)
+      print("data selectied :${_date.toString()}");
+    setState(() {
+      _date = picked;
+    });
+
+    if (picked == null) _date = new DateTime.now();
+  }
+
+  Future<void> _selectTime(BuildContext context) async {
+    final TimeOfDay picked =
+        await showTimePicker(context: context, initialTime: _time);
+    if (picked != null && picked != _time)
+      print("data selectied :${_time.toString()}");
+    setState(() {
+      _time = picked;
+    });
+    if (picked == null) _time = new TimeOfDay.now();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      children: <Widget>[
+        new Text('日期选择'),
+        new RaisedButton(
+          child: new Text('date selected:${_date.toString()}'),
+          onPressed: () {
+            _selectDate(context);
+          },
+        ),
+        new Text('时间选择'),
+        new RaisedButton(
+          child: new Text('date selected:${_time.toString()}'),
+          onPressed: () {
+            _selectTime(context);
+          },
+        )
+      ],
+    );
+  }
+}

lib/widgets/components/Pick/ShowdatePicker/index.dart

@@ -0,0 +1,38 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 16:00:07
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 日期选择器的对话框
+- 返回为Futer，为用户关闭对话框时用户选择的日期。如果用户取消该对话框，则返回为null
+''';
+const String content1 = '''
+### **基本用法**
+- selectableDayPredicate可以传入自定义选择的天数。
+- 可选initialDatePickerMode参数可用于最初在年或月+日选择器模式中显示日期选择器。默认为月+日，且不能为空。
+- 可选locale参数可用于设置日期选择器的区域设置
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Pick/ShowdatePicker';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [content0, content1, ShowDatePickerDemo()],
+        codeUrl: 'components/Pick/ShowdatePicker/demo.dart',
+        docUrl: 'https://docs.flutter.io/flutter/material/showDatePicker.html',
+        title: 'ShowDatePicker');
+  }
+}

lib/widgets/components/Pick/YearPicker/demo.dart

@@ -0,0 +1,48 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:32 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-18 19:12:32
+ */
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+class YearPickerDemo extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _showDialog();
+}
+
+class _showDialog extends State<YearPickerDemo> {
+  DateTime _date = new DateTime.now();
+
+  Future<void> _selectDate(BuildContext context) async {
+    final DateTime picked = await showDatePicker(
+        context: context,
+        initialDate: _date,
+        firstDate: DateTime(2015, 8),
+        lastDate: DateTime(2101));
+    if (picked != null && picked != _date)
+      print("data selectied :${_date.toString()}");
+    setState(() {
+      _date = picked;
+    });
+
+    if (picked == null) _date = new DateTime.now();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      children: <Widget>[
+        new Text('日期选择'),
+        new RaisedButton(
+          child: new Text('date selected:${_date.toString()}'),
+          onPressed: () {
+            _selectDate(context);
+          },
+        ),
+      ],
+    );
+  }
+}

lib/widgets/components/Pick/YearPicker/index.dart

@@ -0,0 +1,39 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 16:00:07
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 运行选择一年的可滚动年份列表
+- 年份选择器widget很少使用，相反，请考虑使用showDatePicker,它会创建一个日期选择器对话框
+''';
+const String content1 = '''
+### **基本用法**
+- 使用firstData,设置用户选择的最早日期
+- 使用lastData,设置用户可选择的最晚日期
+- 使用selectedDate，设置当前选择的日期
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Pick/YearPicker';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [content0, content1, YearPickerDemo()],
+        codeUrl: 'components/Pick/YearPicker/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/YearPicker-class.html',
+        title: 'YearPicker');
+  }
+}

lib/widgets/components/Pick/index.dart

@@ -0,0 +1,30 @@
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'YearPicker/index.dart' as YearPicker;
+import 'DayPicker/index.dart' as DayPicker;
+import 'MonthPicker/index.dart' as MonthPicker;
+import 'ShowdatePicker/index.dart' as ShowdatePicker;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'YearPicker',
+    routerName: YearPicker.Demo.routeName,
+    buildRouter: (BuildContext context) => YearPicker.Demo(),
+  ),
+  WidgetPoint(
+    name: 'MonthPicker',
+    routerName: MonthPicker.Demo.routeName,
+    buildRouter: (BuildContext context) => MonthPicker.Demo(),
+  ),
+  WidgetPoint(
+    name: 'DayPicker',
+    routerName: DayPicker.Demo.routeName,
+    buildRouter: (BuildContext context) => DayPicker.Demo(),
+  ),
+  WidgetPoint(
+    name: 'ShowdatePicker',
+    routerName: ShowdatePicker.Demo.routeName,
+    buildRouter: (BuildContext context) => ShowdatePicker.Demo(),
+  ),
+];

lib/widgets/components/Progress/CircularProgressIndicator/demo.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+class CircularDemo extends StatefulWidget {
+  @override
+  _CircularDemoState createState() => _CircularDemoState();
+}
+
+class _CircularDemoState extends State<CircularDemo> {
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      children: <Widget>[
+        SizedBox(
+          height: 20,
+          width: 20,
+          child: CircularProgressIndicator(
+            backgroundColor: Colors.red,
+          ),
+        ),
+        SizedBox(
+          height: 30,
+          width: 30,
+          child: CircularProgressIndicator(
+            backgroundColor: Colors.red,
+          ),
+        ),
+        CircularProgressIndicator(
+          backgroundColor: Colors.redAccent,
+        ),
+        SizedBox(
+          height: 50,
+          width: 50,
+          child: CircularProgressIndicator(
+            backgroundColor: Colors.red,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/components/Progress/CircularProgressIndicator/index.dart

@@ -0,0 +1,46 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 16:00:07
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 循环进度条，旋转表示进度
+- 有两种线性进度条：确定和不确定。
+- 确定：确定进度条在每个时间点都有一个特定的值，并且该值应该是0.0递增到1.0。
+- 不确定：不确定的进度条在每一个时间点都没有特定到值。只是表明此时取得的进度，没有表明多少未完成。
+
+''';
+const String content1 = '''
+### **基本用法**
+- 创建确定进度条，需要使用介于0.0和1.0的非空值
+- 要创建不确定的进度条，需要使用空值
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName =
+      '/components/Progress/CircularProgressIndicator';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          CircularDemo(),
+        ],
+        codeUrl: '/components/Progress/CircularProgressIndicator/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/LinearProgressIndicator-class.html',
+        title: 'CircularProgressIndicator');
+  }
+}

lib/widgets/components/Progress/LinearProgressIndicator/demo.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+
+class LinearProgressIndicatorDemo extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 200.0,
+      child: LinearProgressIndicator(),
+    );
+  }
+}

lib/widgets/components/Progress/LinearProgressIndicator/index.dart

@@ -0,0 +1,46 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 16:00:07
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 一个线性进度条
+- 有两种线性进度条：确定和不确定。
+- 确定：确定进度条在每个时间点都有一个特定的值，并且该值应该是0.0递增到1.0。
+- 不确定：不确定的进度条在每一个时间点都没有特定到值。只是表明此时取得的进度，没有表明多少未完成。
+
+''';
+const String content1 = '''
+### **基本用法**
+- 创建确定进度条，需要使用介于0.0和1.0的非空值
+- 要创建不确定的进度条，需要使用空值
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName =
+      '/components/Progress/LinearProgressIndicator';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          LinearProgressIndicatorDemo(),
+        ],
+        codeUrl: '/components/Progress/LinearProgressIndicator/demo.dart',
+        docUrl:
+            'https://docs.flutter.io/flutter/material/LinearProgressIndicator-class.html',
+        title: 'LinearProgressIndicator');
+  }
+}

lib/widgets/components/Progress/RefreshProgressIndicator/index.dart

@@ -0,0 +1,43 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2018-12-17 15:37:16 
+ * @Last Modified by: xiaojia.dxj
+ * @Last Modified time: 2018-12-17 16:00:07
+ */
+import 'package:flutter/material.dart';
+import '../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const String content0 = '''
+### **简介**
+> 一个线性进度条
+- 有两种线性进度条：确定和不确定。
+- 确定：确定进度条在每个时间点都有一个特定的值，并且该值应该是0.0递增到1.0。
+- 不确定：不确定的进度条在每一个时间点都没有特定到值。只是表明此时取得的进度，没有表明多少未完成。
+
+''';
+const String content1 = '''
+### **基本用法**
+- 创建确定进度条，需要使用介于0.0和1.0的非空值
+- 要创建不确定的进度条，需要使用空值
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/components/Progress/RefreshProgressIndicator';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+        contentList: [
+          content0,
+          content1,
+          // LinearProgressIndicatorDemo(),
+        ],
+        codeUrl: '/components/Progress/RefreshProgressIndicator/demo.dart',
+        docUrl:'https://docs.flutter.io/flutter/material/RefreshProgressIndicator-class.html',
+        title: 'RefreshProgressIndicator');
+  }
+}

lib/widgets/components/Progress/index.dart

@@ -0,0 +1,18 @@
+import "package:flutter/material.dart";
+import '../../../model/widget.dart';
+
+import 'LinearProgressIndicator/index.dart' as LinearProgressIndicator;
+import 'CircularProgressIndicator/index.dart' as CircularProgressIndicator;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'LinearProgressIndicator',
+    routerName: LinearProgressIndicator.Demo.routeName,
+    buildRouter: (BuildContext context) => LinearProgressIndicator.Demo(),
+  ),
+  WidgetPoint(
+    name: 'CircularProgressIndicator',
+    routerName: CircularProgressIndicator.Demo.routeName,
+    buildRouter: (BuildContext context) => CircularProgressIndicator.Demo(),
+  ),
+];

lib/widgets/components/Scaffold/Scaffold/demo.dart

@@ -0,0 +1,60 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2019/1/6
+ * Time: 下午7:33
+ * email: sanfann@alibaba-inc.com
+ * tartget: TabBar 的示例
+ */
+
+import 'package:flutter/material.dart';
+
+class ScaffoldDemo extends StatefulWidget {
+  const ScaffoldDemo() : super();
+
+  @override
+  State<StatefulWidget> createState() => _ScaffoldDemo();
+}
+
+/*
+* AppBar 默认的实例,有状态
+* */
+class _ScaffoldDemo extends State with SingleTickerProviderStateMixin {
+  int count = 0;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // 如果省略了 leading ，但 AppBar 在带有 Drawer 的 Scaffold 中，则会插入一个 button 以打开 Drawer。
+    // 否则，如果最近的 Navigator 具有任何先前的 router ，则会插入BackButton。
+    // 这种行为可以通过设置来关闭automaticallyImplyLeading 为false。在这种情况下，空的 leading widget 将导致 middle/title widget 拉伸开始。
+    return new SizedBox(
+        height: 500,
+        child: new Scaffold(
+          appBar: AppBar(
+            title: Text('Sample Code'),
+          ),
+          body: Center(
+            child: Text('You have pressed the button times. $count'),
+          ),
+          floatingActionButtonLocation:
+              FloatingActionButtonLocation.centerDocked,
+          floatingActionButton: FloatingActionButton(
+            onPressed: () => setState(() {
+                  count += 1;
+                }),
+            tooltip: 'Increment Counter',
+            child: Icon(Icons.add),
+          ),
+        ));
+  }
+}