merge devlop

lib/widgets/elements/Form/Button/DropdownButton/demo.dart

@@ -0,0 +1,143 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: DropdownButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* DropdownButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class DropdownButtonDefault extends StatelessWidget {
+  List<DropdownMenuItem> generateItemList() {
+    List<DropdownMenuItem> items = new List();
+    DropdownMenuItem item1 = new DropdownMenuItem(
+        value: '张三', child: new Text('张三'));
+    DropdownMenuItem item2 = new DropdownMenuItem(
+        value: '李四', child: new Text('李四'));
+    DropdownMenuItem item3 = new DropdownMenuItem(
+        value: '王二', child: new Text('王二'));
+    DropdownMenuItem item4 = new DropdownMenuItem(
+        value: '麻子', child: new Text('麻子'));
+    items.add(item1);
+    items.add(item2);
+    items.add(item3);
+    items.add(item4);
+    return items;
+  }
+
+  var selectItemValue;
+
+  @override
+  Widget build(BuildContext context) {
+    return DropdownButton(
+        hint: new Text('下拉菜单选择一个人名'),
+        //设置这个value之后,选中对应位置的item，
+        //再次呼出下拉菜单，会自动定位item位置在当前按钮显示的位置处
+        value: selectItemValue,
+        items: generateItemList(),
+        onChanged: (T){
+//          setState(() {
+//          selectItemValue=T;
+//          });
+        },
+    );
+  }
+}
+
+List<DropdownMenuItem> getListData(){
+  List<DropdownMenuItem> items=new List();
+  DropdownMenuItem dropdownMenuItem1=new DropdownMenuItem(
+    child:new Text('1'),
+    value: '1',
+  );
+  items.add(dropdownMenuItem1);
+  DropdownMenuItem dropdownMenuItem2=new DropdownMenuItem(
+    child:new Text('2'),
+    value: '2',
+  );
+  items.add(dropdownMenuItem2);
+  DropdownMenuItem dropdownMenuItem3=new DropdownMenuItem(
+    child:new Text('3'),
+    value: '3',
+  );
+  items.add(dropdownMenuItem3);
+  DropdownMenuItem dropdownMenuItem4=new DropdownMenuItem(
+    child:new Text('4'),
+    value: '4',
+  );
+  items.add(dropdownMenuItem4);
+  DropdownMenuItem dropdownMenuItem5=new DropdownMenuItem(
+    child:new Text('5'),
+    value: '5',
+  );
+  items.add(dropdownMenuItem5);
+  DropdownMenuItem dropdownMenuItem6=new DropdownMenuItem(
+    child:new Text('6'),
+    value: '6',
+  );
+  items.add(dropdownMenuItem6);
+  DropdownMenuItem dropdownMenuItem7=new DropdownMenuItem(
+    child:new Text('7'),
+    value: '7',
+  );
+  items.add(dropdownMenuItem7);
+  DropdownMenuItem dropdownMenuItem8=new DropdownMenuItem(
+    child:new Text('8'),
+    value: '8',
+  );
+  items.add(dropdownMenuItem8);
+  DropdownMenuItem dropdownMenuItem9=new DropdownMenuItem(
+    child:new Text('9'),
+    value: '9',
+  );
+  items.add(dropdownMenuItem9);
+  DropdownMenuItem dropdownMenuItem10=new DropdownMenuItem(
+    child:new Text('10'),
+    value: '10',
+  );
+  items.add(dropdownMenuItem10);
+  return items;
+}
+var selectItemValue;
+
+/*
+* DropdownButton 自定义的实例
+* */
+class DropdownButtonCustom extends StatelessWidget {
+  final widget;
+  final parent;
+  const DropdownButtonCustom([this.widget,this.parent])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return DropdownButton(
+        items: getListData(),
+        //当没有默认值的时候可以设置的提示
+        hint:Text('下拉选择你想要的数据'),
+        //下拉菜单选择完之后显示给用户的值
+        value: selectItemValue,
+        //下拉菜单item点击之后的回调
+        onChanged: (T){
+          parent.setState((){
+            selectItemValue = T;
+          });
+        },
+        //设置阴影的高度
+        elevation: 24,
+        style: TextStyle(//设置文本框里面文字的样式
+            color: Colors.red
+        ),
+        // isDense: true,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
+        // 将下拉列表的内部内容设置为水平填充其父级
+        isExpanded:true,
+        iconSize: 50.0,//设置三角标icon的大小
+    );
+  }
+}

lib/widgets/elements/Form/Button/DropdownButton/index.dart

@@ -0,0 +1,102 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: DropdownButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/DropdownButton-class.html
+ */
+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 dropdownButton;
+
+
+const String _dropdownText0 =
+"""### **简介**
+> Dropdown button “用于从项目列表中进行选择的按钮”
+- 类型T是下拉菜单表示的值的类型。给定菜单中的所有条目必须表示具有一致类型的值。通常，使用枚举。每个DropdownMenuItem在项目必须专门与同类型的说法。。
+""";
+
+const String _dropdownText1 =
+"""### **基本用法**
+> 此示例显示一个包含四个项目的菜单
+""";
+
+const String _dropdownText2 =
+"""### **进阶用法**
+> 此示例尝试调整所有属性，展示出效果
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Button/DropdownButton';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    //String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      //buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'DropdownButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/DropdownButton/demo.dart',
+      child: allDropdownButtons(context,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/DropdownButton-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 DropdownButton 按钮
+ */
+Widget allDropdownButtons(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: _dropdownText0),
+            textAlignBar(_dropdownText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                dropdownButton.DropdownButtonDefault(),
+              ],
+            ),
+            textAlignBar(_dropdownText2),
+            SizedBox(height: 10.0),
+            dropdownButton.DropdownButtonCustom(context.widget,that),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+

lib/widgets/elements/Form/Button/FlatButton/demo.dart

@@ -0,0 +1,129 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FlatButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* FlatButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class FlatButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+
+  const FlatButtonDefault([bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    return FlatButton(
+      // 文本内容
+        child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
+        onPressed: isDisabled ? () {} : null);
+  }
+}
+
+/*
+* FlatButton.icon 默认按钮的实例
+* Create a text button from a pair of widgets that serve as the button's icon and label
+* isDisabled:是否是禁用
+* */
+class FlatButtonIconDefault extends StatelessWidget {
+  final bool isDisabled;
+  final IconData icon;
+
+  const FlatButtonIconDefault(
+      [bool this.isDisabled = true, IconData this.icon = Icons.add_circle])
+      : super();
+
+  Color _randomColor() {
+    var red = Random.secure().nextInt(255);
+    var greed = Random.secure().nextInt(255);
+    var blue = Random.secure().nextInt(255);
+    return Color.fromARGB(255, red, greed, blue);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FlatButton.icon(
+      // 文本内容
+        icon: Icon(icon, size: 25.0, color: _randomColor()),
+        label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
+        onPressed: isDisabled
+            ? () {
+          //_showMessage('点击了 FLAT BUTTON ', context);
+        }
+            : null);
+  }
+}
+
+/*
+* FlatButton 自定义的实例
+* */
+class FlatButtonCustom extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const FlatButtonCustom([
+    String this.txt = '自定义按钮',
+    Color this.color = Colors.blueAccent,
+    ShapeBorder this.shape,
+    VoidCallback this.onPressed
+  ]) :super();
+
+  @override
+  Widget build(BuildContext context) {
+    final _onPressed = onPressed;
+    return FlatButton(
+      // 文本内容
+        child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
+        // 按钮颜色
+        color: color,
+        // 按钮亮度
+        colorBrightness: Brightness.dark,
+        // 高亮时的背景色
+        //highlightColor: Colors.yellow,
+        // 失效时的背景色
+        disabledColor: Colors.grey,
+        // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
+        textColor: Colors.white,
+        // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
+        disabledTextColor: Colors.grey,
+        // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，FlatButton，OutlineButton，它们是基于环境ButtonTheme配置的
+        //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
+        textTheme: ButtonTextTheme.normal,
+        // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
+        splashColor: Colors.deepPurple,
+        // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
+        clipBehavior: Clip.antiAlias,
+        padding: new EdgeInsets.only(
+            bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
+        shape: (shape is ShapeBorder) ? shape : new Border.all(
+          // 设置边框样式
+          color: Colors.grey,
+          width: 2.0,
+          style: BorderStyle.solid,
+        ),
+        // FlatButton 的点击事件
+        onPressed: () {
+          // Perform some action
+          if (_onPressed is VoidCallback) {
+            _onPressed();
+          }
+        },
+        // 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次
+        // 参数 bool，按下后true，恢复false
+        onHighlightChanged: (isClick) {
+          print(isClick);
+        }
+    );
+  }
+}

lib/widgets/elements/Form/Button/FlatButton/index.dart

@@ -1,20 +1,189 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: FlatButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/FlatButton-class.html
+ */
+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 flatButton;
+
+const String _markdownData = """# Markdown Example
+Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.
+## Styling
+Style text as _italic_, __bold__, or `inline code`.
+- Use bulleted lists
+- To better clarify
+- Your points
+## Links
+You can use [hyperlinks](hyperlink) in markdown
+## Images
+You can include images:
+![Flutter logo](https://flutter.io/images/flutter-mark-square-100.png#100x100)
+## Markdown widget
+This is an example of how to create your own Markdown widget:
+    new Markdown(data: 'Hello _world_!');
+## Code blocks
+Formatted Dart code looks really pretty too:
+```
+void main() {
+  runApp(new MaterialApp(
+    home: new Scaffold(
+      body: new Markdown(data: markdownData)
+    )
+  ));
+}
+```
+Enjoy!
+""";
+
+
+const String _flatText0 =
+"""### **简介**
+> Flat button 是显示在（零高程）material widget上的文本标签
+- 通过填充颜色对触摸作出反应在工具栏上，
+- 在对话框中使用Flat button，或与其他内容内联，但使用填充从该内容偏移，以便按钮的存在是显而易见的。
+- Flat buttons 故意不具有可见边框，因此必须依赖于它们相对于其他内容的位置以用于上下文。
+- 在对话框和卡片中，它们应该组合在一个底角中。避免使用平面按钮，它们会与其他内容混合，例如在列表中间。""";
+
+const String _flatText1 =
+"""### **基本用法**
+> 参数的默认的按钮和禁用按钮
+- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。
+- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
+
+
+const String _flatText2 =
+"""### **进阶用法1**
+> FlatButton.icon，按钮图标和标签的widget创建文本按钮。""";
+
+const String _flatText3 =
+"""### **进阶用法2**
+> 更改项参数的自定义,比如:边框，点击效果，内容文字颜色等
+- Material design Flat buttons 按钮具有全帽标签，一些内部填充和一些定义的尺寸。
+- 要使应用程序的一部分具有交互式，使用墨水溅，而不是承诺这些样式选择，请考虑使用InkWell。
+- Flat button 的最小尺寸为88.0×36.0，可以用 ButtonTheme 覆盖。该clipBehavior参数不能为空。""";
+
 class Demo extends StatefulWidget {
   static const String routeName = '/element/Form/Button/FlatButton';
-  _Demo createState() => _Demo();
+
+  @override
+  _DemoState createState() => _DemoState();
 }
 
-class _Demo extends State<Demo> {
+class _DemoState extends State<Demo> {
+  @override
   Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(
-          title: Text("FlatButton"),
-        ),
-        body: Container(
-            child: RaisedButton(onPressed: () {}, child: Text("FlatButton"))
-        )
+    return WidgetDemo(
+      title: 'FlatButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FlatButton/demo.dart',
+      child: allFlatButtons(context),
+      docUrl: 'https://docs.flutter.io/flutter/material/FlatButton-class.html',
     );
-
   }
 }
+
+/**
+ * 所有的 FlatButton 按钮
+ */
+Widget allFlatButtons(BuildContext context){
+  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: _flatText0),
+            textAlignBar(_flatText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                flatButton.FlatButtonDefault(),
+                SizedBox(width: 20.0), // 间距
+                flatButton.FlatButtonDefault(false),
+              ],
+            ),
+            textAlignBar(_flatText2),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              //mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                flatButton.FlatButtonIconDefault(),
+                flatButton.FlatButtonIconDefault(false),
+              ],
+            ),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              //mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                flatButton.FlatButtonIconDefault(true, Icons.android),
+                flatButton.FlatButtonIconDefault(true, Icons.announcement),
+              ],
+            ),
+            textAlignBar(_flatText3),
+            //flatButton.FlatButtonCustom(context,'主要按钮',Colors.blue),
+            flatButton.FlatButtonCustom('主要按钮',Colors.blue),
+            SizedBox(height: 10.0),
+            flatButton.FlatButtonCustom('成功按钮',Colors.green),
+            SizedBox(height: 10.0),
+            flatButton.FlatButtonCustom('信息按钮',Colors.grey),
+            SizedBox(height: 10.0),
+            flatButton.FlatButtonCustom('警告按钮',Colors.orange),
+            SizedBox(height: 10.0),
+            flatButton.FlatButtonCustom('危险按钮',Colors.pink),
+            SizedBox(height: 10.0),
+            flatButton.FlatButtonCustom('点击我试试！', Colors.red,
+                new Border.all(color: Colors.brown, width: 5.0, style: BorderStyle.solid),
+                    () => _showMessage('点击了 FLAT BUTTON ', context)),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+  * alert 弹框
+  * context:容器的父级
+  * */
+void _showMessage(String name, BuildContext context) {
+  showDialog(
+    // alert 的父级
+    context: context,
+    builder: (BuildContext context) {
+      return AlertDialog(
+          title: new Text('提示'),
+          content: new Text(name),
+          actions: <Widget>[
+            new FlatButton(
+              // alert 的取消按钮
+                onPressed: () {
+                  // 取消的事件
+                  Navigator.of(context).pop(true);
+                },
+                child: new Text('取消'))
+          ]);
+    }
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+    alignment: FractionalOffset.centerLeft,
+    child: Column(
+      children: <Widget>[
+        SizedBox(height: 20.0),
+        MarkdownBody(data: txt)
+        //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+      ])
+  );
+}

lib/widgets/elements/Form/Button/FloatingActionButton/demo.dart

@@ -0,0 +1,117 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: OutlineButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* OutlineButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class FloatingActionButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+
+  const FloatingActionButtonDefault([bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    return FloatingActionButton(
+        // 文本内容
+        backgroundColor:Colors.red,
+        child: const Icon(Icons.add),
+        heroTag: null, // 不加这个参数会黑屏...
+        onPressed: isDisabled ? () {} : null);
+  }
+}
+
+/*
+* OutlineButton 自定义的实例
+* */
+class FloatingActionButtonCustom extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const FloatingActionButtonCustom(
+      [String this.txt = '自定义按钮',
+      Color this.color = Colors.orange,
+      ShapeBorder this.shape,
+      VoidCallback this.onPressed])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    final _onPressed = onPressed;
+    return new FloatingActionButton(
+      // 子视图，一般为Icon，不推荐使用文字
+      child: const Icon(Icons.refresh),
+      // FAB的文字解释，FAB被长按时显示，也是无障碍功能
+      tooltip: txt,
+      // 前景色
+      foregroundColor: Colors.white,
+      // 背景色
+      backgroundColor: color,
+     // hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果,简单理解为两个界面内拥有同样tag的元素在界面切换过程中，会有动画效果，是界面切换不再那么生硬。
+      heroTag: null,
+      // 未点击时阴影值，默认6.0
+      elevation: 7.0,
+      // 点击时阴影值，默认12.0
+      highlightElevation: 14.0,
+      // 点击事件回调
+      onPressed: () {
+        Scaffold.of(context).showSnackBar( SnackBar(
+          content: Text("FAB is Clicked"),
+        ));
+        _onPressed();
+      },
+      // 是否为“mini”类型，默认为false,FAB 分为三种类型：regular, mini, and extended
+      mini: false,
+      // 定义FAB的shape，设置shape时，默认的elevation将会失效,默认为CircleBorder
+      //shape: CircleBorder(),
+      shape: shape,
+      // 是否为”extended”类型
+      isExtended: true
+    );
+  }
+}
+
+/*
+* OutlineButton 自定义的实例2
+* */
+class FloatingActionButtonCustom2 extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const FloatingActionButtonCustom2(
+      [String this.txt = '自定义按钮',
+        Color this.color = Colors.orange,
+        ShapeBorder this.shape,
+        VoidCallback this.onPressed])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    final _onPressed = onPressed;
+    return FloatingActionButton.extended(
+      onPressed: () {
+        print('button click');
+        _onPressed();
+      },
+      foregroundColor: Colors.white,
+      backgroundColor: Colors.amber,
+      //如果不手动设置icon和text颜色,则默认使用foregroundColor颜色
+      icon: new Icon(Icons.flag,color: Colors.red),
+      label: new Text('FloatingActionButton.extended', maxLines: 1),
+    );
+  }
+}

