feat: Stepper

Author: sam

docs/widget/common/stepper/index.md

@@ -1 +1,29 @@
-## **文档完善中**
+## **Stepper**
+
+>
+一个步骤小控件，通过一系列步骤显示进度，对于表单的情况，Stepper特别有用，可以通过控制需要完成多个步骤才能提交的表单
+
+### 构造方法
+``` dart
+Stepper({
+    Key key,
+    @required this.steps,
+    this.physics,
+    this.type = StepperType.vertical,
+    this.currentStep = 0,
+    this.onStepTapped,
+    this.onStepContinue,
+    this.onStepCancel,
+    this.controlsBuilder,
+    })
+```
+
+### 属性介绍
+* steps: Stepper的内容，包含标题，副标题，内容
+* physics: Stepper滚动视图应如何响应用户输入
+* type = StepperType.vertical: 确定Stepper的布局类型
+* currentStep: 当前步骤索引，内容被显示
+* onStepTapped: step被点击时的回调
+* onStepContinue: 点击 继续 按钮时的回调
+* onStepCancel: 点击 取消 按钮时的回调
+* controlsBuilder: 用于创建自定义控件的回调

lib/components/widgetComp.dart

@@ -79,6 +79,7 @@ class IndexState extends State<Index> {
       this._bodyList.add(authorTile(nameKey));
       this._bodyList.add(Divider());
     }
+    print('文档完成长度：${mdText.length}');
     if (mdText.length > 30) {
       this._bodyList.add(await MarkDownComp.Index(mdText));
       // demo

lib/widget/common/stepper/demo.dart

@@ -7,6 +7,11 @@ class Index extends StatefulWidget {
 
 class _IndexState extends State<Index> {
   int _currentStep = 0;
+  // final _textEditingController1 = TextEditingController();
+  // final _textEditingController2 = TextEditingController();
+  // final _textEditingController3 = TextEditingController();
+  List<TextEditingController> _textEditingController = [TextEditingController(), TextEditingController(), TextEditingController()];
+
   @override
   void initState() {
     super.initState();
@@ -25,9 +30,11 @@ class _IndexState extends State<Index> {
           children: <Widget>[
             Theme(
               data: Theme.of(context).copyWith(
-                primaryColor: Colors.black
+                primaryColor: Theme.of(context).primaryColor
               ),
               child: Stepper(
+                physics: NeverScrollableScrollPhysics(),
+                type: StepperType.vertical,
                 currentStep: _currentStep,
                 onStepTapped: (int value) {
                   setState(() {
@@ -46,29 +53,105 @@ class _IndexState extends State<Index> {
                 },
                 steps: [
                   Step(
-                    title: Text('Login'),
-                    subtitle: Text('Login first'),
-                    content: Text('Confirm your information'),
+                    title: Text('Name'),
+                    subtitle: Text('User name'),
+                    content: Container(
+                      padding: EdgeInsets.all(10.0),
+                      child: TextField(
+                        controller: _textEditingController[0],
+                        maxLength: 10,
+                        style: TextStyle(
+                          fontSize: 20.0,
+                          color: Theme.of(context).primaryColor
+                        ),
+                        // autofocus: true,
+                        decoration: InputDecoration(
+                          icon: Icon(Icons.people),
+                          labelText: 'Name',
+                          border: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(15.0)
+                          )
+                        ),
+                      ),
+                    ),
                     isActive: _currentStep == 0
                   ),
                   Step(
-                    title: Text('Choose plan'),
-                    subtitle: Text('Choose your plan'),
-                    content: Text('Confirm your information'),
+                    title: Text('Phone'),
+                    subtitle: Text('User phone'),
+                    content: Container(
+                      padding: EdgeInsets.all(10.0),
+                      child: TextField(
+                        controller: _textEditingController[1],
+                        maxLength: 18,
+                        style: TextStyle(
+                          fontSize: 20,
+                          color: Theme.of(context).primaryColor
+                        ),
+                        keyboardType: TextInputType.phone,
+                        decoration: InputDecoration(
+                          icon: Icon(Icons.phone),
+                          labelText: 'Phone',
+                          border: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(15.0)
+                          )
+                        ),
+                      ),
+                    ),
                     isActive: _currentStep == 1
                   ),
                   Step(
-                    title: Text('Confirm payment'),
-                    subtitle: Text('Confirm yoir payment method'),
-                    content: Text('Confirm your information'),
+                    title: Text('Email'),
+                    subtitle: Text('User email'),
+                    content: Container(
+                      padding: EdgeInsets.all(10.0),
+                      child: TextField(
+                        controller: _textEditingController[2],
+                        maxLength: 20,
+                        style: TextStyle(
+                          fontSize: 20,
+                          color: Theme.of(context).primaryColor
+                        ),
+                        keyboardType: TextInputType.emailAddress,
+                        decoration: InputDecoration(
+                          icon: Icon(Icons.email),
+                          labelText: 'Email',
+                          border: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(15.0)
+                          )
+                        ),
+                      ),
+                    ),
                     isActive: _currentStep == 2
                   ),
                 ],
               ),
+            ),
+            RaisedButton(
+              color: Theme.of(context).primaryColor,
+              onPressed: _openSimpleDialog,
+              child: Text('Click on me to show information',style: TextStyle(color: Colors.white),),
             )
           ],
         ),
       )
     );
   }
+
+  Future _openSimpleDialog () async {
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return SimpleDialog(
+          title: Text('User Information'),
+          titlePadding: EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0),
+          contentPadding: EdgeInsets.fromLTRB(24.0, 12.0, 0.0, 16.0),
+          children: List.generate(3, (index) {
+            return Text('${_textEditingController[index].text}');
+          }),
+        );
+      }
+    );
+  }
+
 }

readme/widget_progress.md

@@ -60,7 +60,7 @@ Flutter UI
           │  ├─placeholder
           │  ├─raisedbutton
           │  ├─rawimage
-          │  ├─stepper
+          │  ├─stepper  【✔️ v1.0】
           │  ├─text 【✔️ v1.0】
           │  └─tooltip
           ├─form