merge devlop

.gradle/buildOutputCleanup/cache.properties

@@ -0,0 +1,2 @@
+#Thu Nov 22 22:29:42 CST 2018
+gradle.version=3.5.1

.gradle/buildOutputCleanup/cache.properties.lock

@@ -0,0 +1 @@
+

.vscode/launch.json

@@ -0,0 +1,13 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Flutter",
+            "request": "launch",
+            "type": "dart"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.fontSize": 14,
+
+}

lib/common/Style.dart

@@ -21,3 +21,9 @@ class AppText{
     fontSize: middleSize,
   );
 }
+class WidgetDemoColor {
+  static const int fontColor = 0xFF607173;
+  static const int iconColor = 0xFF607173;
+  static const int borderColor = 0xFFEFEFEF;
+
+}

lib/common/high_light_code.dart

@@ -0,0 +1,359 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:string_scanner/string_scanner.dart';
+
+/// final SyntaxHighlighterStyle style = SyntaxHighlighterStyle.lightThemeStyle();
+/// DartSyntaxHighlighter(style).format(source)
+
+class SyntaxHighlighterStyle {
+  SyntaxHighlighterStyle({
+    this.baseStyle,
+    this.numberStyle,
+    this.commentStyle,
+    this.keywordStyle,
+    this.stringStyle,
+    this.punctuationStyle,
+    this.classStyle,
+    this.constantStyle
+  });
+
+  static SyntaxHighlighterStyle lightThemeStyle() {
+    return SyntaxHighlighterStyle(
+        baseStyle: const TextStyle(color: Color(0xFF000000)),
+        numberStyle: const TextStyle(color: Color(0xFF1565C0)),
+        commentStyle: const TextStyle(color: Color(0xFF9E9E9E)),
+        keywordStyle: const TextStyle(color: Color(0xFF9C27B0)),
+        stringStyle: const TextStyle(color: Color(0xFF43A047)),
+        punctuationStyle: const TextStyle(color: Color(0xFF000000)),
+        classStyle: const TextStyle(color: Color(0xFF512DA8)),
+        constantStyle: const TextStyle(color: Color(0xFF795548))
+    );
+  }
+
+  static SyntaxHighlighterStyle darkThemeStyle() {
+    return SyntaxHighlighterStyle(
+        baseStyle: const TextStyle(color: Color(0xFFFFFFFF)),
+        numberStyle: const TextStyle(color: Color(0xFF1565C0)),
+        commentStyle: const TextStyle(color: Color(0xFF9E9E9E)),
+        keywordStyle: const TextStyle(color: Color(0xFF80CBC4)),
+        stringStyle: const TextStyle(color: Color(0xFF009688)),
+        punctuationStyle: const TextStyle(color: Color(0xFFFFFFFF)),
+        classStyle: const TextStyle(color: Color(0xFF009688)),
+        constantStyle: const TextStyle(color: Color(0xFF795548))
+    );
+  }
+
+  final TextStyle baseStyle;
+  final TextStyle numberStyle;
+  final TextStyle commentStyle;
+  final TextStyle keywordStyle;
+  final TextStyle stringStyle;
+  final TextStyle punctuationStyle;
+  final TextStyle classStyle;
+  final TextStyle constantStyle;
+}
+
+abstract class Highlighter { // ignore: one_member_abstracts
+  TextSpan format(String src);
+}
+
+class DartSyntaxHighlighter extends Highlighter {
+  DartSyntaxHighlighter([this._style]) {
+    _spans = <_HighlightSpan>[];
+    _style ??= SyntaxHighlighterStyle.darkThemeStyle();
+  }
+
+  SyntaxHighlighterStyle _style;
+
+  static const List<String> _keywords = <String>[
+    'abstract', 'as', 'assert', 'async', 'await', 'break', 'case', 'catch',
+    'class', 'const', 'continue', 'default', 'deferred', 'do', 'dynamic', 'else',
+    'enum', 'export', 'external', 'extends', 'factory', 'false', 'final',
+    'finally', 'for', 'get', 'if', 'implements', 'import', 'in', 'is', 'library',
+    'new', 'null', 'operator', 'part', 'rethrow', 'return', 'set', 'static',
+    'super', 'switch', 'sync', 'this', 'throw', 'true', 'try', 'typedef', 'var',
+    'void', 'while', 'with', 'yield'
+  ];
+
+  static const List<String> _builtInTypes = <String>[
+    'int', 'double', 'num', 'bool'
+  ];
+
+  String _src;
+  StringScanner _scanner;
+
+  List<_HighlightSpan> _spans;
+
+  @override
+  TextSpan format(String src) {
+    _src = src;
+    _scanner = StringScanner(_src);
+
+    if (_generateSpans()) {
+      // Successfully parsed the code
+      final List<TextSpan> formattedText = <TextSpan>[];
+      int currentPosition = 0;
+
+      for (_HighlightSpan span in _spans) {
+        if (currentPosition != span.start)
+          formattedText.add(TextSpan(text: _src.substring(currentPosition, span.start)));
+
+        formattedText.add(TextSpan(style: span.textStyle(_style), text: span.textForSpan(_src)));
+
+        currentPosition = span.end;
+      }
+
+      if (currentPosition != _src.length)
+        formattedText.add(TextSpan(text: _src.substring(currentPosition, _src.length)));
+
+      return TextSpan(style: _style.baseStyle, children: formattedText);
+    } else {
+      // Parsing failed, return with only basic formatting
+      return TextSpan(style: _style.baseStyle, text: src);
+    }
+  }
+
+  bool _generateSpans() {
+    int lastLoopPosition = _scanner.position;
+
+    while (!_scanner.isDone) {
+      // Skip White space
+      _scanner.scan(RegExp(r'\s+'));
+
+      // Block comments
+      if (_scanner.scan(RegExp(r'/\*(.|\n)*\*/'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.comment,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Line comments
+      if (_scanner.scan('//')) {
+        final int startComment = _scanner.lastMatch.start;
+
+        bool eof = false;
+        int endComment;
+        if (_scanner.scan(RegExp(r'.*\n'))) {
+          endComment = _scanner.lastMatch.end - 1;
+        } else {
+          eof = true;
+          endComment = _src.length;
+        }
+
+        _spans.add(_HighlightSpan(
+            _HighlightType.comment,
+            startComment,
+            endComment
+        ));
+
+        if (eof)
+          break;
+
+        continue;
+      }
+
+      // Raw r"String"
+      if (_scanner.scan(RegExp(r'r".*"'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.string,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Raw r'String'
+      if (_scanner.scan(RegExp(r"r'.*'"))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.string,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Multiline """String"""
+      if (_scanner.scan(RegExp(r'"""(?:[^"\\]|\\(.|\n))*"""'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.string,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Multiline '''String'''
+      if (_scanner.scan(RegExp(r"'''(?:[^'\\]|\\(.|\n))*'''"))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.string,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // "String"
+      if (_scanner.scan(RegExp(r'"(?:[^"\\]|\\.)*"'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.string,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // 'String'
+      if (_scanner.scan(RegExp(r"'(?:[^'\\]|\\.)*'"))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.string,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Double
+      if (_scanner.scan(RegExp(r'\d+\.\d+'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.number,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Integer
+      if (_scanner.scan(RegExp(r'\d+'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.number,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end)
+        );
+        continue;
+      }
+
+      // Punctuation
+      if (_scanner.scan(RegExp(r'[\[\]{}().!=<>&\|\?\+\-\*/%\^~;:,]'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.punctuation,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Meta data
+      if (_scanner.scan(RegExp(r'@\w+'))) {
+        _spans.add(_HighlightSpan(
+            _HighlightType.keyword,
+            _scanner.lastMatch.start,
+            _scanner.lastMatch.end
+        ));
+        continue;
+      }
+
+      // Words
+      if (_scanner.scan(RegExp(r'\w+'))) {
+        _HighlightType type;
+
+        String word = _scanner.lastMatch[0];
+        if (word.startsWith('_'))
+          word = word.substring(1);
+
+        if (_keywords.contains(word))
+          type = _HighlightType.keyword;
+        else if (_builtInTypes.contains(word))
+          type = _HighlightType.keyword;
+        else if (_firstLetterIsUpperCase(word))
+          type = _HighlightType.klass;
+        else if (word.length >= 2 && word.startsWith('k') && _firstLetterIsUpperCase(word.substring(1)))
+          type = _HighlightType.constant;
+
+        if (type != null) {
+          _spans.add(_HighlightSpan(
+              type,
+              _scanner.lastMatch.start,
+              _scanner.lastMatch.end
+          ));
+        }
+      }
+
+      // Check if this loop did anything
+      if (lastLoopPosition == _scanner.position) {
+        // Failed to parse this file, abort gracefully
+        return false;
+      }
+      lastLoopPosition = _scanner.position;
+    }
+
+    _simplify();
+    return true;
+  }
+
+  void _simplify() {
+    for (int i = _spans.length - 2; i >= 0; i -= 1) {
+      if (_spans[i].type == _spans[i + 1].type && _spans[i].end == _spans[i + 1].start) {
+        _spans[i] = _HighlightSpan(
+            _spans[i].type,
+            _spans[i].start,
+            _spans[i + 1].end
+        );
+        _spans.removeAt(i + 1);
+      }
+    }
+  }
+
+  bool _firstLetterIsUpperCase(String str) {
+    if (str.isNotEmpty) {
+      final String first = str.substring(0, 1);
+      return first == first.toUpperCase();
+    }
+    return false;
+  }
+}
+
+enum _HighlightType {
+  number,
+  comment,
+  keyword,
+  string,
+  punctuation,
+  klass,
+  constant
+}
+
+class _HighlightSpan {
+  _HighlightSpan(this.type, this.start, this.end);
+  final _HighlightType type;
+  final int start;
+  final int end;
+
+  String textForSpan(String src) {
+    return src.substring(start, end);
+  }
+
+  TextStyle textStyle(SyntaxHighlighterStyle style) {
+    if (type == _HighlightType.number)
+      return style.numberStyle;
+    else if (type == _HighlightType.comment)
+      return style.commentStyle;
+    else if (type == _HighlightType.keyword)
+      return style.keywordStyle;
+    else if (type == _HighlightType.string)
+      return style.stringStyle;
+    else if (type == _HighlightType.punctuation)
+      return style.punctuationStyle;
+    else if (type == _HighlightType.klass)
+      return style.classStyle;
+    else if (type == _HighlightType.constant)
+      return style.constantStyle;
+    else
+      return style.baseStyle;
+  }
+}

lib/common/myListView.dart

@@ -0,0 +1,70 @@
+
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class MyListView extends StatelessWidget {
+
+final String currCodeUrl;
+final String currTitle;
+final String developer;
+
+const MyListView({ Key key,this.currCodeUrl, this.currTitle, this.developer}):
+super(key:key);
+
+
+ void _launchURL(String url) async {
+    if (await canLaunch(url)) {
+      await launch(url);
+    } else {
+      throw 'Could not launch $url';
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      //color: Colors.primaries[index % Colors.primaries.length],
+        color: Colors.white,
+        elevation: 4.0,
+        margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
+        child:ListTile(
+            onTap:(){
+              print('codeUrl:${currCodeUrl}');
+              _launchURL(currCodeUrl);
+            },
+            // contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 1.0),
+            // leading: Container(
+            //   padding: EdgeInsets.only(right: 12.0),
+            //   decoration: new BoxDecoration(
+            //       border: new Border(
+            //           right: new BorderSide(width: 1.0, color: Colors.grey))),
+            //   child: Icon(smallParts_icon, color: smallParts_Color),
+            // ),
+            title: Padding(
+              child: Text(
+              
+              currTitle,
+              style: TextStyle(color: Colors.black,fontSize:15.0),
+              
+            ),
+            padding: EdgeInsets.only(top: 10.0),
+            ),
+            // subtitle: Text("Intermediate", style: TextStyle(color: Colors.white)),
+
+            subtitle: Row(
+              
+              children: <Widget>[
+                Padding(
+                  child:  Text( developer, style: TextStyle(color: Colors.black54,fontSize:10.0)
+                ),
+                padding:EdgeInsets.only(top: 10.0,bottom: 10.0),
+                )
+                //Icon(Icons.linear_scale, color: smallParts_Color),
+               
+              ],
+            ),
+            trailing: Icon(Icons.keyboard_arrow_right, color: Colors.grey, size: 30.0)
+            )
+    );
+  }
+}

lib/common/net_utils.dart

@@ -0,0 +1,17 @@
+import 'package:dio/dio.dart';
+import 'dart:async';
+
+var dio = new Dio();
+
+class NetUtils {
+  
+  static Future get(String url,{Map<String,dynamic> params}) async{
+     var response = await dio.get(url, data: params);
+    return  response.data;
+  }
+
+  static Future post(String url,Map<String,dynamic> params) async{
+    var response = await dio.post(url, data: params);
+    return response.data;
+  }
+}

lib/common/provider.dart

@@ -13,7 +13,7 @@ class Provider {
   Future init(bool isCreate) async {
     String databasesPath = await getDatabasesPath();
     String path = join(databasesPath,'flutter.db');
-    print("path ${path}");
+    // print("path ${path}");
 
     if(db == null && isCreate){
       ByteData data = await rootBundle.load(join("assets", "app.db"));
@@ -21,12 +21,12 @@ class Provider {
       await new File(path).writeAsBytes(bytes);
 
       db = await openDatabase(path,version: 2,onCreate : (Database db, int version) async{
-        print('db created version is $version');
+        // print('db created version is $version');
       },onOpen : (Database db) async{
-        print('new db opened');
+        // print('new db opened');
       });
     }else{
-      print('Opening existing database');
+      // print('Opening existing database');
     }
   }
 }

lib/common/sql.dart

@@ -4,6 +4,7 @@ import 'package:sqflite/sqflite.dart';
 
 
 
+
 class BaseModel{
   Database db;
   final String table = '';
@@ -15,7 +16,6 @@ class BaseModel{
 
 class Sql extends BaseModel {
   final String tableName;
-
   Sql.setTable(String name)
       : tableName = name,
         super(Provider.db);
@@ -36,12 +36,12 @@ class Sql extends BaseModel {
     String stringConditions = '';
 
     int index = 0;
-    print("condition>>> $conditions");
+    // print("condition>>> $conditions");
     conditions.forEach((key, value) {
       if (value == null) {
         return ;
       }
-      print("$key value.runtimeType: ${value.runtimeType}");
+      // print("$key value.runtimeType: ${value.runtimeType}");
       if (value.runtimeType == String) {
         stringConditions = '$stringConditions $key = "$value"';
       }
@@ -54,7 +54,7 @@ class Sql extends BaseModel {
       }
       index++;
     });
-    print("this is string condition for sql > $stringConditions");
+    // print("this is string condition for sql > $stringConditions");
 
     return await this.query(tableName, where: stringConditions);
   }
@@ -63,4 +63,37 @@ class Sql extends BaseModel {
     json['id'] = id;
     return json;
   }
+  ///
+  /// 搜索
+  /// @param Object condition
+  /// @mods [And, Or] default is Or
+  /// search({'name': "hanxu', 'id': 1};
+  ///
+  Future<List> search({Map<String, dynamic> conditions, String Mods = 'Or'}) async {
+    if (conditions == null || conditions.isEmpty) {
+      return this.get();
+    }
+    String stringConditions = '';
+    int index = 0;
+    conditions.forEach((key, value) {
+      if (value == null) {
+        return ;
+      }
+
+      if (value.runtimeType == String) {
+        stringConditions = '$stringConditions $key like "%$value%"';
+      }
+      if (value.runtimeType == int) {
+        stringConditions = '$stringConditions $key = "%$value%"';
+      }
+
+      if (index >= 0 && index < conditions.length -1) {
+        stringConditions = '$stringConditions $Mods';
+      }
+      index++;
+    });
+    print("this is string search condition for sql > $stringConditions");
+
+    return await this.query(tableName, where: stringConditions);
+  }
 }

lib/common/util.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+const Map<String, Color> emumMap = const {
+  "Objective-C": Color(0xFF438EFF),
+  "Perl": Color(0xFF0298C3),
+  "Python": Color(0xFF0298C3),
+  "JavaScript": Color(0xFFF1E05A),
+  "PHP": Color(0xFF4F5D95),
+  "R": Color(0xFF188CE7),
+  "Lua": Color(0xFFC22D40),
+  "Scala": Color(0xFF020080),
+  "Swift": Color(0xFFFFAC45),
+  "Kotlin": Color(0xFFF18E33),
+  "Vue": Colors.black,
+  "Ruby": Color(0xFF701617),
+  "Shell": Color(0xFF89E051),
+  "TypeScript": Color(0xFF2B7489),
+  "C++": Color(0xFFF34B7D),
+  "CSS": Color(0xFF563C7C),
+  "Java": Color(0xFFB07219),
+  "C#": Color(0xFF178600),
+  "Go": Color(0xFF375EAB),
+  "Erlang": Color(0xFFB83998),
+  "C": Color(0xFF555555),
+};
+
+class Util {
+  static String getTimeDuration(String comTime) {
+    var nowTime = DateTime.now();
+    var compareTime = DateTime.parse(comTime);
+    if (nowTime.isAfter(compareTime)) {
+      if (nowTime.year == compareTime.year) {
+        if (nowTime.month == compareTime.month) {
+          if (nowTime.day == compareTime.day) {
+            if (nowTime.hour == compareTime.hour) {
+              if (nowTime.minute == compareTime.minute) {
+                return '片刻之间';
+              }
+              return (nowTime.minute - compareTime.minute).toString() + '分钟前';
+            }
+            return (nowTime.hour - compareTime.hour).toString() + '小时前';
+          }
+          return (nowTime.day - compareTime.day).toString() + '天前';
+        }
+        return (nowTime.month - compareTime.month).toString() + '月前';
+      }
+      return (nowTime.year - compareTime.year).toString() + '年前';
+    }
+    return 'time error';
+  }
+
+  static double setPercentage(percentage, context) {
+    return MediaQuery.of(context).size.width * percentage;
+  }
+
+  static Color getLangColor(String language) {
+    if (emumMap.containsKey(language)) {
+      return emumMap[language];
+    }
+    return Colors.black26;
+  }
+
+  static String getTimeDate(String comTime) {
+    var compareTime = DateTime.parse(comTime);
+    String weekDay = '';
+    switch (compareTime.weekday) {
+      case 2:
+        weekDay = '周二';
+        break;
+      case 3:
+        weekDay = '周三';
+        break;
+      case 4:
+        weekDay = '周四';
+        break;
+      case 5:
+        weekDay = '周五';
+        break;
+      case 6:
+        weekDay = '周六';
+        break;
+      case 7:
+        weekDay = '周日';
+        break;
+      default:
+        weekDay = '周一';
+    }
+    return '${compareTime.month}-${compareTime.day}  $weekDay';
+  }
+}

lib/common/widget-demo.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+import '../routers/application.dart';
+
+class WidgetDemo extends StatelessWidget {
+  final Widget child;
+  final String docUrl;
+  final String title;
+  final String codeUrl;
+
+  WidgetDemo(
+      {Key key,
+      @required this.title,
+      @required this.child,
+      @required this.codeUrl,
+      @required this.docUrl})
+      : super(key: key);
+
+  void _launchURL(String url) async {
+    if (await canLaunch(url)) {
+      await launch(url);
+    } else {
+      throw 'Could not launch $url';
+    }
+  }
+
+  @override
+  Widget build(BuildContext context,[bottomNaviBar]) {
+    return Scaffold(
+      appBar: new AppBar(
+        title: Text(title),
+        actions: <Widget>[
+          new IconButton(
+            tooltip: 'widget doc',
+            onPressed: (){
+              _launchURL(docUrl);
+            },
+            icon: Icon(Icons.library_books),
+          ),
+          new IconButton(
+            tooltip: 'github code',
+            onPressed: (){
+              _launchURL(codeUrl);
+            },
+            icon: Icon(Icons.code),
+          ),
+          new IconButton(
+            tooltip: 'goBack home',
+            onPressed: (){
+              Navigator.popUntil(context, ModalRoute.withName('/'));
+            },
+            icon: Icon(Icons.home),
+          ),
+        ],
+      ),
+      body: new Container(
+        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
+        child: ListView(
+            shrinkWrap: true,
+            padding: const EdgeInsets.all(0.0),
+            children: <Widget>[
+              Column(
+                children: <Widget>[
+                  SizedBox(
+                    height: 10.0,
+                  ),
+                  child,
+                ],
+              ),
+            ])
+        ),
+      bottomNavigationBar: (bottomNaviBar is Widget)?bottomNaviBar:null
+      );
+  }
+}

lib/common/widget_demo.dart

@@ -0,0 +1,99 @@
+/**
+ * @author Nealyang
+ * 
+ * 新widget详情页模板
+ */
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+// import 'package:flutter_markdown/flutter_markdown.dart';
+import '../routers/application.dart';
+import '../components/markdown.dart';
+
+class WidgetDemo extends StatelessWidget {
+  final List<dynamic> contentList;
+  final String docUrl;
+  final String title;
+  final String codeUrl;
+
+  WidgetDemo(
+      {Key key,
+      @required this.title,
+      @required this.contentList,
+      @required this.codeUrl,
+      @required this.docUrl})
+      : super(key: key);
+
+  void _launchURL(String url) async {
+    if (await canLaunch(url)) {
+      await launch(url);
+    } else {
+      throw 'Could not launch $url';
+    }
+  }
+
+  List<Widget> _buildContent() {
+    List<Widget> _list = [
+      SizedBox(
+        height: 10.0,
+      ),
+    ];
+    contentList.forEach((item) {
+      if (item.runtimeType == String) {
+        _list.add(MarkdownBody(item));
+        _list.add(
+          SizedBox(
+            height: 20.0,
+          ),
+        );
+      } else {
+        _list.add(item);
+      }
+    });
+    return _list;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(title),
+        actions: <Widget>[
+          new IconButton(
+            tooltip: 'widget doc',
+            onPressed: () {
+              _launchURL(docUrl);
+            },
+            icon: Icon(Icons.library_books),
+          ),
+          new IconButton(
+            tooltip: 'github code',
+            onPressed: () {
+              print(Application.github['widgetsURL']+codeUrl);
+              _launchURL(Application.github['widgetsURL']+codeUrl);
+            },
+            icon: Icon(Icons.code),
+          ),
+          new IconButton(
+            tooltip: 'goBack home',
+            onPressed: () {
+              Navigator.popUntil(context, ModalRoute.withName('/'));
+            },
+            icon: Icon(Icons.home),
+          ),
+        ],
+      ),
+      body: Container(
+        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
+        child: ListView(
+          shrinkWrap: true,
+          padding: const EdgeInsets.all(0.0),
+          children: <Widget>[
+            Column(
+              children: _buildContent(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/common/widget_name_to_icon.dart

@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+class WidgetName2Icon {
+  static Map<String,dynamic> icons = {
+    "Element":Icons.explicit,
+    "Components":Icons.extension,
+    "Themes":Icons.filter_b_and_w,
+    "Form":Icons.table_chart,
+    "Frame":Icons.aspect_ratio,
+    "Media":Icons.subscriptions,
+    "Input":Icons.input,
+    "TextField":Icons.text_fields,
+    "Checkbox":Icons.check_box,
+    "CheckboxListTile":Icons.playlist_add_check,
+    "Button":Icons.aspect_ratio,
+    "FlatButton":Icons.outlined_flag,
+    "RaisedButton":Icons.picture_in_picture_alt,
+    "IconButton":Icons.import_contacts,
+    "PopupMenuButton":Icons.power_input,
+    "FloatingActionButton":Icons.flash_off,
+    "RawMaterialButton":Icons.rowing,
+    "DropdownButton":Icons.drag_handle,
+    "OutlineButton":Icons.done_outline,
+    "Text":Icons.text_format,
+    "RichText":Icons.text_rotation_angleup,
+    "Radio":Icons.radio_button_checked,
+    "RadioListTile":Icons.list,
+    "Slider":Icons.slideshow,
+    "SliderTheme":Icons.theaters,
+    "SliderComponentShape":Icons.format_shapes,
+    "SliderThemeData":Icons.data_usage,
+    "Switch":Icons.switch_camera,
+    "SwitchListTile":Icons.switch_video,
+    "AnimatedSwitcher":Icons.airplanemode_active,
+    "Align":Icons.format_align_left,
+    "Stack":Icons.storage,
+    "IndexedStack":Icons.star,
+    "Layout":Icons.layers,
+    "Row":Icons.recent_actors,
+    "Column":Icons.cloud_off,
+    "Container":Icons.edit_location,
+    "Center":Icons.gesture,
+    "Box":Icons.hdr_strong,
+    "ConstrainedBox":Icons.account_box,
+    "OverflowBox":Icons.email,
+    "DecoratedBox":Icons.settings_overscan,
+    "FittedBox":Icons.data_usage,
+    "LimitedBox":Icons.format_align_justify,
+    "RenderBox":Icons.error,
+    "RotateBox":Icons.navigate_next,
+    "SizedOverflowBox":Icons.undo,
+    "TextBox":Icons.wallpaper,
+    "UnconstrainedBox":Icons.account_box,
+    "Axis":Icons.access_alarm,
+    "MainAxis":Icons.add_circle,
+    "CrossAxis":Icons.dehaze,
+    "FlipAxis":Icons.zoom_out,
+    "Expanded":Icons.all_out,
+    "Spacing":Icons.crop_free,
+    "Padding":Icons.crop,
+    "SliverPadding":Icons.euro_symbol,
+    "AnimatedPadding":Icons.zoom_out_map,
+    "Table":Icons.table_chart,
+    "Image":Icons.image,
+    "AssetImage":Icons.image_aspect_ratio,
+    "DecorationImage":Icons.picture_in_picture,
+    "DecorationImagePainter":Icons.image,
+    "ExactAssetImage":Icons.assessment,
+    "FadeInImage":Icons.flip,
+    "FileImage":Icons.filter,
+    "NetworkImage":Icons.network_wifi,
+    "RawImage":Icons.text_rotation_down,
+    "PaintImage":Icons.format_paint,
+    "PrecacheImage":Icons.perm_camera_mic,
+    "MemoryImage":Icons.memory,
+    "Icon":Icons.event_available,
+    "ImageIcon":Icons.image,
+    "IconTheme":Icons.table_chart,
+    "IconData":Icons.date_range,
+    "IconThemeData":Icons.insert_comment,
+    "Canvas":Icons.edit,
+    "Material":Icons.android,
+    "MaterialApp":Icons.android,
+    "MaterialButton":Icons.speaker,
+    "MaterialGap":Icons.view_week,
+    "MaterialSlice":Icons.format_list_numbered_rtl ,
+    "MaterialColor":Icons.color_lens,
+    "Cupertino":Icons.phone_iphone,
+    "Scroll":Icons.swap_vertical_circle,
+    "Tab":Icons.tab,
+    "Menu":Icons.menu,
+    "PopupMenuDivider":Icons.remove,
+    "PopupMenuEntry":Icons.menu,
+    "CheckedPopupMenuItem":Icons.playlist_add_check,
+    "DropdownMenuItem":Icons.playlist_play,
+    "Grid":Icons.grid_on,
+    "Scaffold":Icons.local_convenience_store,
+    "Dialog":Icons.add_alert,
+    "Bar":Icons.border_horizontal,
+    "Card":Icons.credit_card,
+    "Panel":Icons.video_label,
+    "Navigation":Icons.navigation,
+    "List":Icons.list,
+    "ScrollView":Icons.move_to_inbox,
+    "Scrollable":Icons.swap_vertical_circle,
+    "ScrollbarPainter":Icons.format_paint,
+    "ScrollMetrics":Icons.camera,
+    "ScrollPhysics":Icons.control_point_duplicate,
+    "BoxScrollView":Icons.inbox,
+    "Chip":Icons.sim_card,
+    "ChipTheme":Icons.sd_card,
+    "CustomScrollView":Icons.autorenew,
+    "NestedScrollView":Icons.panorama_fish_eye, 
+    "ChipThemeData":Icons.sim_card_alert,
+    "ChoiceChip":Icons.insert_drive_file,
+    "FilterChip":Icons.note_add,
+    "InputChip":Icons.restore_page,
+    "RawChip":Icons.save,
+    "LinearProgressIndicator":Icons.trending_flat  ,
+    "CircularProgressIndicator":Icons.rotate_left ,
+    "ExpansionPanel":Icons.view_stream,
+    "ExpansionPanelList":Icons.view_headline,
+    "BottomNavigationBar":Icons.call_to_action,
+    "ListView":Icons.view_list ,
+    "ListBody":Icons.list ,
+    "AnimatedList":Icons.format_line_spacing ,
+    "SliverAppBar":Icons.content_paste,
+    "AppBar":Icons.card_membership,
+    "BottomAppBar":Icons.call_to_action,
+    "BottomNavigationBarItem":Icons.crop_original,
+    "FlexibleSpaceBar":Icons.aspect_ratio,
+    "ButtonBar":Icons.branding_watermark,
+    "SnackBar":Icons.sms_failed,
+    "Progress":Icons.sync,
+    "Pick":Icons.event_note,
+    "DayPicker":Icons.calendar_today,
+    "MonthPicker":Icons.date_range,
+    "YearPicker":Icons.event_busy,
+    "ShowdatePicker":Icons.event,
+    "MaterialPageRoute":Icons.album,
+     "MaterialAccentColor":Icons.brush,
+
+
+  };
+}

lib/model/cat.dart

@@ -87,7 +87,7 @@ class CatControlModel{
     if (cat == null) {
       cat = new Cat(depth: 1, parentId: 0);
     }
-    print("cat in getList ${cat.toMap()}");
+    // print("cat in getList ${cat.toMap()}");
 
     List listJson =  await sql.getByCondition(conditions: cat.toSqlCondition());
     List<Cat> cats = listJson.map((json) {

lib/model/story.dart

@@ -2,20 +2,22 @@ class StoryModel {
   final String title;
   final String image;
   final int id;
+  final String url;
 
-  StoryModel(this.id, this.title, {this.image});
+  StoryModel(this.id, this.title, {this.image,this.url});
 
   StoryModel.fromJson(Map<String, dynamic> json)
       : this(json['id'], json['title'],
-      image: json['image'] != null ? json['image'] : (json['images'] != null
+      image: json['image'] != null ? json['image'] : (json['images'] != null ? json['images'][0] : null),
-          ? json['images'][0]
+      url: json['url'] != null ? json['url'] : (json['url'] != null ? json['url'][0] : null),
-          : null));
+  );
 
   Map<String, dynamic> toJson() {
     return {
       'id': id,
       'title': title,
-      'image': image
+      'image': image,
+      'url':url
     };
   }
 }

lib/model/widget.dart

@@ -3,47 +3,60 @@ import 'dart:async';
 import '../common/sql.dart';
 import "package:flutter/material.dart";
 
-abstract class WidgetInterface{
+abstract class WidgetInterface {
   int get id;
+
   //组件英文名
   String get name;
+
   //组件中文名
   String get cnName;
+
   //组件截图
   String get image;
+
   //组件markdown 文档
   String get doc;
+
   //类目 id
   int get catId;
 }
 
-class WidgetPoint implements WidgetInterface{
+class WidgetPoint implements WidgetInterface {
   int id;
+
   //组件英文名
   String name;
+
   //组件中文名
   String cnName;
+
   //组件截图
   String image;
+
   // 路由地址
   String routerName;
+
   //组件markdown 文档
   String doc;
+
   //组件 demo ，多个以 , 分割
   String demo;
+
   //类目 id
   int catId;
   final WidgetBuilder buildRouter;
-  WidgetPoint({
+
-    this.id,
+  WidgetPoint(
+      {this.id,
       this.name,
       this.cnName,
       this.image,
       this.doc,
       this.catId,
       this.routerName,
-    this.buildRouter
+      this.buildRouter});
-  });
+
   WidgetPoint.fromJSON(Map json)
       : id = json['id'],
         name = json['name'],
@@ -53,6 +66,7 @@ class WidgetPoint implements WidgetInterface{
         doc = json['doc'],
         catId = json['catId'],
         buildRouter = json['buildRouter'];
+
   String toString() {
     return '(WidgetPoint $name)';
   }
@@ -67,13 +81,12 @@ class WidgetPoint implements WidgetInterface{
       'catId': catId
     };
   }
+
   Map toSqlCondition() {
     Map _map = this.toMap();
     Map condition = {};
     _map.forEach((k, value) {
-
       if (value != null) {
-
         condition[k] = value;
       }
     });
@@ -85,19 +98,23 @@ class WidgetPoint implements WidgetInterface{
     return condition;
   }
 }
-class WidgetControlModel{
+
+class WidgetControlModel {
   final String table = 'widget';
   Sql sql;
+
   WidgetControlModel() {
     sql = Sql.setTable(table);
   }
+
   // 获取Widget不同条件的列表
-  Future<List<WidgetPoint>> getList(WidgetPoint widgetPoint) async{
+  Future<List<WidgetPoint>> getList(WidgetPoint widgetPoint) async {
-    List listJson =  await sql.getByCondition(conditions: widgetPoint.toSqlCondition());
+    List listJson =
+        await sql.getByCondition(conditions: widgetPoint.toSqlCondition());
     List<WidgetPoint> widgets = listJson.map((json) {
       return new WidgetPoint.fromJSON(json);
     }).toList();
-    print("widgets $widgets");
+    // print("widgets $widgets");
     return widgets;
   }
 
@@ -109,4 +126,17 @@ class WidgetControlModel{
     }
     return new WidgetPoint.fromJSON(json.first);
   }
+  Future<List<WidgetPoint>> search(String name) async {
+    List json = await sql.search(conditions: {'name': name});
+
+    if (json.isEmpty) {
+      return [];
+    }
+
+    List<WidgetPoint> widgets = json.map((json) {
+      return new WidgetPoint.fromJSON(json);
+    }).toList();
+
+    return widgets;
+  }
 }

lib/routers/application.dart

@@ -1,5 +1,13 @@
 import 'package:fluro/fluro.dart';
-
+import 'package:flutter/material.dart';
+import '../widgets/index.dart';
 class Application {
   static Router router;
+  static TabController controller;
+  static Map<String, String> github = {
+    'widgetsURL':'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/tree/develop/lib/widgets/',
+    //'develop':'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/tree/develop/lib/widgets/',
+    //'master':'https://github.com/alibaba-paimai-frontend/flutter-common-widgets-app/tree/master/lib/widgets/'
+  };
+
 }

lib/routers/routers.dart

@@ -7,6 +7,7 @@ import './router_handler.dart';
 
 class Routes {
   static String root = "/";
+  static String widgetDemo = '/widget-demo';
 
   static void configureRoutes(Router router) {
     List widgetDemosList = new WidgetDemoList().getDemos();
@@ -21,10 +22,13 @@ class Routes {
     widgetDemosList.forEach((demo) {
       Handler handler = new Handler(
           handlerFunc: (BuildContext context, Map<String, List<String>> params) {
+            print('detail路由:${demo.buildRouter(context)}');
             return demo.buildRouter(context);
       });
+
+      print('路由:${demo.routerName}');
+
       router.define('${demo.routerName}', handler: handler);
     });
-
   }
 }

lib/views/FirstPage.dart

@@ -1,12 +1,20 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_rookie_book/components/List.dart';
+import 'package:flutter_rookie_book/common/myListView.dart';
+//import 'package:flutter_rookie_book/components/CompList.dart';
+import 'package:flutter_rookie_book/components/ListRefresh.dart' as listComp;
 import 'package:flutter_rookie_book/components/Pagination.dart';
 
+import './widgetFeature/FirstPageItem.dart';
+import '../common/net_utils.dart';
+
+import 'package:flutter_rookie_book/common/iconNames.dart';
 import '../common/sql.dart';
 import 'dart:async';
 
+import 'package:url_launcher/url_launcher.dart';
+
 class FirstPage extends StatefulWidget {
   @override
   FirstPageState createState() => new FirstPageState();
@@ -19,6 +27,46 @@ class FirstPageState extends State<FirstPage> {
     // TODO: implement initState
     super.initState();
   }
+
+  Future<Map> getIndexListData([Map<String, dynamic> params]) async {
+    const juejin_flutter = 'https://timeline-merger-ms.juejin.im/v1/get_tag_entry?src=web&tagId=5a96291f6fb9a0535b535438';
+    var pageIndex = (params is Map) ? params['pageIndex'] : 0;
+    final _param  = {'page':pageIndex,'pageSize':20,'sort':'rankIndex'};
+
+    var response = await NetUtils.get(juejin_flutter, params: _param);
+    var responseList = response['d']['entrylist'];
+    var  pageTotal = response['d']['total'];
+    if (!(pageTotal is int) || pageTotal <= 0) {
+      pageTotal = 0;
+    }
+    pageIndex += 1;
+    List resultList = new List();
+    for (int i = 0; i < responseList.length; i++) {
+      try {
+        FirstPageItem cellData = new FirstPageItem.fromJson(responseList[i]);
+        resultList.add(cellData);
+      } catch (e) {
+        // No specified type, handles all
+        print('Something really unknown: $i');
+      }
+    }
+    Map<String, dynamic> result = {"list":resultList, 'total':pageTotal, 'pageIndex':pageIndex};
+    return result;
+  }
+
+  Widget makeCard(index,item){
+    const emojis = ['👲'];
+    var smallParts_Color = Colors.primaries[index % Colors.primaries.length];
+    var smallParts_icon = IconNames.Names[index % IconNames.Names.length];
+    var smallParts_emojis = IconNames.Names[index % IconNames.Names.length];
+
+    var myTitle = '${item.title}';
+    var myUsername = '${'👲'}: ${item.username} ';
+    var codeUrl = '${item.detailUrl}';
+
+    return new MyListView(currCodeUrl:codeUrl,currTitle: myTitle,developer: myUsername,);
+  }
+
   @override
   Widget build(BuildContext context) {
     return new Column(
@@ -26,8 +74,10 @@ class FirstPageState extends State<FirstPage> {
           new Container(
             child: new Pagination(),
           ),
+          SizedBox(height: 2, child:Container(color: Theme.of(context).primaryColor)),
           new Expanded(
-            child: new List(),
+            //child: new List(),
+            child: listComp.ListRefresh(getIndexListData,makeCard)
           ),
         ]
 

lib/views/FourthPage.dart

@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import '../components/List.dart';
+import '../components/CompList.dart';
 
 
 class FourthPage extends StatefulWidget {
@@ -14,7 +14,7 @@ class FourthPageState extends State<FourthPage> {
   @override
   Widget build(BuildContext context) {
     return new Container(
-      child: new List()
+      child: new CompList()
     );
   }
 }

lib/views/ThirdPage.dart

@@ -40,6 +40,7 @@ class ThirdPageState extends State<ThirdPage> {
 
   @override
   Widget build(BuildContext context) {
+    print('===========>>>:123123123123');
     return new Center(
         child: new Column(children: <Widget>[
           new Container(

lib/views/category.dart

@@ -1,14 +1,14 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import '../routers/application.dart';
 import '../model/cat.dart';
 import '../model/widget.dart';
 import '../widgets/index.dart';
+import '../components/widget_item_container.dart';
 
+enum CateOrWigdet { Cat, WidgetDemo }
 
-enum CateOrWigdet {
-  Cat,
-  WidgetDemo
-}
 class CategoryHome extends StatefulWidget {
   CategoryHome(this.name);
   final String name;
@@ -42,6 +42,7 @@ class _CategoryHome extends State<CategoryHome> {
   Future<Cat> getCatByName(String name) async {
     return await catControl.getCatByName(name);
   }
+
   Future<bool> back() {
     if (catHistory.length == 1) {
       return Future<bool>.value(true);
@@ -49,12 +50,13 @@ class _CategoryHome extends State<CategoryHome> {
     catHistory.removeLast();
     searchCatOrWigdet();
     return Future<bool>.value(false);
-
   }
+
   void go(Cat cat) {
     catHistory.add(cat);
     searchCatOrWigdet();
   }
+
   void searchCatOrWigdet() async {
     // 假设进入这个界面的parent一定存在
     Cat parentCat = catHistory.last;
@@ -62,13 +64,14 @@ class _CategoryHome extends State<CategoryHome> {
     int depth = catHistory.length;
 
     // 继续搜索显示下一级depth: depth + 1, parentId: parentCat.id
-    List<Cat> _categories = await catControl.getList(new Cat(parentId: parentCat.id, depth: depth + 1));
+    List<Cat> _categories =
+        await catControl.getList(new Cat(parentId: parentCat.id));
     List<WidgetPoint> _widgetPoints = new List();
     if (_categories.isEmpty) {
-      _widgetPoints = await widgetControl.getList(new WidgetPoint(catId: parentCat.id));
+      _widgetPoints =
+          await widgetControl.getList(new WidgetPoint(catId: parentCat.id));
     }
 
-
     this.setState(() {
       categories = _categories;
       title = parentCat.name;
@@ -79,10 +82,13 @@ class _CategoryHome extends State<CategoryHome> {
   void onCatgoryTap(Cat cat) {
     go(cat);
   }
+
   void onWidgetTap(WidgetPoint widgetPoint) {
     String targetName = widgetPoint.name;
     String targetRouter = '/category/error/404';
+    print("widgetDemosList> ${widgetDemosList}");
     widgetDemosList.forEach((item) {
+      // print("targetRouter = item.routerName> ${[item.name,targetName]}");
       if (item.name == targetName) {
         targetRouter = item.routerName;
       }
@@ -91,9 +97,33 @@ class _CategoryHome extends State<CategoryHome> {
     Application.router.navigateTo(context, "${targetRouter}");
   }
 
+  Widget _buildContent() {
+    WidgetItemContainer wiContaienr = WidgetItemContainer(
+      columnCount: 3,
+      categories: categories,
+      isWidgetPoint:false
+    );
+    if (widgetPoints.length > 0) {
+      wiContaienr = WidgetItemContainer(
+        categories: widgetPoints,
+        columnCount: 3,
+        isWidgetPoint:true
+      );
+    }
+    return Container(
+      padding: const EdgeInsets.only(bottom: 10.0, top: 5.0),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        image: DecorationImage(
+            image: AssetImage('assets/images/paimaiLogo.png'),
+            alignment: Alignment.bottomRight),
+      ),
+      child: wiContaienr,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-
     return Scaffold(
       appBar: AppBar(
         title: Text(title),
@@ -102,150 +132,14 @@ class _CategoryHome extends State<CategoryHome> {
         onWillPop: () {
           return back();
         },
-        child: new Container(
+        child: ListView(
-            child: new CategoryOrWidgetList(
-              categorys: categories,
-              widgetPoints: widgetPoints,
-              onCatgoryTap: onCatgoryTap,
-              onWidgetTap: onWidgetTap
-            ),
-        )
-      )
-    );
-  }
-}
-
-
-
-class CategoryOrWidgetList extends StatelessWidget {
-
-  List<Cat> categorys = [];
-  List<WidgetPoint> widgetPoints = [];
-
-  var onCatgoryTap;
-  var onWidgetTap;
-  CategoryOrWidgetList({
-    this.categorys,
-    this.widgetPoints,
-    this.onCatgoryTap,
-    this.onWidgetTap,
-  });
-
-  Widget build(BuildContext context) {
-    print("categorys $categorys");
-    return GridView.builder(
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 2, //每行2个
-          mainAxisSpacing: 0.0, //主轴(竖直)方向间距
-          crossAxisSpacing: 0.0, //纵轴(水平)方向间距
-          childAspectRatio: 0.8 //纵轴缩放比例
-      ),
-      itemCount: widgetPoints.length == 0 ? categorys.length : widgetPoints.length,
-      itemBuilder: (BuildContext context, int index) {
-        if (widgetPoints.length > 0) {
-          return new ListItemWidget(
-            widgetPoint: widgetPoints[index],
-            onTap: () {
-              onWidgetTap(widgetPoints[index]);
-            },
-          );
-        }
-        return new ListCatWidget(
-          cat: categorys[index],
-          onTap: () {
-            onCatgoryTap(categorys[index]);
-          },
-        );
-      },
-    );
-  }
-}
-
-
-
-class ListCatWidget extends StatelessWidget {
-  final Cat cat;
-  final VoidCallback onTap;
-
-  ListCatWidget({
-    this.cat,
-    this.onTap
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return new Container(
-        color: Colors.green,
-        child: Container(
-            decoration:  new BoxDecoration(
-              color: Colors.white,
-              border: Border(
-                right: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)),
-                bottom: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)),
-              ),
-            ),
-            child: new RaisedButton(
-                onPressed: () {
-                  onTap();
-                },
-                child: new Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  mainAxisSize: MainAxisSize.max,
           children: <Widget>[
-                    Icon(
+            _buildContent(),
-                     Icons.add
-                    ),
-                    Text(cat.name),
           ],
-                )
+        ),
-            )
+        // child: Container(color: Colors.blue,child: Text('123'),),
-        )
+      ),
     );
   }
 }
 
-
-class ListItemWidget extends StatelessWidget {
-  final WidgetPoint widgetPoint;
-  final VoidCallback onTap;
-
-  ListItemWidget({
-    this.widgetPoint,
-    this.onTap
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return new Container(
-        color: Colors.green,
-        child: Container(
-            decoration:  new BoxDecoration(
-              color: Colors.white,
-              border: Border(
-                right: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)),
-                bottom: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)),
-              ),
-            ),
-            child: new RaisedButton(
-                onPressed: () {
-                  onTap();
-                },
-                child: new Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  mainAxisSize: MainAxisSize.max,
-                  children: <Widget>[
-                    Icon(
-                        Icons.add
-                    ),
-                    Text(widgetPoint.name),
-                  ],
-                )
-            )
-        )
-    );
-  }
-}
-
-
-
-

lib/views/widgetFeature/FirstPageItem.dart

@@ -0,0 +1,51 @@
+/**
+ * Created with Android Studio.
+ * User: 一晟
+ * Date: 2019/1/5
+ * Time: 下午10:20
+ * email: zhu.yan@alibaba-inc.com
+ * tartget: FirstPageItem
+ */
+
+import '../../common/Util.dart';
+
+class FirstPageItem {
+  bool hot;
+  String isCollection;
+  String tag;
+  String username;
+  int collectionCount;
+  int commentCount;
+  String title;
+  String createdTime;
+  String detailUrl;
+
+  FirstPageItem(
+      {this.hot,
+        this.tag,
+        this.username,
+        this.collectionCount,
+        this.createdTime,
+        this.commentCount,
+        this.title,
+        this.detailUrl,
+        this.isCollection});
+
+  factory FirstPageItem.fromJson(Map<String, dynamic> json) {
+    String _tag = '';
+    if(json['tags'].length>0){
+      _tag = '${json['tags'][0]['title']}/';
+    }
+    return FirstPageItem(
+      hot: json['hot'],
+      collectionCount: json['collectionCount'],
+      commentCount: json['commentsCount'],
+      tag: '$_tag${json['category']['name']}',
+      username: json['user']['username'],
+      createdTime: Util.getTimeDuration(json['createdAt']),
+      title: json['title'],
+      detailUrl: json['originalUrl'],
+      isCollection: json['type'] ,
+    );
+  }
+}

lib/views/widgetPage.dart

@@ -1,19 +1,13 @@
-
-
-
 import 'package:flutter/material.dart';
-import '../routers/application.dart';
+import 'widgetPage/cate_card.dart';
 import '../model/cat.dart';
-import '../widgets/index.dart';
-
-
-
-
 
 class WidgetPage extends StatefulWidget {
   final db;
   final CatControlModel catModel;
-  WidgetPage(this.db): catModel = new CatControlModel(),super();
+  WidgetPage(this.db)
+      : catModel = new CatControlModel(),
+        super();
 
   @override
   SecondPageState createState() => new SecondPageState(catModel);
@@ -21,7 +15,7 @@ class WidgetPage extends StatefulWidget {
 
 class SecondPageState extends State<WidgetPage> {
   CatControlModel catModel;
-  SecondPageState(this.catModel): super();
+  SecondPageState(this.catModel) : super();
 
   TextEditingController controller;
   String active = 'test';
@@ -29,15 +23,14 @@ class SecondPageState extends State<WidgetPage> {
 
   List<Cat> categories = [];
 
-
   void initState() { 
+    super.initState();
     renderCats();
   }
 
-
+  void renderCats() {
-  void renderCats(){
+    catModel.getList().then((List data) {
-    catModel.getList().then((List data){
+      if (data.isNotEmpty) {
-      if(data.isNotEmpty){
         setState(() {
           categories = data;
         });
@@ -45,26 +38,28 @@ class SecondPageState extends State<WidgetPage> {
     });
   }
 
+  Widget buildGrid() {
+    // 存放最后的widget
+    List<Widget> tiles = [];
+    Widget content;
+    for (Cat item in categories) {
+      tiles.add(new CateCard(category: item));
+    }
+    return new ListView(
+      children: tiles,
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
     if (categories.length == 0) {
-      return new Container();
+      return ListView(
-    }
+        children: <Widget>[new Container()],
-    print("categories in widgetPage : ${categories[0]}");
-    return GridView.builder(
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: 2, //每行2个
-          mainAxisSpacing: 0.0, //主轴(竖直)方向间距
-          crossAxisSpacing: 0.0, //纵轴(水平)方向间距
-          childAspectRatio: 0.8 //纵轴缩放比例
-      ),
-      itemCount: categories.length,
-      itemBuilder: (BuildContext context, int index) {
-        return new ListItemWidget(
-          category: categories[index],
       );
-      },
+    }
+    return Container(
+      color: Theme.of(context).backgroundColor,
+      child: this.buildGrid(),
     );
   }
 
@@ -75,45 +70,3 @@ class SecondPageState extends State<WidgetPage> {
     });
   }
 }
-
-
-class ListItemWidget extends StatelessWidget {
-
-  final Cat category;
-
-  ListItemWidget({this.category});
-
-  @override
-  Widget build(BuildContext context) {
-    return new Container(
-        color: Colors.green,
-        child: Container(
-            decoration:  new BoxDecoration(
-              color: Colors.white,
-              border: Border(
-                right: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)),
-                bottom: const BorderSide(width: 1.0, color: const Color(0xFFFF000000)),
-              ),
-            ),
-            child: new RaisedButton(
-                onPressed: () {
-                  Application.router.navigateTo(context, "/category/${category.name}");
-//                  Application.router.navigateTo(context, "/category/${category.name}");
-                },
-                child: new Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  mainAxisSize: MainAxisSize.max,
-                  children: <Widget>[
-                    Icon(
-                      Icons.add,
-                    ),
-                    Text(category.name),
-                  ],
-                )
-            )
-        )
-    );
-  }
-}
-
-

lib/views/widgetPage/cate_card.dart

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import '../../model/cat.dart';
+import '../../common/widget_name_to_icon.dart';
+import '../../components/widget_item_container.dart';
+
+class CateCard extends StatefulWidget {
+  final Cat category;
+  CateCard({@required this.category});
+  @override
+  _CateCardState createState() => _CateCardState();
+}
+
+class _CateCardState extends State<CateCard> {
+  // 一级菜单目录下的二级Cat集合
+  List<Cat> _firstChildList = new List();
+  CatControlModel catControl = new CatControlModel();
+
+  @override
+  void initState() {
+    super.initState();
+    getFirstChildCategoriesByParentId();
+  }
+
+  // 获取一层目录下的二级内容
+  getFirstChildCategoriesByParentId() async {
+    int parentId = widget.category.id;
+    // 构建查询条件
+    Cat childCateCondition = new Cat(parentId: parentId);
+
+    List<Cat> list = await catControl.getList(childCateCondition);
+    if (list.isNotEmpty&&list.length>=1) {
+      setState(() {
+        _firstChildList = list;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
+    widget.category.name = widget.category.name.replaceFirst(
+        //首字母转为大写
+        widget.category.name.substring(0, 1),
+        widget.category.name.substring(0, 1).toUpperCase());
+        
+    return Container(
+      width: screenWidth,
+      padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
+      child: Stack(
+        children: <Widget>[
+          Container(
+            width: screenWidth - 20,
+            margin: const EdgeInsets.only(top: 30.0, bottom: 0.0),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(4.0),
+            ),
+            child: Column(
+              children: <Widget>[
+                Container(
+                  width: screenWidth - 20,
+                  padding: const EdgeInsets.only(left: 65.0, top: 3.0),
+                  height: 30.0,
+                  child: Text(
+                    widget.category.name,
+                    style: TextStyle(
+                      color: Theme.of(context).primaryColor,
+                      fontSize: 18.0,
+                    ),
+                  ),
+                ),
+                _buildWidgetContainer(),
+              ],
+            ),
+          ),
+          Positioned(
+            left: 0.0,
+            top: 0.0,
+            child: Container(
+              height: 60.0,
+              width: 60.0,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(30.0),
+              ),
+              child: Center(
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: Theme.of(context).primaryColor,
+                    borderRadius: BorderRadius.circular(23.0),
+                  ),
+                  height: 46.0,
+                  width: 46.0,
+                  child: Icon(
+                    WidgetName2Icon.icons[widget.category.name],
+                    color: Colors.white,
+                    size: 30.0,
+                  ),
+                ),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _buildWidgetContainer() {
+    if (this._firstChildList.length == 0) {
+      return Container();
+    }
+    return Container(
+      padding: const EdgeInsets.only(bottom: 10.0, top: 5.0),
+      decoration: BoxDecoration(
+        image: DecorationImage(
+          image: AssetImage('assets/images/paimaiLogo.png'),
+          alignment: Alignment.bottomRight
+        ),
+      ),
+      child: WidgetItemContainer(
+        categories: this._firstChildList,
+        columnCount: 3,
+        isWidgetPoint:false
+      ),
+    );
+  }
+}

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(
+    return WidgetDemo(
-        appBar: AppBar(
+      title: 'FlatButton',
-          title: Text("FlatButton"),
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/FlatButton/demo.dart',
-        ),
+      child: allFlatButtons(context),
-        body: Container(
+      docUrl: 'https://docs.flutter.io/flutter/material/FlatButton-class.html',
-            child: RaisedButton(onPressed: () {}, child: Text("FlatButton"))
-        )
     );
-
   }
 }
+
+/**
+ * 所有的 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(
+    return WidgetDemo(
-        appBar: AppBar(
+      title: 'RaisedButton',
-          title: Text("FlatButton"),
+      codeUrl: '${Application.github['widgetsURL']}elements/Form/Button/RaisedButton/demo.dart',
-        ),
+      child: allRaisedButtons(context,this),
-        body: Container(
+      docUrl: 'https://docs.flutter.io/flutter/material/RaisedButton-class.html',
-            child: RaisedButton(onPressed: () {}, child: Text("BUtton"))
-        )
     );
-
   }
 }
+
+/**
+ * 所有的 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(
+    return WidgetDemo(
-      child: TextField()
+      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(
+    return WidgetDemo(
-        appBar: AppBar(
+      title: 'Rich Text',
-          title: Text("FlatButton"),
+      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']),
+        ],
       ),
-        body: Container(
-            child: Text("this is RichText")
-        )
     );
   }
 }

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

@@ -1,19 +1,115 @@
 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(
+    return WidgetDemo(
-        appBar: AppBar(
+      title: "Text",
-          title: Text("FlatButton"),
+      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),
           ),
-        body: Container(
+          MarkdownBody(markDesc['left']),
-            child: Text("this is Text")
+          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';