lib/widgets/elements/Form/Button/FloatingActionButton/index.dart

@@ -0,0 +1,193 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: FloatingActionButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/FloatingActionButton-class.html
+ */
+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 floatingActionButton;
+
+const String _floatingActionTitle =
+    'FloatingAction Button 示例';
+
+const String _floatingActionText0 =
+"""### **简介**
+> FloatingAction Button “浮动动作按钮”
+- FloatingActionButton 按钮是一个圆形图标按钮，悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于Scaffold.floatingActionButton字段中。。
+- 每个屏幕最多使用一个浮动操作按钮。浮动操作按钮应用于积极操作，例如“创建”，“共享”或“导航”。
+- 一般用来处理界面中最常用，最基础的用户动作。它一般出现在屏幕内容的前面，通常是一个圆形，中间有一个图标。 FAB有三种类型：regular, mini, and extended。不要强行使用FAB，只有当使用场景符合FAB功能的时候使用才最为恰当
+""";
+
+const String _floatingActionText1 =
+"""### **基本用法**
+> 默认参数的按钮和禁用按钮
+- 如果onPressed回调为null，则该按钮将被禁用，并且不会对触摸作出反应,不会变成灰色。
+""";
+
+const String _floatingActionText2 =
+"""### **进阶用法1**
+> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
+""";
+
+const String _floatingActionText3 =
+"""### **进阶用法2**
+> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Button/FloatingActionButton';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'FloatingActionButton',
+      // desc: _floatingActionTitle,
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FloatingActionButton/demo.dart',
+      child: allFloatingActionButtons(context,this),
+      //child: Text('123'),
+      docUrl: 'https://docs.flutter.io/flutter/material/FloatingActionButton-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 FloatingActionButton 按钮
+ */
+Widget allFloatingActionButtons(BuildContext context,_DemoState that){
+  final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
+  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: _floatingActionText0),
+            textAlignBar(_floatingActionText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                floatingActionButton.FloatingActionButtonDefault(),
+                SizedBox(width: 20.0), // 间距
+                floatingActionButton.FloatingActionButtonDefault(false),
+              ],
+            ),
+            textAlignBar(_floatingActionText2),
+            SizedBox(height: 10.0),
+              floatingActionButton.FloatingActionButtonCustom('主要按钮',Colors.deepOrangeAccent,buttonShape),
+            SizedBox(height: 20.0),
+            textAlignBar(_floatingActionText3),
+            SizedBox(height: 20.0),
+              floatingActionButton.FloatingActionButtonCustom2('扩展按钮',Colors.deepOrangeAccent,buttonShape),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+  * alert 弹框
+  * context:容器的父级
+  * */
+void _showMessage(String name, BuildContext context) {
+  showDialog(
+    // alert 的父级
+    context: context,
+    builder: (BuildContext context) {
+      return AlertDialog(
+          title: new Text('提示'),
+          content: new Text(name),
+          actions: <Widget>[
+            new FlatButton(
+              // alert 的取消按钮
+                onPressed: () {
+                  // 取消的事件
+                  Navigator.of(context).pop(true);
+                },
+                child: new Text('取消'))
+          ]);
+    }
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+
+/*
+* 绘制边框信息,比如是否有边框,是否是圆角
+* */
+ShapeBorder drawShape(String type){
+  final Color _color = _randomColor();
+  final borderWidth = Random.secure().nextInt(5).toDouble();
+  final radiusWidth = Random.secure().nextInt(50).toDouble();
+
+  switch(type){
+    case 'border':
+      return Border.all(
+        // 设置边框样式
+        width: borderWidth,
+        color: _color,
+        style: BorderStyle.solid,
+      );
+      break;
+    case 'radius':
+      return RoundedRectangleBorder(
+        side:new BorderSide( // 保留原来的边框样式
+          width: borderWidth,
+          color: _color,
+          style: BorderStyle.solid,
+        ),
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(radiusWidth),
+          topLeft: Radius.circular(radiusWidth),
+          bottomLeft: Radius.circular(radiusWidth),
+          bottomRight: Radius.circular(radiusWidth),
+        ),
+      );
+      break;
+    default:
+      return null;
+  }
+}
+
+/*
+* 取随机颜色
+* */
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}
+

lib/widgets/elements/Form/Button/IconButton/demo.dart

@@ -0,0 +1,94 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: IconButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:flutter_rookie_book/common/iconNames.dart';
+
+final  int len = IconNames.Names.length;
+
+/*
+* IconButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class IconButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+
+  const IconButtonDefault([bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+        // 文本内容
+        icon: Icon(Icons.volume_up),
+        tooltip: 'Increase volume by 10%',
+        onPressed: isDisabled ? () {} : null);
+  }
+}
+
+/*
+* IconButton 自定义的实例
+* */
+class IconButtonCustom extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const IconButtonCustom(
+      [String this.txt = '自定义按钮',
+      Color this.color = Colors.blueAccent,
+      ShapeBorder this.shape,
+      VoidCallback this.onPressed])
+      : super();
+
+   getIcons(){
+    return Icons;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final int iconIndex = Random.secure().nextInt(len);
+    final IconData type = IconNames.Names[iconIndex];
+    final _onPressed = onPressed;
+    return IconButton(
+        // 定义图标在IconButton中的定位方式,AlignmentGeometry 如果父Widget尺寸大于child Widget尺寸，这个属性设置会起作用，有很多种对齐方式。
+        alignment:AlignmentDirectional.center,
+        // 按钮颜色
+        color: _randomColor(),
+        // 如果图标被禁用，则用于按钮内图标的颜色。默认为当前主题的ThemeData.disabledColor
+        disabledColor:_randomColor(),
+        // 高亮时的背景色
+        highlightColor: Colors.yellow,
+        // 按钮内图标的大小
+        icon:Icon(type),
+        // 图标尺寸
+        iconSize:(Random.secure().nextInt(20)+20).toDouble(), // 随机大小
+        // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
+        splashColor: _randomColor(),
+        padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
+        // 描述按下按钮时将发生的操作的文本
+        tooltip:'这是${ type.codePoint }信息',
+        // IconButton 的点击事件
+        onPressed: () {
+          // Perform some action
+          if (_onPressed is VoidCallback) {
+            _onPressed();
+          }
+        });
+  }
+}
+
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}

lib/widgets/elements/Form/Button/IconButton/index.dart

@@ -0,0 +1,168 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: IconButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/IconButton-class.html
+ */
+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 iconButton;
+
+
+const String _iconText0 =
+"""### **简介**
+> Icon button “图标按钮”
+- IconButton widget上的图片，通过填充颜色（墨水）来对触摸作出反应。
+""";
+
+const String _iconText1 =
+"""### **基本用法**
+> 参数的默认的按钮和禁用按钮
+- 图标按钮通常在AppBar.actions字段中使用，但它们也可以在许多其他地方使用。。
+- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
+
+const String _iconText2 =
+"""### **进阶用法**
+> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
+- 如果可能，图标按钮的命中区域的大小至少为48.0像素，与实际的iconSize无关，以满足 Material Design规范中的触摸目标大小要求。的对准控制图标本身如何定位命中区域内。
+- ** 长按可弹出 tip 文字 **
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Button/IconButton';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'IconButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/IconButton/demo.dart',
+      child: allIconButtons(context,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/IconButton-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 IconButton 按钮
+ */
+Widget allIconButtons(BuildContext context,_DemoState that){
+  final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
+  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: _iconText0),
+            textAlignBar(_iconText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                iconButton.IconButtonDefault(),
+                SizedBox(width: 20.0), // 间距
+                iconButton.IconButtonDefault(false),
+              ],
+            ),
+            textAlignBar(_iconText2),
+            SizedBox(height: 10.0),
+            iconButton.IconButtonCustom('主要按钮',Colors.blue,buttonShape),
+            SizedBox(height: 10.0),
+            iconButton.IconButtonCustom('成功按钮',Colors.green,buttonShape),
+            SizedBox(height: 10.0),
+            iconButton.IconButtonCustom('信息按钮',Colors.grey,buttonShape),
+            SizedBox(height: 10.0),
+            iconButton.IconButtonCustom('警告按钮',Colors.orange,buttonShape),
+            SizedBox(height: 10.0),
+            iconButton.IconButtonCustom('危险按钮',Colors.pink,buttonShape),
+            SizedBox(height: 10.0),
+            RaisedButton(
+              // 文本内容
+                child: const Text('点击切换，图标按钮', semanticsLabel: 'FLAT BUTTON 1'),
+                onPressed: ()=> that.setButtonShapeType()),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+
+/*
+* 绘制边框信息,比如是否有边框,是否是圆角
+* */
+ShapeBorder drawShape(String type){
+  final Color _color = _randomColor();
+  final borderWidth = Random.secure().nextInt(5).toDouble();
+  final radiusWidth = Random.secure().nextInt(50).toDouble();
+
+  switch(type){
+    case 'border':
+      return Border.all(
+        // 设置边框样式
+        width: borderWidth,
+        color: _color,
+        style: BorderStyle.solid,
+      );
+      break;
+    case 'radius':
+      return RoundedRectangleBorder(
+        side:new BorderSide( // 保留原来的边框样式
+          width: borderWidth,
+          color: _color,
+          style: BorderStyle.solid,
+        ),
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(radiusWidth),
+          topLeft: Radius.circular(radiusWidth),
+          bottomLeft: Radius.circular(radiusWidth),
+          bottomRight: Radius.circular(radiusWidth),
+        ),
+      );
+      break;
+    default:
+      return null;
+  }
+}
+
+/*
+* 取随机颜色
+* */
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}
+

lib/widgets/elements/Form/Button/OutlineButton/demo.dart

@@ -0,0 +1,122 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: OutlineButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* OutlineButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class OutlineButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+
+  const OutlineButtonDefault([bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    return OutlineButton(
+        // 文本内容
+        child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
+        onPressed: isDisabled ? () {} : null);
+  }
+}
+
+/*
+* OutlineButton.icon 默认按钮的实例
+* Create a text button from a pair of widgets that serve as the button's icon and label
+* isDisabled:是否是禁用
+* */
+class OutlineButtonIconDefault extends StatelessWidget {
+  final bool isDisabled;
+  final IconData icon;
+
+  const OutlineButtonIconDefault(
+      [bool this.isDisabled = true, IconData this.icon = Icons.add_circle])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return OutlineButton.icon(
+        // 文本内容
+        icon: Icon(icon, size: 25.0, color: _randomColor()),
+        label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
+        onPressed: isDisabled
+            ? () {
+                //_showMessage('点击了 FLAT BUTTON ', context);
+              }
+            : null);
+  }
+}
+
+/*
+* OutlineButton 自定义的实例
+* */
+class OutlineButtonCustom extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const OutlineButtonCustom(
+      [String this.txt = '自定义按钮',
+      Color this.color = Colors.blueAccent,
+      ShapeBorder this.shape,
+      VoidCallback this.onPressed])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    final _onPressed = onPressed;
+    return OutlineButton(
+        // 文本内容
+        child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
+        // 边框的颜色,颜色也可以走主题色 Theme.of(context).primaryColor
+        borderSide:new BorderSide(color: _randomColor(),width:Random.secure().nextInt(10).toDouble()),
+        // 按钮颜色
+        color: _randomColor(),
+        // 按钮失效时边框颜色
+        disabledBorderColor: Colors.red,
+        highlightedBorderColor:Colors.black54,
+        // 高亮时的背景色
+        highlightColor: Colors.yellow,
+        // 失效时的背景色
+        //disabledColor: Colors.grey,
+        // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
+        textColor: _randomColor(),
+        // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
+        disabledTextColor: _randomColor(),
+        // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,OutlineButton，OutlineButton，OutlineButton，它们是基于环境ButtonTheme配置的
+        //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
+        textTheme: ButtonTextTheme.normal,
+        // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
+        splashColor: _randomColor(),
+        // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
+        clipBehavior: Clip.antiAlias,
+        padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
+        //高亮时候的阴影
+        highlightElevation: 10.0,
+        shape: shape, // 在Outline 里只能设置圆角,边框用borderSide
+        // OutlineButton 的点击事件
+        onPressed: () {
+          // Perform some action
+          if (_onPressed is VoidCallback) {
+            _onPressed();
+          }
+        });
+  }
+}
+
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}

lib/widgets/elements/Form/Button/OutlineButton/index.dart

@@ -0,0 +1,217 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: OutlineButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/OutlineButton-class.html
+ */
+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 outlineButton;
+
+
+const String _outlineText0 =
+"""### **简介**
+> Outline button “边框按钮”
+- RaisedButton和FlatButton之间的交叉：一个有边框的按钮，当按下按钮时，其高度增加，背景变得不透明。。
+- 高程最初为0.0，其背景颜色 为透明。按下按钮时，其背景变为不透明，然后其高程增加到highlightElevation。
+""";
+
+const String _outlineText1 =
+"""### **基本用法**
+> 参数的默认的按钮和禁用按钮
+- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。
+- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
+
+
+const String _outlineText2 =
+"""### **进阶用法1**
+> OutlineButton.icon 的用法，按钮图标和标签的widget创建文本按钮。""";
+
+const String _outlineText3 =
+"""### **进阶用法2**
+> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
+- Outline buttons 按钮有一个边框，其形状由形状定义 ，其外观由borderSide，disabledBorderColor和highlightedBorderColor定义。
+- 如果您想要水龙头的墨水效果，但又不想使用按钮，请考虑直接使用InkWell。
+- Outline buttons 的最小尺寸为88.0×36.0，可以用ButtonTheme 覆盖。
+- 通过 shape 属性的设置，改变边框样式和圆角。
+- 可以尝试长按按钮，按钮突出显示。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Button/OutlineButton';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'OutlineButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/OutlineButton/demo.dart',
+      child: allOutlineButtons(context,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/OutlineButton-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 OutlineButton 按钮
+ */
+Widget allOutlineButtons(BuildContext context,_DemoState that){
+  final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
+  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: _outlineText0),
+            textAlignBar(_outlineText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                outlineButton.OutlineButtonDefault(),
+                SizedBox(width: 20.0), // 间距
+                outlineButton.OutlineButtonDefault(false),
+              ],
+            ),
+            textAlignBar(_outlineText2),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              //mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                outlineButton.OutlineButtonIconDefault(),
+                outlineButton.OutlineButtonIconDefault(false),
+              ],
+            ),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              //mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                outlineButton.OutlineButtonIconDefault(true, Icons.android),
+                outlineButton.OutlineButtonIconDefault(true, Icons.announcement),
+              ],
+            ),
+            textAlignBar(_outlineText3),
+            SizedBox(height: 10.0),
+            outlineButton.OutlineButtonCustom('主要按钮',Colors.blue,buttonShape),
+            SizedBox(height: 10.0),
+            outlineButton.OutlineButtonCustom('成功按钮',Colors.green,buttonShape),
+            SizedBox(height: 10.0),
+            outlineButton.OutlineButtonCustom('信息按钮',Colors.grey,buttonShape),
+            SizedBox(height: 10.0),
+            outlineButton.OutlineButtonCustom('警告按钮',Colors.orange,buttonShape),
+            SizedBox(height: 10.0),
+            outlineButton.OutlineButtonCustom('危险按钮',Colors.pink,buttonShape),
+            SizedBox(height: 10.0),
+            outlineButton.OutlineButtonCustom( '点击切换，随机改变按钮的圆角,边框样式', Colors.blue, buttonShape,
+                    () => that.setButtonShapeType()),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+  * alert 弹框
+  * context:容器的父级
+  * */
+void _showMessage(String name, BuildContext context) {
+  showDialog(
+    // alert 的父级
+    context: context,
+    builder: (BuildContext context) {
+      return AlertDialog(
+          title: new Text('提示'),
+          content: new Text(name),
+          actions: <Widget>[
+            new FlatButton(
+              // alert 的取消按钮
+                onPressed: () {
+                  // 取消的事件
+                  Navigator.of(context).pop(true);
+                },
+                child: new Text('取消'))
+          ]);
+    }
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+
+/*
+* 绘制边框信息,比如是否有边框,是否是圆角
+* */
+ShapeBorder drawShape(String type){
+  final Color _color = _randomColor();
+  final borderWidth = Random.secure().nextInt(5).toDouble();
+  final radiusWidth = Random.secure().nextInt(50).toDouble();
+
+  switch(type){
+    case 'border':
+      return Border.all(
+        // 设置边框样式
+        width: borderWidth,
+        color: _color,
+        style: BorderStyle.solid,
+      );
+      break;
+    case 'radius':
+      return RoundedRectangleBorder(
+        side:new BorderSide( // 保留原来的边框样式
+          width: borderWidth,
+          color: _color,
+          style: BorderStyle.solid,
+        ),
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(radiusWidth),
+          topLeft: Radius.circular(radiusWidth),
+          bottomLeft: Radius.circular(radiusWidth),
+          bottomRight: Radius.circular(radiusWidth),
+        ),
+      );
+      break;
+    default:
+      return null;
+  }
+}
+
+/*
+* 取随机颜色
+* */
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}
+

lib/widgets/elements/Form/Button/PopupMenuButton/demo.dart

@@ -0,0 +1,144 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: RaisedButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* RaisedButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+enum WhyFarther { harder, smarter, selfStarter, tradingCharter }
+
+class PopupMenuButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+  final String type;
+
+  const PopupMenuButtonDefault(
+      [String this.type = 'default1', bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    switch (type) {
+      case 'default1':
+        return default1(context);
+        break;
+      case 'default2':
+        return default2(context);
+        break;
+      case 'default3':
+        return default3(context);
+        break;
+      default:
+        return default1(context);
+    }
+  }
+
+  Widget default1(BuildContext context) {
+    return PopupMenuButton<WhyFarther>(
+      onSelected: (WhyFarther result) {
+        // setState(() { _selection = result; });
+      },
+      itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[
+            const PopupMenuItem<WhyFarther>(
+              value: WhyFarther.harder,
+              child: Text('Working a lot harder'),
+            ),
+            const PopupMenuItem<WhyFarther>(
+              value: WhyFarther.smarter,
+              child: Text('Being a lot smarter'),
+            ),
+            const PopupMenuItem<WhyFarther>(
+              value: WhyFarther.selfStarter,
+              child: Text('Being a self-starter'),
+            ),
+            const PopupMenuItem<WhyFarther>(
+              value: WhyFarther.tradingCharter,
+              child: Text('Placed in charge of trading charter'),
+            ),
+          ],
+    );
+  }
+
+  Widget default2(BuildContext context) {
+    return PopupMenuButton(
+        child: Text('点我试试'),
+        onSelected: (String value) {},
+        itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
+              new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
+              new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
+            ]);
+  }
+
+  Widget default3(BuildContext context) {
+    return PopupMenuButton(
+        //child: Text('点我试试'),// child 和 icon 不能同时用
+        icon: Icon(Icons.menu),
+        onSelected: (String value) {},
+        itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
+              new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
+              new PopupMenuItem(value: "选项二的内容", child: new Text("选项二"))
+            ]);
+  }
+}
+
+
+class PopupMenuButtonCustom extends StatelessWidget {
+  final widget;
+  final parent;
+  const PopupMenuButtonCustom([this.widget,this.parent])
+      : super();
+  @override
+  Widget build(BuildContext context) {
+    print('onSelected1:${widget.options}');
+    final String selectStr = widget.options['defaultSelect'];
+    return PopupMenuButton(
+        //如果提供，则用于此按钮的widget。
+        child: RaisedButton.icon(
+          disabledColor:Colors.red,
+          icon: Icon(Icons.message, size: 25.0,color:Colors.yellow),
+          label: Text(
+                '自定义按钮', style: TextStyle(color: Colors.white),
+                semanticsLabel: 'FLAT BUTTON'),
+          // onPressed:(){} // 激活状态按钮
+        ),
+        // 打开时放置菜单的z坐标。这可以控制菜单下方阴影的大小。
+        elevation:10.0,
+        // 如果提供，则用于此按钮的图标。
+        //icon
+        // 菜单项的值（如果有），在菜单打开时应突出显示。
+        //initialValue:options['defaultSelect'],
+        initialValue:selectStr,
+        // 按下按钮时调用以创建要在菜单中显示的项目。
+        itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
+          new PopupMenuItem(value: "选项一的内容", child: new Text("选项一")),
+          new PopupMenuItem(value: "选项二的内容", child: new Text("选项二")),
+          new PopupMenuItem(value: "选项三的内容", child: new Text("选项三")),
+          new PopupMenuItem(value: "选项四的内容", child: new Text("选项四"))
+        ],
+        // 应用于弹出菜单按钮的偏移量(x,y)。
+        offset:Offset(0.0,50.0),
+        // 当用户在不选择项目的情况下关闭弹出菜单时调用。
+        onCanceled:()=>
+          print('onCanceled'),
+        // 当用户从此按钮创建的弹出菜单中选择一个值时调用。
+        onSelected:(String value){
+          print('onSelected:${parent.setState}');
+          parent.setState((){
+            widget.options['defaultSelect']= value;
+          });
+        },
+        // 默认情况下匹配IconButton的8 dps填充。在某些情况下，特别是在此按钮作为列表项的尾随元素出现的情况下，能够将填充设置为零是有用的。
+        padding:new EdgeInsets.only(bottom: 20.0, top: 20.0, left: 0.0, right: 0.0),
+        //描述按下按钮时将发生的操作的文本。
+        tooltip:'这是信息'
+    );
+  }
+}

lib/widgets/elements/Form/Button/PopupMenuButton/index.dart

@@ -0,0 +1,90 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/24
+ * Time: 下午5:25
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: PopupMenusButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/PopupMenuButton-class.html
+ */
+
+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 popupMenuButton;
+
+const String _titleText0 = """
+### **简介**
+> 按下时显示菜单
+- 当菜单因为选择了项目而被解除时调用onSelected。传递给onSelected的值是所选菜单项的值。
+- 可以提供 `child` 或 `icon` 中的一个，但不是能同时设置两者。如果提供了 `icon` ，则 `PopupMenuButton` 的行为类似于 `IconButton`。
+- 如果两者都为null，则创建一个标准 overflow icon（取决于平台）。
+""";
+const String _titleText1 = """
+### **基本用法**
+> 此示例显示一个包含四个项目的菜单
+- 在枚举值之间进行选择，并_selection根据选择设置字段。
+""";
+
+const String _titleText2 = """
+### **进阶用法**
+> 此示例尝试调整所有属性，展示出效果
+- 默认选择第二个。
+- 再次打开,`PopupMenuItem` 保留上次的选择结果。
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Button/PopupMenuButton';
+  final Map<String,String> options = {'defaultSelect': '选项二的内容'};
+  @override
+  final _DemoState self =  _DemoState();
+  _DemoState createState() => self;
+}
+
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'PopupMenuButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart',
+      child: allPopupMenuButton(widget,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/PopupMenuButton-class.html',
+    );
+  }
+}
+
+Widget allPopupMenuButton(Demo widget,State parent){
+  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: _titleText0),
+        SizedBox(height: 20.0),
+        MarkdownBody(data: _titleText1),
+        Row(
+          crossAxisAlignment:CrossAxisAlignment.center,
+          mainAxisAlignment:MainAxisAlignment.spaceBetween,
+          children: <Widget>[
+            popupMenuButton.PopupMenuButtonDefault('default1'),
+            popupMenuButton.PopupMenuButtonDefault('default2'),
+            popupMenuButton.PopupMenuButtonDefault('default3'),
+          ],
+        ),
+        SizedBox(height: 20.0),
+        MarkdownBody(data: _titleText2),
+        SizedBox(height: 20.0),
+        popupMenuButton.PopupMenuButtonCustom(widget,parent),
+        SizedBox(height: 40.0)
+      ]
+  ));
+}

