Add decoration, update gif image

Author: nploi

README.md

@@ -20,16 +20,19 @@ import'package:flutter_verification_code_input/flutter_verification_code_input.d
 ## Usage
 
 ```dart
-        new VerificationCodeInput(
-            keyboardType: TextInputType.number,
-            length: 4,
-            onCompleted: (String value) {
-              //...
-              print(value);
-            },
-        )
+  VerificationCodeInput(
+      keyboardType: TextInputType.number,
+      length: 4,
+      onCompleted: (String value) {
+        //...
+        print(value);
+      },
+  )
 ```
 
 ## Showcase
 
-![Showcase](show_case.gif)
+
+![Showcase|100x100, 10%](show_case.gif)
+
+

example/lib/main.dart

@@ -23,32 +23,47 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  get key => null;
+  String _onCompleted = "";
 
   @override
   Widget build(BuildContext context) {
     return new Scaffold(
       appBar: new AppBar(
         title: Center(child: new Text('Example verify code')),
       ),
-      body: Center(
-        child: Column(
+      body: Container(
+        child: ListView(
           children: <Widget>[
             Padding(
               padding: const EdgeInsets.all(8.0),
-              child: Text('Enter your code', style: TextStyle(fontSize: 20.0),),
-            ),
-            Expanded(
-              flex: 1,
-              child: VerificationCodeInput(
-                keyboardType: TextInputType.number,
-                length: 4,
-                padding: EdgeInsets.only(left: 80, right: 80),
-                onCompleted: (String value) {
-                  print(value);
-                },
+              child: Center(
+                child: Text(
+                  'Enter your code',
+                  style: TextStyle(fontSize: 20.0),
+                ),
               ),
             ),
+            VerificationCodeInput(
+              keyboardType: TextInputType.number,
+              length: 4,
+              padding: EdgeInsets.only(left: 80, right: 80),
+              onCompleted: (String value) {
+                print(value);
+                setState(() {
+                  _onCompleted = value;
+                });
+              },
+            ),
+            (_onCompleted != "")
+                ? Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Center(
+                      child: Text(
+                        'Your code: $_onCompleted',
+                      ),
+                    ),
+                  )
+                : Container(),
           ],
         ),
       ),

lib/src/verification_code_input.dart

@@ -5,13 +5,16 @@ class VerificationCodeInput extends StatefulWidget {
   final TextInputType keyboardType;
   final int length;
   EdgeInsetsGeometry padding;
-  VerificationCodeInput({
-    Key key,
-    this.onCompleted,
-    this.keyboardType,
-    this.length = 4,
-    this.padding = const EdgeInsets.all(8.0),
-  }) : super(key: key);
+  BoxDecoration decoration;
+
+  VerificationCodeInput(
+      {Key key,
+      this.onCompleted,
+      this.keyboardType,
+      this.length = 4,
+      this.padding = const EdgeInsets.all(8.0),
+      this.decoration})
+      : super(key: key);
 
   @override
   _VerificationCodeInputState createState() =>
@@ -26,7 +29,6 @@ class _VerificationCodeInputState extends State<VerificationCodeInput> {
 
   @override
   void initState() {
-    // _code[1] = '1'
     if (_listFocusNode.isEmpty) {
       for (var i = 0; i < widget.length; i++) {
         _listFocusNode.add(new FocusNode());
@@ -40,10 +42,10 @@ class _VerificationCodeInputState extends State<VerificationCodeInput> {
   String _getInputVerify() {
     String verifycode = '';
     for (var i = 0; i < widget.length; i++) {
-      for(var index = 0; index < _listControllerText[i].text.length; index ++){
-        if(_listControllerText[i].text[index] != ' ') {
+      for (var index = 0; index < _listControllerText[i].text.length; index++) {
+        if (_listControllerText[i].text[index] != ' ') {
           verifycode += _listControllerText[i].text[index];
-        }  
+        }
       }
     }
     return verifycode;
@@ -64,7 +66,6 @@ class _VerificationCodeInputState extends State<VerificationCodeInput> {
       onChanged: (String value) {
         if (value.length > 1 && index < widget.length ||
             index == 0 && value.isNotEmpty) {
-
           if (index == widget.length - 1) {
             widget.onCompleted(_getInputVerify());
             return;
@@ -117,22 +118,25 @@ class _VerificationCodeInputState extends State<VerificationCodeInput> {
     }
   }
 
+  List<Widget> _buildListWidget() {
+    List<Widget> listWidget = List();
+    for (int index = 0; index < widget.length; index++) {
+      listWidget.add(Container(
+          height: 60,
+          width: 60,
+          padding: EdgeInsets.all(8.0),
+          child: _buildInputItem(index)));
+    }
+    return listWidget;
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: widget.padding,
-      child: ListView.builder(
-        scrollDirection: Axis.horizontal,
-        itemCount: widget.length,
-        itemBuilder: (BuildContext context, int index) {
-          return SizedBox(
-            height: 60,
-            width: 60,
-            child: Container(
-                padding: EdgeInsets.all(8.0), child: _buildInputItem(index)),
-          );
-        },
-      ),
-    );
+    return Container(
+        decoration: widget.decoration,
+        padding: widget.padding,
+        child: Row(
+          children: _buildListWidget(),
+        ));
   }
 }