lib/widgets/elements/Form/Button/RaisedButton/demo.dart

@@ -0,0 +1,130 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: RaisedButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* RaisedButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class RaisedButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+
+  const RaisedButtonDefault([bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    return RaisedButton(
+        // 文本内容
+        child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
+        onPressed: isDisabled ? () {} : null);
+  }
+}
+
+/*
+* RaisedButton.icon 默认按钮的实例
+* Create a text button from a pair of widgets that serve as the button's icon and label
+* isDisabled:是否是禁用
+* */
+class RaisedButtonIconDefault extends StatelessWidget {
+  final bool isDisabled;
+  final IconData icon;
+
+  const RaisedButtonIconDefault(
+      [bool this.isDisabled = true, IconData this.icon = Icons.add_circle])
+      : super();
+
+  Color _randomColor() {
+    var red = Random.secure().nextInt(255);
+    var greed = Random.secure().nextInt(255);
+    var blue = Random.secure().nextInt(255);
+    return Color.fromARGB(255, red, greed, blue);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RaisedButton.icon(
+        // 文本内容
+        icon: Icon(icon, size: 25.0, color: _randomColor()),
+        label: Text('默认按钮', semanticsLabel: 'FLAT BUTTON 2'),
+        onPressed: isDisabled
+            ? () {
+                //_showMessage('点击了 FLAT BUTTON ', context);
+              }
+            : null);
+  }
+}
+
+/*
+* RaisedButton 自定义的实例
+* */
+class RaisedButtonCustom extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const RaisedButtonCustom(
+      [String this.txt = '自定义按钮',
+      Color this.color = Colors.blueAccent,
+      ShapeBorder this.shape,
+      VoidCallback this.onPressed])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    final _onPressed = onPressed;
+    return RaisedButton(
+        // 文本内容
+        child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
+        // 按钮颜色
+        color: color,
+        // 按钮亮度
+        colorBrightness: Brightness.dark,
+        // 高亮时的背景色
+        //highlightColor: Colors.yellow,
+        // 失效时的背景色
+        disabledColor: Colors.grey,
+        // 该按钮上的文字颜色，但是前提是不设置字体自身的颜色时才会起作用
+        textColor: Colors.white,
+        // 按钮失效时的文字颜色，同样的不能使用文本自己的样式或者颜色时才会起作用
+        disabledTextColor: Colors.grey,
+        // 按钮主题,主要用于与ButtonTheme和ButtonThemeData一起使用来定义按钮的基色,RaisedButton，RaisedButton，OutlineButton，它们是基于环境ButtonTheme配置的
+        //ButtonTextTheme.accent，使用模版颜色的;ButtonTextTheme.normal，按钮文本是黑色或白色取决于。ThemeData.brightness;ButtonTextTheme.primary，按钮文本基于。ThemeData.primaryColor.
+        textTheme: ButtonTextTheme.normal,
+        // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
+        splashColor: Colors.deepPurple,
+        // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
+        clipBehavior: Clip.antiAlias,
+        padding:
+            new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
+        shape: (shape is ShapeBorder)
+            ? shape
+            : new Border.all(
+                // 设置边框样式
+                color: Colors.grey,
+                width: 2.0,
+                style: BorderStyle.solid,
+              ),
+        // RaisedButton 的点击事件
+        onPressed: () {
+          // Perform some action
+          if (_onPressed is VoidCallback) {
+            _onPressed();
+          }
+        },
+        // 改变高亮颜色回掉函数，一个按钮会触发两次，按下后改变时触发一次，松手后恢复原始颜色触发一次
+        // 参数 bool，按下后true，恢复false
+        onHighlightChanged: (isClick) {
+          print(isClick);
+        });
+  }
+}

lib/widgets/elements/Form/Button/RaisedButton/index.dart

@@ -1,21 +1,217 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: RaisedButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/RaisedButton-class.html
+ */
+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 raisedButton;
+
+
+const String _raisedText0 =
+"""### **简介**
+> Raised button “凸起按钮”
+- Raised button 基于  a Material widget 窗口widget，按下按钮时，Material.elevation 会增加。
+- 使用 Raised button 可将尺寸添加到大多数平面布局中。
+- 例如在复杂的内容列表中，或在宽阔的空间中。避免在已经提出的内容（例如对话框或卡片）上使用 Raised button 。
+""";
+
+const String _raisedText1 =
+"""### **基本用法**
+> 参数的默认的按钮和禁用按钮
+- 如果onPressed回调为null，则该按钮将被禁用，不会对触摸做出反应，并且将按 disabledColor 属性而不是color属性指定的颜色进行着色。
+- 如果您尝试更改按钮的颜色并且没有任何效果，请检查您是否正在传递非null onPressed处理程序。""";
+
+
+const String _raisedText2 =
+"""### **进阶用法1**
+> RaisedButton.icon 的用方法，按钮图标和标签的widget创建文本按钮。""";
+
+const String _raisedText3 =
+"""### **进阶用法2**
+> 更改项参数的自定义,比如:边框，点击效果，内容文字,颜色,圆角等
+- Raised buttons 按钮具有全帽标签，一些内部填充和一些定义的尺寸。
+- 如果您想要水龙头的墨水效果，但又不想使用按钮，请考虑直接使用InkWell。
+- Raised buttons 的最小尺寸为88.0×36.0，可以用ButtonTheme 覆盖。
+- 通过 shape 属性的设置，改变边框样式和圆角。
+""";
+
 class Demo extends StatefulWidget {
   static const String routeName = '/element/Form/Button/RaisedButton';
-  _Demo createState() => _Demo();
+
+  @override
+  _DemoState createState() => _DemoState();
 }
 
-class _Demo extends State<Demo> {
-
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
   Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(
-          title: Text("FlatButton"),
-        ),
-        body: Container(
-            child: RaisedButton(onPressed: () {}, child: Text("BUtton"))
-        )
+    return WidgetDemo(
+      title: 'RaisedButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart',
+      child: allRaisedButtons(context,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/RaisedButton-class.html',
     );
-
   }
 }
+
+/**
+ * 所有的 RaisedButton 按钮
+ */
+Widget allRaisedButtons(BuildContext context,_DemoState that){
+  final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
+  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: _raisedText0),
+            textAlignBar(_raisedText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                raisedButton.RaisedButtonDefault(),
+                SizedBox(width: 20.0), // 间距
+                raisedButton.RaisedButtonDefault(false),
+              ],
+            ),
+            textAlignBar(_raisedText2),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              //mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                raisedButton.RaisedButtonIconDefault(),
+                raisedButton.RaisedButtonIconDefault(false),
+              ],
+            ),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              //mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                raisedButton.RaisedButtonIconDefault(true, Icons.android),
+                raisedButton.RaisedButtonIconDefault(true, Icons.announcement),
+              ],
+            ),
+            textAlignBar(_raisedText3),
+            SizedBox(height: 10.0),
+            raisedButton.RaisedButtonCustom('主要按钮',Colors.blue,buttonShape),
+            SizedBox(height: 10.0),
+            raisedButton.RaisedButtonCustom('成功按钮',Colors.green,buttonShape),
+            SizedBox(height: 10.0),
+            raisedButton.RaisedButtonCustom('信息按钮',Colors.grey,buttonShape),
+            SizedBox(height: 10.0),
+            raisedButton.RaisedButtonCustom('警告按钮',Colors.orange,buttonShape),
+            SizedBox(height: 10.0),
+            raisedButton.RaisedButtonCustom('危险按钮',Colors.pink,buttonShape),
+            SizedBox(height: 10.0),
+            raisedButton.RaisedButtonCustom( '点击切换，按钮的圆角', Colors.blue, buttonShape,
+                    () => that.setButtonShapeType()),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+  * alert 弹框
+  * context:容器的父级
+  * */
+void _showMessage(String name, BuildContext context) {
+  showDialog(
+    // alert 的父级
+    context: context,
+    builder: (BuildContext context) {
+      return AlertDialog(
+          title: new Text('提示'),
+          content: new Text(name),
+          actions: <Widget>[
+            new FlatButton(
+              // alert 的取消按钮
+                onPressed: () {
+                  // 取消的事件
+                  Navigator.of(context).pop(true);
+                },
+                child: new Text('取消'))
+          ]);
+    }
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+
+/*
+* 绘制边框信息,比如是否有边框,是否是圆角
+* */
+ShapeBorder drawShape(String type){
+  final Color _color = _randomColor();
+  final borderWidth = Random.secure().nextInt(5).toDouble();
+  final radiusWidth = Random.secure().nextInt(50).toDouble();
+
+  switch(type){
+    case 'border':
+      return Border.all(
+        // 设置边框样式
+        width: borderWidth,
+        color: _color,
+        style: BorderStyle.solid,
+      );
+      break;
+    case 'radius':
+      return RoundedRectangleBorder(
+        side:new BorderSide( // 保留原来的边框样式
+          width: borderWidth,
+          color: _color,
+          style: BorderStyle.solid,
+        ),
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(radiusWidth),
+          topLeft: Radius.circular(radiusWidth),
+          bottomLeft: Radius.circular(radiusWidth),
+          bottomRight: Radius.circular(radiusWidth),
+        ),
+      );
+      break;
+    default:
+      return null;
+  }
+}
+
+/*
+* 取随机颜色
+* */
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}
+

lib/widgets/elements/Form/Button/RawMaterialButton/demo.dart

@@ -0,0 +1,85 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: RawMaterialButton 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* RawMaterialButton 默认按钮的实例
+* isDisabled:是否是禁用，isDisabled 默认为true
+* */
+class RawMaterialButtonDefault extends StatelessWidget {
+  final bool isDisabled;
+
+  const RawMaterialButtonDefault([bool this.isDisabled = true])
+      : assert(isDisabled != null),
+        super();
+
+  @override
+  Widget build(BuildContext context) {
+    return RawMaterialButton(
+        // 文本内容
+        child: const Text('默认按钮', semanticsLabel: 'FLAT BUTTON 1'),
+        onPressed: isDisabled ? () {} : null);
+  }
+}
+
+/*
+* RawMaterialButton 自定义的实例
+* */
+class RawMaterialButtonCustom extends StatelessWidget {
+  final String txt;
+  final Color color;
+  final ShapeBorder shape;
+  final VoidCallback onPressed;
+
+  const RawMaterialButtonCustom(
+      [String this.txt = '自定义按钮',
+      Color this.color = Colors.blueAccent,
+      ShapeBorder this.shape,
+      VoidCallback this.onPressed])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    final _onPressed = onPressed;
+    final _fontSize = (Random.secure().nextInt(10)+15).toDouble();
+    return RawMaterialButton(
+        // 使用Material.textStyle为按钮的子项定义默认文本样式。
+        textStyle:TextStyle(color: _randomColor(),fontSize: _fontSize),
+        // 定义形状和高程的动画更改的持续时间
+        animationDuration:Duration(seconds: 1),
+        // 文本内容
+        child: Text(txt, semanticsLabel: 'FLAT BUTTON 2'),
+        // 高亮时的背景色
+        highlightColor: Colors.yellow,
+        // 按钮内部,墨汁飞溅的颜色,点击按钮时的渐变背景色，当你不设置高亮背景时才会看的更清楚
+        splashColor: _randomColor(),
+        // 抗锯齿能力,抗锯齿等级依次递增,none（默认),hardEdge,antiAliasWithSaveLayer,antiAlias
+        clipBehavior: Clip.antiAlias,
+        padding: new EdgeInsets.only(bottom: 5.0, top: 5.0, left: 30.0, right: 30.0),
+        //高亮时候的阴影
+        highlightElevation: 10.0,
+        // 按钮材质的形状
+        // shape: shape,
+        // RawMaterialButton 的点击事件
+        onPressed: () {
+          // Perform some action
+          if (_onPressed is VoidCallback) {
+            _onPressed();
+          }
+        });
+  }
+}
+
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}

lib/widgets/elements/Form/Button/RawMaterialButton/index.dart

@@ -0,0 +1,189 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: RawMaterialButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/RawMaterialButton-class.html
+ */
+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 rawMaterialButton;
+
+
+const String _rawMaterialText0 =
+"""### **简介**
+> RawMaterial button “RawMaterial 按钮”
+- 基于Semantics，Material和InkWell 小部件创建按钮。
+- 此类不使用当前Theme或ButtonTheme来计算未指定参数的默认值。它旨在用于自定义材质按钮，可选择包含主题或特定于应用程序源的默认值。
+""";
+
+const String _rawMaterialText1 =
+"""### **基本用法**
+> 参数的默认的按钮和禁用按钮
+""";
+
+const String _rawMaterialText2 =
+"""### **进阶用法**
+> 更改项参数的自定义
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Button/RawMaterialButton';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    //String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      //buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'RawMaterialButton',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RawMaterialButton/demo.dart',
+      child: allRawMaterialButtons(context,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/RawMaterialButton-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 RawMaterialButton 按钮
+ */
+Widget allRawMaterialButtons(BuildContext context,_DemoState that){
+  final ShapeBorder buttonShape = drawShape(that.buttonShapeType);
+  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: _rawMaterialText0),
+            textAlignBar(_rawMaterialText1),
+            ButtonBar(
+              alignment: MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                rawMaterialButton.RawMaterialButtonDefault(),
+                SizedBox(width: 20.0), // 间距
+                rawMaterialButton.RawMaterialButtonDefault(false),
+              ],
+            ),
+            textAlignBar(_rawMaterialText2),
+            SizedBox(height: 10.0),
+            rawMaterialButton.RawMaterialButtonCustom('主要按钮',Colors.blue,buttonShape),
+            SizedBox(height: 10.0),
+            rawMaterialButton.RawMaterialButtonCustom('成功按钮',Colors.green,buttonShape),
+            SizedBox(height: 10.0),
+            rawMaterialButton.RawMaterialButtonCustom('信息按钮',Colors.grey,buttonShape),
+            SizedBox(height: 10.0),
+            rawMaterialButton.RawMaterialButtonCustom('警告按钮',Colors.orange,buttonShape),
+            SizedBox(height: 10.0),
+            rawMaterialButton.RawMaterialButtonCustom('危险按钮',Colors.pink,buttonShape),
+            SizedBox(height: 10.0),
+            rawMaterialButton.RawMaterialButtonCustom( '点击切换，观察字体变化', Colors.blue, buttonShape,
+                    () => that.setButtonShapeType()),
+            SizedBox(height: 20.0)
+          ])
+  );
+}
+
+/*
+  * alert 弹框
+  * context:容器的父级
+  * */
+void _showMessage(String name, BuildContext context) {
+  showDialog(
+    // alert 的父级
+    context: context,
+    builder: (BuildContext context) {
+      return AlertDialog(
+          title: new Text('提示'),
+          content: new Text(name),
+          actions: <Widget>[
+            new FlatButton(
+              // alert 的取消按钮
+                onPressed: () {
+                  // 取消的事件
+                  Navigator.of(context).pop(true);
+                },
+                child: new Text('取消'))
+          ]);
+    }
+  );
+}
+
+/*
+* 带align的text
+* */
+Widget textAlignBar(String txt){
+  //style: new TextStyle(fontSize: 15.5, height: 1.2),textAlign:TextAlign.left
+  return new Align(
+      alignment: FractionalOffset.centerLeft,
+      child: Column(
+          children: <Widget>[
+            SizedBox(height: 20.0),
+            MarkdownBody(data: txt)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+
+/*
+* 绘制边框信息,比如是否有边框,是否是圆角
+* */
+ShapeBorder drawShape(String type){
+  final Color _color = _randomColor();
+  final borderWidth = Random.secure().nextInt(5).toDouble();
+  final radiusWidth = Random.secure().nextInt(50).toDouble();
+
+  switch(type){
+    case 'border':
+      return Border.all(
+        // 设置边框样式
+        width: borderWidth,
+        color: _color,
+        style: BorderStyle.solid,
+      );
+      break;
+    case 'radius':
+      return RoundedRectangleBorder(
+        side:new BorderSide( // 保留原来的边框样式
+          width: borderWidth,
+          color: _color,
+          style: BorderStyle.solid,
+        ),
+        borderRadius: BorderRadius.only(
+          topRight: Radius.circular(radiusWidth),
+          topLeft: Radius.circular(radiusWidth),
+          bottomLeft: Radius.circular(radiusWidth),
+          bottomRight: Radius.circular(radiusWidth),
+        ),
+      );
+      break;
+    default:
+      return null;
+  }
+}
+
+/*
+* 取随机颜色
+* */
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}
+

lib/widgets/elements/Form/Button/index.dart

@@ -3,6 +3,12 @@ import "package:flutter/material.dart";
 
 import 'FlatButton/index.dart' as FlatButton;
 import 'RaisedButton/index.dart' as RaisedButton;
+import 'OutlineButton/index.dart' as OutlineButton;
+import 'IconButton/index.dart' as IconButton;
+import 'PopupMenuButton/index.dart' as PopupMenuButton;
+import 'FloatingActionButton/index.dart' as FloatingActionButton;
+import 'RawMaterialButton/index.dart' as RawMaterialButton;
+import 'DropdownButton/index.dart' as DropdownButton;
 
 
 List<WidgetPoint> widgetPoints = [
@@ -16,4 +22,34 @@ List<WidgetPoint> widgetPoints = [
     routerName: RaisedButton.Demo.routeName,
     buildRouter: (BuildContext context) => RaisedButton.Demo(),
   ),
+  WidgetPoint(
+    name: 'OutlineButton',
+    routerName: OutlineButton.Demo.routeName,
+    buildRouter: (BuildContext context) => OutlineButton.Demo(),
+  ),
+  WidgetPoint(
+    name: 'IconButton',
+    routerName: IconButton.Demo.routeName,
+    buildRouter: (BuildContext context) => IconButton.Demo(),
+  ),
+  WidgetPoint(
+    name: 'PopupMenuButton',
+    routerName: PopupMenuButton.Demo.routeName,
+    buildRouter: (BuildContext context) => PopupMenuButton.Demo(),
+  ),
+  WidgetPoint(
+    name: 'FloatingActionButton',
+    routerName: FloatingActionButton.Demo.routeName,
+    buildRouter: (BuildContext context) => FloatingActionButton.Demo(),
+  ),
+  WidgetPoint(
+    name: 'RawMaterialButton',
+    routerName: RawMaterialButton.Demo.routeName,
+    buildRouter: (BuildContext context) => RawMaterialButton.Demo(),
+  ),
+  WidgetPoint(
+    name: 'DropdownButton',
+    routerName: DropdownButton.Demo.routeName,
+    buildRouter: (BuildContext context) => DropdownButton.Demo(),
+  )
 ];

lib/widgets/elements/Form/CheckBox/Checkbox/demo.dart

@@ -0,0 +1,74 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2018/11/22
+ * Time: 上午12:03
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: Checkbox 的示例
+ */
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class CheckboxDefault extends StatefulWidget{
+  final int index;
+  final parent;
+  const CheckboxDefault([this.parent,int this.index = -1]) : super();
+  @override
+  State<StatefulWidget> createState() =>_CheckboxDefault();
+}
+class _CheckboxDefault extends State {
+  bool isChecked=false;
+  Color color = _randomColor(); // 注意和下面的 StatelessWidget 里的 _randomColor 区别
+  @override
+  Widget build(BuildContext context) {
+    return Checkbox(
+        activeColor: color,
+        tristate:false,
+        value: isChecked,
+        onChanged: (bool bol) {
+          setState((){
+            isChecked = bol;
+          });
+        }
+    );
+  }
+}
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class CheckboxSelect extends StatelessWidget {
+  final int index;
+  final widget;
+  final parent;
+
+  const CheckboxSelect([this.widget,this.parent,int this.index = -1])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    Color color = _randomColor();
+    return Checkbox(
+        activeColor: color,
+        tristate:false,
+        value: parent.selectValue == this.index,
+        onChanged: (bool bol) {
+          parent.setState((){
+            parent.selectValue = bol ? this.index : -1;
+          });
+        }
+    );
+  }
+}
+
+Color _randomColor() {
+  var red = Random.secure().nextInt(255);
+  var greed = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, greed, blue);
+}

lib/widgets/elements/Form/CheckBox/Checkbox/index.dart

@@ -0,0 +1,112 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: Checkbox 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/Checkbox-class.html
+ */
+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 checkbox;
+
+const String _checkboxText0 =
+"""### **简介**
+> checkbox “复选框”
+- 复选框本身不保持任何状态
+- 当复选框的状态发生变化时，窗口小部件会调用onChanged回调。
+- 大多数使用复选框的小部件将侦听onChanged回调，并使用新值重建复选框以更新复选框的可视外观。""";
+
+
+const String _checkboxText1 =
+"""### **基本用法**
+> 下面示例展示多个颜色(随机)样式的 `checkbox`
+- 一个多选的 `checkbox`
+""";
+
+const String _checkboxText2 =
+"""### **进阶用法**
+> 下面示例展示多个颜色(随机)样式的 `checkbox`
+- 一个单选 `checkbox` 操作
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/CheckBox/Checkbox';
+
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  int selectValue = -1;
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Checkbox',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Checkbox/Checkbox/demo.dart',
+      child: allCheckboxs(context,this),
+      docUrl: 'https://docs.flutter.io/flutter/material/Checkbox-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 Checkbox 按钮
+ */
+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: _checkboxText0),
+            textAlignBar(_checkboxText1),
+            Row(
+              mainAxisAlignment : MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children:[
+                checkbox.CheckboxDefault(that,0),
+                checkbox.CheckboxDefault(that,1),
+                checkbox.CheckboxDefault(that,2),
+                checkbox.CheckboxDefault(that,3),
+                checkbox.CheckboxDefault(that,4),
+              ],
+            ),
+            textAlignBar(_checkboxText2),
+            Row(
+              mainAxisAlignment : MainAxisAlignment.spaceAround,
+              mainAxisSize: MainAxisSize.max,
+              children: <Widget>[
+                checkbox.CheckboxSelect(context.widget,that,0),
+                checkbox.CheckboxSelect(context.widget,that,1),
+                checkbox.CheckboxSelect(context.widget,that,2),
+                checkbox.CheckboxSelect(context.widget,that,3),
+                checkbox.CheckboxSelect(context.widget,that,4),
+              ],
+            ),
+            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)
+            //new Text(txt, style: new TextStyle(fontSize: 15.5,height: 1.2,color:Colors.blue),textAlign:TextAlign.left)
+          ])
+  );
+}
+
+

lib/widgets/elements/Form/CheckBox/CheckboxListTile/demo.dart

@@ -0,0 +1,130 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/23
+ * Time: 下午6:08
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: CheckboxListTile 的示例
+ */
+
+import 'dart:math';
+import 'package:flutter/material.dart';
+
+/*
+* Checkbox 默认按钮的实例
+* index 当前checkbox 的索引值
+* */
+class CheckboxListTileStateDefault extends StatefulWidget {
+  const CheckboxListTileStateDefault() : super();
+
+  @override
+  State<StatefulWidget> createState() => _CheckboxListTileStateDefault();
+}
+
+/*
+* CheckboxListTile 默认的实例,有状态
+* */
+class _CheckboxListTileStateDefault extends State {
+  bool _value = false;
+  void _valueChanged(bool value) {
+    for (var i = 0; i < isChecks.length; i++) {
+      isChecks[i] = value;
+    }
+    setState(() => _value = value);
+  }
+  bool isCheck=false;
+  List<bool> isChecks=[false,false,false,false];
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: <Widget>[
+        new Center(
+          child: CheckboxListTile(
+            value: _value,
+            selected:true,// 默认文字是否高亮
+            onChanged: _valueChanged,
+            dense: false,// 文字是否对齐 图标高度
+            isThreeLine: false,// 文字是否三行显示
+            title:  Text('全部'), // 主标题
+            controlAffinity: ListTileControlAffinity.trailing, // 将控件放在何处相对于文本,leading 按钮显示在文字后面,platform,trailing 按钮显示在文字前面
+            subtitle:  Text('勾选下列全部结果'), // 标题下方显示的副标题
+            secondary:  Icon(Icons.archive), // 从复选框显示在磁贴另一侧的小组件
+            activeColor: Colors.red, // 选中此复选框时要使用的颜色
+          ),
+        ),
+        new Center(
+          child: new CheckboxListTile(
+              value: isChecks[0],
+              title: new Text('选项1'),
+              activeColor: _value ? Colors.red : Colors.green,
+              controlAffinity: ListTileControlAffinity.platform,
+              onChanged: (bool){
+                setState(() {
+                  isChecks[0]=bool;
+                });
+              }),
+        ),
+        new Center(
+          child: new CheckboxListTile(
+              value: isChecks[1],
+              title: new Text('选项2'),
+              activeColor: _value ? Colors.red : Colors.green,
+              controlAffinity: ListTileControlAffinity.platform,
+              onChanged: (bool){
+                setState(() {
+                  isChecks[1]=bool;
+                });
+              }),
+        ),
+        new Center(
+          child: new CheckboxListTile(
+              value: isChecks[2],
+              title: new Text('选项3'),
+              activeColor: _value ? Colors.red : Colors.green,
+              controlAffinity: ListTileControlAffinity.platform,
+              onChanged: (bool){
+                setState(() {
+                  isChecks[2]=bool;
+                });
+              }),
+        ),
+        new Center(
+          child: new CheckboxListTile(
+              value: isChecks[3],
+              title: new Text('选项4'),
+              activeColor: _value ? Colors.red : Colors.green,
+              controlAffinity: ListTileControlAffinity.platform,
+              onChanged: (bool){
+                setState(() {
+                  isChecks[3]=bool;
+                });
+              }),
+        )
+      ],
+    );
+  }
+}
+
+/*
+* CheckboxListTile 默认的实例,无状态
+* */
+class CheckboxListTileDefault extends StatelessWidget {
+  final widget;
+  final parant;
+  const CheckboxListTileDefault ([this.widget,this.parant])
+      : super();
+
+  @override
+  Widget build(BuildContext context) {
+    return CheckboxListTile(
+      title: Text('一个简单的例子'),
+      activeColor: Colors.red,
+      value: widget.valBool,
+        onChanged: (bool value) {
+          parant.setState(()=> widget.valBool = value);
+        },
+        secondary: const Icon(Icons.hourglass_empty),
+    );
+  }
+}

lib/widgets/elements/Form/CheckBox/CheckboxListTile/index.dart

@@ -0,0 +1,93 @@
+/**
+ * Created with Android Studio.
+ * User: ryan
+ * Date: 2018/12/23
+ * Time: 下午6:07
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: CheckboxListTile 的示例
+ */
+import '../../../../../common/widget-demo.dart';
+import '../../../../../routers/application.dart';
+import 'dart:math';
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+
+import 'package:flutter_markdown/flutter_markdown.dart';
+import './demo.dart' as CheckboxListTileDemo;
+
+const String _CheckboxListTileText0 =
+"""### **简介**
+> CheckboxListTile “下拉复选框”
+- 带有复选框的ListTile,带有标签的复选框。
+- 整个列表图块是交互式的：点击图块中的任意位置可切换复选框。
+""";
+
+
+const String _CheckboxListTileText1 =
+"""### **基本用法**
+> CheckboxListTile 的属性特征
+- Checkbox类似的命名属性，比如：onChanged和activeColor。
+- 和ListTile类似的命名属性，比如：title, subtitle, isThreeLine，dense。
+- selected属性和ListTile.selected 属性类似，但使用的颜色是activeColor属性，默认为当前Theme的颜色。
+- onChanged 回调函数为 null,显示禁用
+""";
+
+const String _CheckboxListTileText2 =
+"""### **进阶用法**
+> CheckboxListTile 单选和全选的示例 
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Checkbox/CheckboxListTile';
+  bool valBool = true;
+  @override
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'CheckboxListTile',
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Checkbox/CheckboxListTile/demo.dart',
+      child: allCheckboxs(context, this),
+      docUrl: 'https://docs.flutter.io/flutter/material/CheckboxListTile-class.html',
+    );
+  }
+}
+
+/**
+ * 所有的 CheckboxListTile 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:[
+            MarkdownBody(data: _CheckboxListTileText0),
+            textAlignBar(_CheckboxListTileText1),
+            CheckboxListTileDemo.CheckboxListTileDefault(context.widget,that),// CheckboxListTile 不能放在 Row 里...
+            textAlignBar(_CheckboxListTileText2),
+            CheckboxListTileDemo.CheckboxListTileStateDefault(),
+            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/elements/Form/CheckBox/index.dart

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

lib/widgets/elements/Form/Input/TextField/index.dart

@@ -1,14 +1,71 @@
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: TextField 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/TextField-class.html
+ */
+
+import '../../../../../common/widget_demo.dart';
 import 'package:flutter/material.dart';
+import './text_field_demo.dart' ;
+
+
+const String _textFieldText0 =
+"""### **简介**
+> Text Field “文本字段”
+- 文本字段允许用户输入文本，无论是硬件键盘还是屏幕键盘。
+- 每当用户更改字段中的文本时，文本字段就会调用Onchange的回调。
+- 如果用户指示他们在字段中输入完成（例如，通过按软键盘上的按钮），则文本字段调用onSubmitted回调。
+""";
+
+const String _textFieldText1 =
+"""### **基本用法**
+> 参数的默认的按钮和禁用按钮
+- 默认情况下，文本字段具有在文本字段下方绘制分隔符的修饰。
+- 您可以使用装饰属性来控制装饰，例如通过添加标签或图标。如果将装饰属性设置为空，则将完全删除装饰，包括装饰引入的额外填充，以节省标签的空间。
+- 如果装饰是非null（这是默认的），文本字段需要它的祖先之一是一个材质widget。当文本字段被敲击时，墨水溅到材料上的油漆被触发。
+- 若要将TeXFieldField集成到其他FieldFieldWrices窗体中，请考虑使用TeTFrimeField。""";
+
+const String _textFieldText2 =
+"""### **进阶用法**
+> 实现稍微复杂点的效果，键盘就变成了数字优先，为输入框做一些其他的效果，如提示文字，icon、标签文字等
+- 增加一个keyboardType属性，把keyboardType设置为 TextInputType.number ，让TextField获得焦点的时候弹出的键盘就变成了数字优先。
+- 新增decoration属性，设置相关属性，可以发现当我们的TextField获得焦点时，图标会自动变色，提示文字会自动上移。
+- onChanged是每次输入框内每次文字变更触发的回调，onSubmitted是用户提交而触发的回调。
+- 每当用户改变输入框内的文字，都会在控制台输出现在的字符串.与onSubmitted用法相同。
+""";
 
 class Demo extends StatefulWidget {
-  _Demo createState() => _Demo();
+  static const String routeName = 'elements/Form/Input/TextField';
+  @override
+  _DemoState createState() => _DemoState();
 }
 
-class _Demo extends State<Demo> {
-
+class _DemoState extends State<Demo> {
+  String buttonShapeType = 'border'; // 边框类型
+  void setButtonShapeType(){
+    String _buttonShapeType = (buttonShapeType == 'border') ? 'radius' : 'border';
+    this.setState((){
+      buttonShapeType = _buttonShapeType;
+    });
+  }
+  @override
   Widget build(BuildContext context) {
-    return Container(
-      child: TextField()
+    return WidgetDemo(
+      title: 'TextField',
+      codeUrl: 'elements/Form/Input/TextField/text_field_demo.dart',
+      contentList: [
+        _textFieldText0,
+        _textFieldText1,
+        DefaultTextField(),
+        _textFieldText2,
+        CustomTextField()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/TextField-class.html',
     );
   }
 }
+

lib/widgets/elements/Form/Input/TextField/text_field_demo.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+/*
+* 基本示例
+* */
+class DefaultTextField extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return new Container(
+      padding: const EdgeInsets.all(30.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start, //文本是起始端对齐
+        children: <Widget>[
+          Text('下面是基本输入框：',
+              style: TextStyle(fontSize: 15.5, height: 1.2, color: Colors.blue),
+              textAlign: TextAlign.left),
+          TextField()
+        ],
+      ),
+    );
+  }
+}
+
+/*
+* 稍微复杂些的 TextField
+* */
+class CustomTextField extends StatelessWidget {
+  void _textFieldChanged(String str) {
+    print(str);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return new Container(
+        padding: const EdgeInsets.all(30.0),
+        child: TextField(
+          keyboardType: TextInputType.number,
+          decoration: InputDecoration(
+            contentPadding: EdgeInsets.all(10.0),
+            icon: Icon(Icons.text_fields),
+            labelText: '请输入你的姓名)',
+            helperText: '请输入你的真实姓名',
+          ),
+          onChanged: _textFieldChanged,
+          autofocus: false,
+        ));
+  }
+}

lib/widgets/elements/Form/Input/index.dart

@@ -1 +1,21 @@
-import 'package:flutter/material.dart';
+/**
+ * Created with 菜鸟手册.
+ * User: 一晟
+ * Date: 2018/11/14
+ * Time: 下午4:31
+ * email: zhu.yan@alibaba-inc.com
+ * target: RaisedButton 的示例
+ * 对应文档地址:https://docs.flutter.io/flutter/material/RaisedButton-class.html
+ */
+import '../../../../model/widget.dart';
+import "package:flutter/material.dart";
+
+import './TextField/index.dart' as TextField;
+
+List<WidgetPoint> widgetPoints = [
+  WidgetPoint(
+    name: 'TextField',
+    routerName: TextField.Demo.routeName,
+    buildRouter: (BuildContext context) => TextField.Demo(),
+  ),
+];

lib/widgets/elements/Form/Radio/Radio/demo.dart

@@ -0,0 +1,57 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 22/11/2018
+ * Time: 19:37
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+class RadioADemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<RadioADemo> {
+  int groupValue = 1;
+  onChange(val) {
+    this.setState(() {
+      groupValue = val;
+    });
+  }
+  Widget build(BuildContext context) {
+    return  (
+      new Container(
+        alignment: Alignment.centerLeft,
+        child: new Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            new Radio(
+                value: 1,
+                groupValue: groupValue,//当value和groupValue一致的时候则选中
+                onChanged: (T){
+                  onChange(T);
+                }
+            ),
+            new Radio(
+                value: 2,
+                groupValue: groupValue,
+                onChanged: (T){
+                  onChange(T);
+                }
+            ),
+            new Radio(
+                value: 3,
+                groupValue: groupValue,
+                onChanged: (T){
+                  onChange(T);
+                }
+            )
+          ],
+        ),
+      )
+    );
+  }
+}

lib/widgets/elements/Form/Radio/Radio/index.dart

@@ -0,0 +1,57 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 22/11/2018
+ * Time: 19:17
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  Radio相关
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import 'demo.dart';
+const content1 = """
+# Radio
+> material design 风格的单选按钮
+
+Radio widget 代表表单中的单选按钮, 当groupValue = value时代表组件被选中。
+
+在表单中, 单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
+
+# 示例显示
+""";
+
+const content2 = """
+# 基本用法
+
+```
+new Radio(
+    value: value,
+    groupValue: groupValue, //当value和groupValue一致的时候则选中
+    onChanged: (T){
+      onChange(T);
+    }
+
+````
+""";
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/Radio/index';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content1,
+        new RadioADemo(),
+        content2
+      ],
+      title: 'Radio',
+      docUrl: 'https://docs.flutter.io/flutter/material/Radio-class.html',
+      codeUrl: 'elements/Form/Radio/Radio/index.dart',
+    );
+  }
+}

lib/widgets/elements/Form/Radio/RadioListTile/demo.dart

@@ -0,0 +1,47 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 20/12/2018
+ * Time: 14:32
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+class DemoA extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<DemoA> {
+  String value = '';
+
+  onChange(v) {
+    this.setState(() {
+      value = v;
+    });
+  }
+  Widget build(BuildContext context) {
+
+    return new Column(
+      children: <Widget>[
+        RadioListTile<String>(
+          title: const Text('A'),
+          value: "A",
+          groupValue: this.value,
+          isThreeLine: false,
+          subtitle: const Text("subtitleA"),
+          onChanged:onChange
+        ),
+        RadioListTile<String>(
+          title: const Text('B'),
+          value: "B",
+            subtitle: const Text("subtitleB"),
+          groupValue: this.value,
+          onChanged: onChange
+        ),
+      ],
+    );
+  }
+}

lib/widgets/elements/Form/Radio/RadioListTile/index.dart

@@ -0,0 +1,56 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 22/11/2018
+ * Time: 19:17
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  Radio相关
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import 'demo.dart';
+const content1 = """
+# RadioListTile
+> material design 风格的单选按钮附加文字label
+
+点击文字的同时 , 将会出发 Radio的点击效果.
+
+功能同 @Radio
+
+# 示例显示
+""";
+
+const content2 = """
+# 基本用法
+
+``` dart
+RadioListTile(
+  title: const Text('title'),
+  value: value,
+  groupValue: groupValue,
+  onChanged:onChange
+)
+```
+
+""";
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Form/RadioListTile/index';
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      contentList: [
+        content1,
+        new DemoA(),
+        content2
+      ],
+      title: 'RadioListTile',
+      docUrl: 'https://docs.flutter.io/flutter/material/RadioListTile-class.html',
+      codeUrl: 'elements/Form/Radio/RadioListTile/demo.dart',
+    );
+  }
+}

lib/widgets/elements/Form/Radio/index.dart

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

lib/widgets/elements/Form/Slider/Slider/demo.dart

@@ -0,0 +1,89 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 20/12/2018
+ * Time: 17:51
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+class SliderDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<SliderDemo> {
+  double value = 0.0;
+  Widget build(BuildContext context) {
+    return new Slider(
+      value: value,//实际进度的位置
+      inactiveColor: Colors.black12,//进度中不活动部分的颜色
+      label: 'value: $value',
+      min: 0.0,
+      max: 100.0,
+      divisions: 1000,
+      activeColor: Colors.blue,//进度中活动部分的颜色
+      onChanged: (double){
+        setState(() {
+          value = double.roundToDouble();
+        });
+      },
+    );
+  }
+
+}
+
+
+
+class SliderThemeDemo extends StatefulWidget {
+  _SliderThemeDemo createState() => _SliderThemeDemo();
+}
+
+class _SliderThemeDemo extends State<SliderThemeDemo> {
+  double value = 0.0;
+  Widget build(BuildContext context) {
+    return new Container(
+      child: new SliderTheme(
+        data: SliderTheme.of(context).copyWith(
+//                activeTickMarkColor:Colors.yellowAccent,
+          activeTrackColor: Colors.yellowAccent,//实际进度的颜色
+//                inactiveTickMarkColor:Colors.black
+          thumbColor: Colors.black,//滑块中心的颜色
+          inactiveTrackColor:Colors.red,//默 认进度条的颜色
+          valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
+          valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
+            color: Colors.white,
+          ),
+          inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
+          overlayColor: Colors.pink,//滑块边缘颜色
+        ),
+        child: new Container(
+          width: 340.0,
+          margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
+          child: new Row(
+            children: <Widget>[
+              new Text('0.0'),
+              new Expanded(
+                flex: 1,
+                child: new Slider(
+                  value: value,
+                  label: '$value',
+                  divisions: 10,
+                  onChanged: (double){
+                    setState(() {
+                      value=double.floorToDouble();//转化成double
+                    });
+                  },
+                  min: 0.0,
+                  max: 100.0,
+                ),
+              ),
+              new Text('100.0'),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/elements/Form/Slider/Slider/index.dart

@@ -0,0 +1,93 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 20/12/2018
+ * Time: 17:43
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import  'demo.dart';
+
+const contentA = '''
+### **简介**
+> 用来选择范围性的数据
+
+slider 用来选择连续性的或者非连续性的数据. 默认是在一段最大值最小值间做任意值的选择. 如果你想选择间隔性的值, 例如0.0到50.0间,选择10, 15,...50.0这样的值, 给divisions设定一个非空的整数5,, 去分割区间范围.
+
+### **基本用法**
+
+关于slider有以下的术语:
+
+* **thumb** 滑块  用户可以水平拖拽移动的区域
+
+* **track** 滑轨 thumb 可以滑动的线条区域
+
+* **value indicator** 值指示器 当用户拖拽thumb的时候. 显示用户当前所选的属性值
+
+* **active** 选中区
+
+* **inactive** 非选中区
+
+如果**onChanged**属性为空或者**min** .. **max**给出的范围 为空（例如如果min等于max），则将禁用滑块。
+
+滑块小部件本身不保持任何状态State。相反，当滑块状态发生变化时，窗口小部件会调用 **onChanged** 回调。大多数使用滑块的小部件将侦听 **onChanged** 回调并使用新值重建滑块以更新滑块的视觉外观。要知道值何时开始更改，或何时更改，请设置可选回调**onChangeStart**或**onChangeEnd**。
+
+默认情况下，滑块将尽可能宽，垂直居中。当给定无限制约束时，它将尝试使轨道宽144像素（每边有边距）并垂直收缩。
+
+### **基本实例**
+
+''';
+
+
+const contentB = '''
+### **高级用法**
+> 自定义Slider 样式
+
+如果当前Slider样式 无法满足需求, 可以通过 ** SliderTheme ** 定制复杂样式
+
+```
+new SliderTheme(
+  data: SliderTheme.of(context).copyWith(
+    activeTrackColor: Colors.yellowAccent,//实际进度的颜色
+    inactiveTickMarkColor:Colors.black
+    thumbColor: Colors.black,//滑块中心的颜色
+    inactiveTrackColor:Colors.red,//默 认进度条的颜色
+    valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
+    valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
+      color: Colors.white,
+    ),
+    inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
+    overlayColor: Colors.pink,//滑块边缘颜色
+  child: new Slider()
+)
+
+```
+
+### **基本实例**
+
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = 'elements/Form/Slider/Slider';
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<Demo> {
+
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Slider',
+      codeUrl: 'elements/Form/Slider/Slider/demo.dart',
+      contentList: [
+        contentA,
+        SliderDemo(),
+        contentB,
+        SliderThemeDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/Slider-class.html',
+    );
+  }
+}

lib/widgets/elements/Form/Slider/SliderTheme/demo.dart

@@ -0,0 +1,63 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 27/12/2018
+ * Time: 14:40
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+class SliderThemeDemo extends StatefulWidget {
+  _SliderThemeDemo createState() => _SliderThemeDemo();
+}
+
+class _SliderThemeDemo extends State<SliderThemeDemo> {
+  double value = 0.0;
+  Widget build(BuildContext context) {
+    return new Container(
+      child: new SliderTheme(
+        data: SliderTheme.of(context).copyWith(
+//                activeTickMarkColor:Colors.yellowAccent,
+          activeTrackColor: Colors.yellowAccent,//实际进度的颜色
+//                inactiveTickMarkColor:Colors.black
+          thumbColor: Colors.black,//滑块中心的颜色
+          inactiveTrackColor:Colors.red,//默 认进度条的颜色
+          valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
+          valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
+            color: Colors.white,
+          ),
+          inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
+          overlayColor: Colors.pink,//滑块边缘颜色
+        ),
+        child: new Container(
+          width: 340.0,
+          margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
+          child: new Row(
+            children: <Widget>[
+              new Text('0.0'),
+              new Expanded(
+                flex: 1,
+                child: new Slider(
+                  value: value,
+                  label: '$value',
+                  divisions: 10,
+                  onChanged: (double){
+                    setState(() {
+                      value=double.floorToDouble();//转化成double
+                    });
+                  },
+                  min: 0.0,
+                  max: 100.0,
+                ),
+              ),
+              new Text('100.0'),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/elements/Form/Slider/SliderTheme/index.dart

@@ -0,0 +1,75 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 20/12/2018
+ * Time: 17:43
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import  'demo.dart';
+
+const contentA = '''
+### **简介**
+> 用来更改Slider样式的上层部件
+
+将滑块主题应用于后代Slider小部件。
+
+### **基本用法**
+
+> 通过更改sliderTheme.data, 修改Slider总体样式
+
+基本属性参考以下代码: 
+
+```
+new SliderTheme(
+  data: SliderThemeData({
+    @required Color activeTrackColor,
+    @required Color inactiveTrackColor,
+    @required Color disabledActiveTrackColor,
+    @required Color disabledInactiveTrackColor,
+    @required Color activeTickMarkColor,
+    @required Color inactiveTickMarkColor,
+    @required Color disabledActiveTickMarkColor,
+    @required Color disabledInactiveTickMarkColor,
+    @required Color thumbColor,
+    @required Color disabledThumbColor,
+    @required Color overlayColor,
+    @required Color valueIndicatorColor,
+    @required SliderComponentShape thumbShape,
+    @required SliderComponentShape valueIndicatorShape,
+    @required ShowValueIndicator showValueIndicator,
+    @required TextStyle valueIndicatorTextStyle
+  }),
+  child: anyWidgetContain(Slider) // 用来包含slider的widget容器窗口
+),
+
+```
+
+### **基本实例**
+
+
+''';
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = 'elements/Form/Slider/SliderTheme';
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<Demo> {
+
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SliderTheme',
+      codeUrl: 'elements/Form/Slider/SliderTheme/demo.dart',
+      contentList: [
+        contentA,
+        new SliderThemeDemo(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/SliderTheme-class.html',
+    );
+  }
+}

lib/widgets/elements/Form/Slider/SliderThemeData/demo.dart

@@ -0,0 +1,63 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 27/12/2018
+ * Time: 14:40
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+class SliderThemeDemo extends StatefulWidget {
+  _SliderThemeDemo createState() => _SliderThemeDemo();
+}
+
+class _SliderThemeDemo extends State<SliderThemeDemo> {
+  double value = 0.0;
+  Widget build(BuildContext context) {
+    return new Container(
+      child: new SliderTheme(
+        data: SliderTheme.of(context).copyWith(
+//                activeTickMarkColor:Colors.yellowAccent,
+          activeTrackColor: Colors.yellowAccent,//实际进度的颜色
+//                inactiveTickMarkColor:Colors.black
+          thumbColor: Colors.black,//滑块中心的颜色
+          inactiveTrackColor:Colors.red,//默 认进度条的颜色
+          valueIndicatorColor: Colors.blue,//提示进度的气派的背景色
+          valueIndicatorTextStyle: new TextStyle(//提示气泡里面文字的样式
+            color: Colors.white,
+          ),
+          inactiveTickMarkColor:Colors.blue,//divisions对进度线分割后 断续线中间间隔的颜色
+          overlayColor: Colors.pink,//滑块边缘颜色
+        ),
+        child: new Container(
+          width: 340.0,
+          margin: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
+          child: new Row(
+            children: <Widget>[
+              new Text('0.0'),
+              new Expanded(
+                flex: 1,
+                child: new Slider(
+                  value: value,
+                  label: '$value',
+                  divisions: 10,
+                  onChanged: (double){
+                    setState(() {
+                      value=double.floorToDouble();//转化成double
+                    });
+                  },
+                  min: 0.0,
+                  max: 100.0,
+                ),
+              ),
+              new Text('100.0'),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/elements/Form/Slider/SliderThemeData/index.dart

@@ -0,0 +1,71 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 20/12/2018
+ * Time: 17:43
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import  'demo.dart';
+
+const contentA = '''
+### **简介**
+> SliderTheme的data修饰属性 **SliderThemeData**
+
+
+
+### **基本用法**
+
+> 配合SliderTheme, 修改slider组件各个部件的样式, 参照@Slider的各组件命名, 修改各部件样式
+
+构造函数如下
+````
+const SliderThemeData({
+  @required Color activeTrackColor,
+  @required Color inactiveTrackColor,
+  @required Color disabledActiveTrackColor,
+  @required Color disabledInactiveTrackColor,
+  @required Color activeTickMarkColor,
+  @required Color inactiveTickMarkColor,
+  @required Color disabledActiveTickMarkColor,
+  @required Color disabledInactiveTickMarkColor,
+  @required Color thumbColor,
+  @required Color disabledThumbColor,
+  @required Color overlayColor,
+  @required Color valueIndicatorColor,
+  @required SliderComponentShape thumbShape,
+  @required SliderComponentShape valueIndicatorShape,
+  @required ShowValueIndicator showValueIndicator,
+  @required TextStyle valueIndicatorTextStyle
+})
+
+````
+
+### **基本实例**
+
+
+''';
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = 'elements/Form/Slider/SliderThemeData';
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<Demo> {
+
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SliderThemeData',
+      codeUrl: 'elements/Form/Slider/SliderThemeData/demo.dart',
+      contentList: [
+        contentA,
+        new SliderThemeDemo()
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/SliderThemeData-class.html',
+    );
+  }
+}

lib/widgets/elements/Form/Slider/index.dart

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

lib/widgets/elements/Form/Switch/AnimatedSwitcher/demo.dart

@@ -0,0 +1,52 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 28/12/2018
+ * Time: 19:58
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+class AnimatedSwitcherDemo extends StatefulWidget {
+  const AnimatedSwitcherDemo({Key key}) : super(key: key);
+
+  @override
+  _ClickCounterState createState() => _ClickCounterState();
+}
+
+class _ClickCounterState extends State<AnimatedSwitcherDemo> {
+  int _count = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: <Widget>[
+        AnimatedSwitcher(
+          duration: const Duration(milliseconds: 500),
+          transitionBuilder: (Widget child, Animation<double> animation) {
+            return ScaleTransition(child: child, scale: animation);
+          },
+          child: Text(
+            '$_count',
+            // This key causes the AnimatedSwitcher to interpret this as a "new"
+            // child each time the count changes, so that it will begin its animation
+            // when the count changes.
+            key: ValueKey<int>(_count),
+            style: Theme.of(context).textTheme.display4,
+          ),
+        ),
+        RaisedButton(
+          child: const Text('Increment'),
+          onPressed: () {
+            setState(() {
+              _count += 1;
+            });
+          },
+        ),
+      ],
+    );
+  }
+}

lib/widgets/elements/Form/Switch/AnimatedSwitcher/index.dart

@@ -0,0 +1,47 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 28/12/2018
+ * Time: 19:54
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import 'demo.dart';
+
+const contentA = '''
+### **简介**
+> 一个在新旧组件. 做渐变切换的组件. 有一定的动画效果
+
+*注意*: 
+- 如果你切换的足够快.超过了间隔时间, 组件只会隐藏第一个 .并渐渐显示最后一个生效的组件.
+- 如果你变更的组件.只是同一个组件, 不同的state或者不同的显示数据与状态. 请为当前组件每一个状态加入一个Key. 强制生效动画效果.
+
+
+
+### **基本实例**
+
+''';
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = 'elements/Form/Switch/AnimatedSwitcher';
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<Demo> {
+
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SwitchListTile',
+      codeUrl: 'elements/Form/Switch/AnimatedSwitcher/demo.dart',
+      contentList: [
+        contentA,
+        new AnimatedSwitcherDemo()
+      ],
+      docUrl: '',
+    );
+  }
+}

lib/widgets/elements/Form/Switch/Switch/demo.dart

@@ -0,0 +1,76 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 27/12/2018
+ * Time: 17:30
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+
+class SwitchDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<SwitchDemo> {
+  bool check = false;
+  Widget build(BuildContext context) {
+    return new Switch(
+      value: this.check,
+      onChanged: (bool val) {
+        this.setState(() {
+          this.check = !this.check;
+        });
+      },
+    );
+  }
+}
+
+class SwitchHighDemo extends StatefulWidget {
+  _SwitchHighDemo createState() => _SwitchHighDemo();
+}
+
+class _SwitchHighDemo extends State<SwitchHighDemo> {
+  bool check = false;
+  Widget build(BuildContext context) {
+    return new Switch.adaptive(
+      value: this.check,
+      activeColor: Colors.blue,     // 激活时原点颜色
+      onChanged: (bool val) {
+        this.setState(() {
+          this.check = !this.check;
+        });
+      },
+    );
+  }
+}
+
+
+class SwitchTypesDemo extends StatefulWidget {
+  _SwitchTypesDemo createState() => _SwitchTypesDemo();
+}
+
+class _SwitchTypesDemo extends State<SwitchTypesDemo> {
+  bool check = false;
+  Widget build(BuildContext context) {
+    return new Switch(
+      value: this.check,
+      activeTrackColor:Colors.green,
+      inactiveThumbColor: Colors.black,
+      inactiveThumbImage: NetworkImage('https://flutter.io/images/homepage/header-illustration.png'),
+      activeThumbImage: NetworkImage(
+          "https://flutter.io/images/homepage/screenshot-2.png"
+      ),
+      inactiveTrackColor: Colors.yellow,
+      activeColor: Colors.blue,     // 激活时原点颜色
+      onChanged: (bool val) {
+        this.setState(() {
+          this.check = !this.check;
+        });
+      },
+    );
+  }
+}

lib/widgets/elements/Form/Switch/Switch/index.dart

@@ -0,0 +1,99 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 20/12/2018
+ * Time: 17:43
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import  'demo.dart';
+
+const contentA = '''
+### **简介**
+> Switch 是一个切换按钮组件，通常用于设置的选项里。
+
+
+### **基本用法**
+
+```
+new Switch(
+    value: isChecked,
+    activeColor: Colors.blue,     // 激活时原点颜色
+    onChanged: (bool val) {
+        this.setState(() {
+            this.isChecked = !this.isChecked;
+        });
+    },
+)
+```
+
+### **基本实例**
+
+@SwitchDemo
+''';
+
+
+const contentB = '''
+
+ios 风格的实例
+
+如果需要ios风格下的实例, 我们可以使用**Switch**的子类**adaptive**,参数使用与Switch相同, 实例如下:
+
+''';
+
+const contentC = '''
+### **高级用法**
+
+当默认的样式无法满足需求时, 我们可以通过自定义各部件样式.
+
+- activeColor[**Color**] 当按钮状态通激活态时, 按钮的背景颜色
+- activeThumbImage [**ImageProvider**] 当按钮状态处于激活态时, 按钮的背景图像
+- activeTrackColor  [**Color**]  当按钮状态处于激活态时, 滑轨的颜色
+- inactiveThumbColor [**Color**] 当按钮处于非激活状态时, 按钮的背景颜色, 与activeColor正好状态相反
+- inactiveThumbImage  [**ImageProvider**] 当按钮状态处于非激活态时, 按钮的背景图像
+- inactiveTrackColor  [**Color**] 当按钮状态处于非激活态时, 滑轨的颜色
+
+下面是自定义, 更改了以上属性的实例
+
+''';
+
+const contentD = '''
+
+```
+activeTrackColor:Colors.green,
+inactiveThumbColor: Colors.black,
+inactiveThumbImage: NetworkImage('https://flutter.io/images/homepage/header-illustration.png'),
+activeThumbImage: NetworkImage(
+    "https://flutter.io/images/homepage/screenshot-2.png"
+),
+inactiveTrackColor: Colors.yellow,
+```
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = 'elements/Form/Switch/Switch';
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<Demo> {
+
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Switch',
+      codeUrl: '',
+      contentList: [
+        contentA,
+        SwitchDemo(),
+        contentB,
+        SwitchHighDemo(),
+        contentC,
+        SwitchTypesDemo(),
+        contentD
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/material/Switch-class.html',
+    );
+  }
+}

lib/widgets/elements/Form/Switch/SwitchListTile/demo.dart

@@ -0,0 +1,28 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 28/12/2018
+ * Time: 15:48
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+
+import 'package:flutter/material.dart';
+
+
+
+class SwitchListTileDemo extends StatefulWidget {
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<SwitchListTileDemo> {
+  bool _lights = false;
+  Widget build(BuildContext context) {
+    return new SwitchListTile(
+      title: const Text('Lights'),
+      value: _lights,
+      onChanged: (bool value) { setState(() { _lights = value; }); },
+      secondary: const Icon(Icons.lightbulb_outline),
+    );
+  }
+}

lib/widgets/elements/Form/Switch/SwitchListTile/index.dart

@@ -0,0 +1,45 @@
+/**
+ * Created with Android Studio.
+ * User: 三帆
+ * Date: 28/12/2018
+ * Time: 15:48
+ * email: sanfan.hx@alibaba-inc.com
+ * tartget:  xxx
+ */
+import 'package:flutter/material.dart';
+
+import '../../../../../common/widget_demo.dart';
+import  'demo.dart';
+
+const contentA = '''
+### **简介**
+> Switch 的一个衍生组件
+
+基本用法与Switch相同.具体参考@Switch, 支持各种自定义样式.
+
+
+
+### **基本实例**
+
+''';
+
+
+class Demo extends StatefulWidget {
+  static const String routeName = 'elements/Form/Switch/SwitchListTile';
+  _Demo createState() => _Demo();
+}
+
+class _Demo extends State<Demo> {
+
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'SwitchListTile',
+      codeUrl: 'elements/Form/Switch/SwitchListTile/demo.dart',
+      contentList: [
+        contentA,
+        SwitchListTileDemo()
+      ],
+      docUrl: '',
+    );
+  }
+}

lib/widgets/elements/Form/Switch/index.dart

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

lib/widgets/elements/Form/Text/RichText/index.dart

@@ -1,5 +1,60 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_markdown/flutter_markdown.dart';
+import '../../../../../common/widget-demo.dart';
 
+const String intro = """
+# 富文本显示
+
+在富文本使用多个不同风格的widget显示文本。要显示的文本使用TextSpan对象树来描述，每个对象都有一个用于该子树的关联样式。文本可能会跨越多行，也可能全部显示在同一行上，具体取决于布局约束。
+
+# 示例代码
+
+```
+RichText(
+  text: TextSpan(
+    text: 'Hello ',
+    style: DefaultTextStyle.of(context).style,
+    children: <TextSpan>[
+      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
+      TextSpan(text: ' world!'),
+    ],
+  ),
+)
+```
+
+# 示例示例
+
+""";
+const String diff = """
+# RichText 与 Text.rich 对比
+
+无论是Text或者Text.rich, 查看源代码发现. 都是由RichText构建出来
+
+## 源码展示
+
+```
+// Text 源码
+@override
+  Widget build(BuildContext context) {
+      ...
+      Widget result = RichText(
+      ...
+    
+        style: effectiveTextStyle,
+        text: data,
+        children: textSpan != null ? <TextSpan>[textSpan] : null,
+      ),
+    );
+    ...
+    return result;
+  }
+```
+待补充...
+""";
+const Map<String, String> markDesc = {
+  'intro': intro,
+  'diff': diff
+};
 class Demo extends StatefulWidget {
   static const String routeName = '/element/Form/Text/RichText';
   _Demo createState() => _Demo();
@@ -8,13 +63,30 @@ class Demo extends StatefulWidget {
 class _Demo extends State<Demo> {
 
   Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(
-          title: Text("FlatButton"),
-        ),
-        body: Container(
-            child: Text("this is RichText")
-        )
+    return WidgetDemo(
+      title: 'Rich Text',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/RichText-class.html',
+      codeUrl: '',
+      child: new Column(
+        children: <Widget>[
+          MarkdownBody(data: markDesc['intro']),
+          Container(
+            color: Color(0xff000000),
+            width: 750.0,
+            child:  RichText(
+              text: TextSpan(
+                text: 'Hello ',
+//                style: TextStyle(fontWeight: FontWeight.normal, inherit: true, fontSize: 44),
+                children: <TextSpan>[
+                  TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold, color: Color(0xfffffc42))),
+                  TextSpan(text: ' world!', style: TextStyle(fontStyle: FontStyle.italic)),
+                ],
+              ),
+            ),
+          ),
+          MarkdownBody(data: markDesc['diff']),
+        ],
+      ),
     );
   }
 }

lib/widgets/elements/Form/Text/Text/index.dart

@@ -1,20 +1,116 @@
 import 'package:flutter/material.dart';
+//import 'package:flutter_markdown/flutter_markdown.dart';
+import '../../../../../common/widget-demo.dart';
+import '../../../../../components/markdown.dart';
 
+const String intro = """
+# 说明
+
+> 具有某个单一样式的文本显示的widget组件, 显示支持一行或者多行. 默认样式会继承层级最为接近的 *DefaultStyle* 
+当然, 你也可以重新他的样式 将 *DefaultStyle.inherit 设置为 false*
+
+# 示例代码
+
+``` dart
+Text(
+  'Hello, World ! How are you?',
+  textAlign: TextAlign.center,
+  overflow: TextOverflow.ellipsis,
+  style: TextStyle(fontWeight: FontWeight.bold),
+)
+```
+
+# 示例显示
+
+
+""";
+
+const String leftDesc = """
+# 示例代码
+
+
+``` dart
+// 左侧布局示例
+Text(
+  "Hello, World! I'm start from left?",
+  textAlign: TextAlign.left,
+  overflow: TextOverflow.ellipsis,
+  style: TextStyle(fontWeight: FontWeight.bold, inherit: true),
+),
+```
+# 示例显示
+""";
+
+const String RichDesc = """
+
+# 复杂文本显示
+
+使用 Text.rich 构造函数，Text 组件可以显示具有不同样式的 TextSpan 段落。下面的示例显示每个单词具有不同样式的“Hello beautiful world”。
+
+```
+Text.rich(
+  TextSpan(
+    text: 'Hello', // default text style
+    children: <TextSpan>[
+      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
+      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
+    ],
+  ),
+)
+```
+""";
+
+const Map<String, String> markDesc = {
+  "intro": intro,
+  "left": leftDesc,
+  "rich": RichDesc
+};
 class Demo extends StatefulWidget {
   static const String routeName = '/element/Form/Text/Text';
   _Demo createState() => _Demo();
 }
 
 class _Demo extends State<Demo> {
+  onButtonTap() {
 
+  }
   Widget build(BuildContext context) {
-    return Scaffold(
-        appBar: AppBar(
-          title: Text("FlatButton"),
-        ),
-        body: Container(
-            child: Text("this is Text")
-        )
+    return WidgetDemo(
+      title: "Text",
+      docUrl: 'flutter/widgets/Text-class.html',
+      codeUrl: 'elements/Form/Text/Text/index.dart',
+      child: new Column(
+        children: <Widget>[
+          MarkdownBody(markDesc['intro']),
+          Text(
+            'Hello, World! How are you?',
+            textAlign: TextAlign.center,
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(fontWeight: FontWeight.bold),
+          ),
+          MarkdownBody(markDesc['left']),
+          Container(
+            width: 750.0,
+            color: Color(0xFF0096ef),
+            child: Text(
+              "Hello, World! I'm start from left?",
+              textAlign: TextAlign.left,
+              overflow: TextOverflow.ellipsis,
+              style: TextStyle(color: Color(0xffffffff)),
+            ),
+          ),
+          MarkdownBody( markDesc['rich']),
+          Text.rich(
+            TextSpan(
+              text: 'Hello', // default text style
+              children: <TextSpan>[
+                TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
+                TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
+              ],
+            ),
+          )
+        ],
+      )
     );
   }
 }

lib/widgets/elements/Form/index.dart

@@ -1,9 +1,19 @@
 import 'Button/index.dart' as Button;
 import 'Text/index.dart' as Text;
+import 'Input/index.dart' as Input;
+import 'CheckBox/index.dart' as CheckBox;
+import 'Radio/index.dart' as Radio;
+import 'Slider/index.dart' as Slider;
+import 'Switch/index.dart' as Switch;
 
 List getWidgets() {
   List result = [];
   result.addAll(Button.widgetPoints);
   result.addAll(Text.widgetPoints);
+  result.addAll(Input.widgetPoints);
+  result.addAll(CheckBox.widgetPoints);
+  result.addAll(Radio.widgetPoints);
+  result.addAll(Slider.widgetPoints);
+  result.addAll(Switch.widgetPoints);
   return result;
 }

lib/widgets/elements/Frame/Box/Fittedbox/demo.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2018/12/2
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2018/12/2
+ * LastUpdateBy: xj.deng
+ *
+ * Describle:FittedBox
+ */
+
+class FittedBoxDefault extends StatelessWidget {
+  final BoxFit curfit;
+  String dec;
+
+  FittedBoxDefault({Key key, BoxFit this.curfit, this.dec});
+
+  @override
+  Widget build(BuildContext context) {
+    return new Column(
+      children: <Widget>[
+        Container(
+          //外部有位置约束，内部大小设定失效，保持和外部约束一致
+          height: 100.0,
+          width: 100.0,
+          color: Colors.yellow,
+          child: FittedBox(
+            fit: curfit,
+            // 修改child写入布局时期分配的空间
+            alignment: Alignment.center,
+            //alignment修改child于父空间对齐方式，默认：Alignment.center,
+            child: Container(
+//              height: 50.0,
+//              width: 50.0,
+              color: Colors.red,
+              child: Text(
+                'fittedBox',
+                style: TextStyle(color: Colors.white),
+              ),
+            ),
+          ),
+        ),
+        Text(dec),
+      ],
+    );
+  }
+}

lib/widgets/elements/Frame/Box/Fittedbox/index.dart

@@ -0,0 +1,108 @@
+
+/**
+ * Author: xiaojia.dxj
+ * Date: 2019-01-08
+ * Email: xiaojia.dxj@alibaba-inc.com
+ * LastUpdateTime: 2019-01-08
+ * LastUpdateBy: xj.deng
+ *
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as fittedBox;
+
+const String Text0 = """
+### **FittedBox**
+> 根据自己的需要，对child进行缩放和定位
+- 可以看看变换，在绘制时任意变换应用在子窗口的widget
+""";
+
+const String Text1 = """
+### **基本用法**
+> 根据外部约束，调整child
+- 如果外部没有约束，按照child的大小。
+- 如果外部有约束，按照外部约束调整自身大小，然后缩放调整child，根据条件进行放置
+- BoxFix 属性，修改child写入布局时期分配的空间
+- alignment修改child于父空间对齐方式，默认：Alignment.center,
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/FittedBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'FittedBox',
+      codeUrl: 'elements/Frame/Box/Fittedbox/demo.dart',
+      docUrl: 'https://docs.flutter.io/flutter/widgets/FittedBox-class.html',
+      contentList: [
+        Text0,
+        Text1,
+        _FittedBoxCreate(),
+      ],
+    );
+  }
+
+  Column _FittedBoxCreate() {
+    return Column(
+      children: <Widget>[
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            fittedBox.FittedBoxDefault(
+              /**
+               * 设置child写入布局期间分配空间
+               */
+              curfit: BoxFit.contain,
+              dec: 'contain',
+            ),
+            fittedBox.FittedBoxDefault(
+              curfit: BoxFit.fill,
+              dec: 'fill',
+            ),
+            fittedBox.FittedBoxDefault(
+              curfit: BoxFit.cover,
+              dec: 'cover',
+            ),
+          ],
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            fittedBox.FittedBoxDefault(
+              curfit: BoxFit.fitHeight,
+              dec: 'fitHeight',
+            ),
+            fittedBox.FittedBoxDefault(
+              curfit: BoxFit.fitWidth,
+              dec: 'fitWidth',
+            ),
+          ],
+        ),
+        SizedBox(
+          height: 20.0,
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: <Widget>[
+            fittedBox.FittedBoxDefault(
+              curfit: BoxFit.none,
+              dec: 'none',
+            ),
+            fittedBox.FittedBoxDefault(
+              curfit: BoxFit.scaleDown,
+              dec: 'scaleDown',
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

lib/widgets/elements/Frame/Box/RenderBox/demo.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class RenderBoxDemo extends StatefulWidget {
+  _RenderBoxDemoState createState() => _RenderBoxDemoState();
+}
+
+class _RenderBoxDemoState extends State<RenderBoxDemo> {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+        //  child: RenderFoo(),
+        );
+  }
+}
+
+class RenderFoo extends RenderBox {
+  @override
+  bool get hasSize => super.hasSize;
+
+  @override
+  BoxConstraints get constraints => super.constraints;
+}

lib/widgets/elements/Frame/Box/RenderBox/index.dart

@@ -0,0 +1,63 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:56:26 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:56:26 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as sizeBox;
+
+const String _Text = '''
+### **简介**
+> BoxConstraints为抽象类，我们可以使用BoxConstraints,一个不可边的约束布局，renderBox布局
+- 一个尺寸尊重一个BoxConstraints，当且仅当，以下关系式的成立：
+minWidth <= Size.width <= maxWidth
+minHeight <= Size.height <= maxHeight
+约束本身必须满足这些关系：
+
+0.0 <= minWidth <= maxWidth <= double.infinity
+0.0 <= minHeight <= maxHeight <= double.infinity
+double.infinity是每个约束的合法值。
+''';
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/RenderBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Table',
+      codeUrl: 'elements/Frame/Box/RenderBox/demo.dart',
+      contentList: [
+        _Text,
+        _SizeBoxCreate(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/RenderBox-class.html',
+    );
+  }
+
+  Column _SizeBoxCreate() {
+    return new Column(
+      children: <Widget>[
+        /**
+         * Immutable layout constraints for RenderBox layout.
+         */
+        SizedBox(
+          width: 900.0,
+          height: 50.0,
+          child: const Card(
+              child: Text(
+                'SizedBox',
+                textAlign: TextAlign.center,
+              ),
+              color: Color(0xFFEF5350)),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/elements/Frame/Box/SizeBox/demo.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+class SizeBoxDefault extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 140.0,
+      height: 80.0,
+      child: const Card(
+        child: Text(
+          'SizedBox',
+          textDirection: TextDirection.rtl,
+        ),
+        margin: EdgeInsets.all(20.0),
+        color: Color(0xFFEF9A9A),
+      ),
+    );
+  }
+}

lib/widgets/elements/Frame/Box/SizeBox/index.dart

@@ -0,0 +1,68 @@
+/*
+ * @Author: xiaojia.dxj
+ * @Date: 2019-01-08 15:55:46 
+ * @Last Modified by:   xiaojia.dxj
+ * @Last Modified time: 2019-01-08 15:55:46 
+ */
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as sizeBox;
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/SizeBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'Table',
+      codeUrl: 'elements/Frame/Box/SizedBox/demo.dart',
+      contentList: [
+        _SizeBoxCreate(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/widgets/SizedBox-class.html',
+    );
+  }
+
+  Column _SizeBoxCreate() {
+    return new Column(
+      children: <Widget>[
+        new Text("SizedBox",
+            textAlign: TextAlign.right,
+            style: TextStyle(
+              fontSize: 28.0,
+              fontWeight: FontWeight.bold,
+            )),
+        new Row(
+          children: <Widget>[
+            sizeBox.SizeBoxDefault(),
+            SizedBox(
+              width: 130.0,
+              height: 80.0,
+              child: const Card(
+                  child: Text(
+                    'SizedBox',
+                    textAlign: TextAlign.center,
+                  ),
+                  margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0),
+                  color: Color(0xFFE57373)),
+            ),
+          ],
+        ),
+        SizedBox(
+          width: 900.0,
+          height: 50.0,
+          child: const Card(
+              child: Text(
+                'SizedBox',
+                textAlign: TextAlign.center,
+              ),
+              color: Color(0xFFEF5350)),
+        ),
+      ],
+    );
+  }
+}

lib/widgets/elements/Frame/Box/TextBox/demo.dart

@@ -0,0 +1 @@
+

lib/widgets/elements/Frame/Box/TextBox/index.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import '../../../../../common/widget_demo.dart';
+import './demo.dart' as TextBox;
+
+const String _Text = """### **TextBox简介**
+> 是一个包含一段文本的矩形
+- 它与rect类似，不过包含一个固定的TextDirection。
+- sizebox的width，heigh为null，child自身设置
+### **属性**
+> width：宽
+> height：高
+- ex:200*50 sizebox
+""";
+
+class Demo extends StatefulWidget {
+  static const String routeName = '/element/Frame/Box/TextBox';
+
+  _DemoState createState() => _DemoState();
+}
+
+class _DemoState extends State<Demo> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetDemo(
+      title: 'TextBox',
+      codeUrl: 'elements/Frame/Box/TextBox/demo.dart',
+      contentList: [
+        _Text,
+        _creatTexbox(),
+      ],
+      docUrl: 'https://docs.flutter.io/flutter/dart-ui/TextBox-class.html',
+    );
+  }
+}
+
+Column _creatTexbox() {
+  return Column(
+    children: <Widget>[
+      // Text("TextBox ",textDirection:  new TextBox.fo,),
+      Container(
+        // child:  TextBox.fromLTRB(270.0, 180.0, 1360.0, 730.0,TextDirection.rtl),
+
+      )
+    
+//  centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
+
+    
+    ],
+  );
+}

lib/widgets/elements/Frame/Box/index.dart

@@ -1 +0,0 @@
-import 'package:flutter/material.dart';