fix length input

lib/pages/widgets/length_picker.dart

@@ -2,9 +2,13 @@ import 'package:fcs/helpers/theme.dart';
 import 'package:fcs/pages/widgets/local_text.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import 'input_text.dart';
 
+const MAX_INC = 50.0;
+const MAX_FEET = 25.0;
+
 class LengthPicker extends StatefulWidget {
   final TextEditingController controller;
   final String lableKey;
@@ -93,6 +97,10 @@ class LengthPickerDialog extends StatefulWidget {
 class _LengthPickerDialogState extends State<LengthPickerDialog> {
   int _valueFeet;
   int _valueInc;
+  TextEditingController inchInputController = TextEditingController();
+  TextEditingController feetInputController = TextEditingController();
+  final _focusNode = FocusNode();
+
   @override
   void initState() {
     super.initState();
@@ -102,11 +110,113 @@ class _LengthPickerDialogState extends State<LengthPickerDialog> {
       double v = double.parse(widget.controller.text, (s) => 0);
       _valueFeet = (v / 12).floor();
       _valueInc = widget.displayFeet ? (v % 12).toInt() : v.toInt();
+      inchInputController.text = _valueInc.toString();
+      feetInputController.text = _valueFeet.toString();
     }
+    _focusNode.addListener(() {
+      if (_focusNode.hasFocus) {
+        inchInputController.selection = TextSelection(
+            baseOffset: 0, extentOffset: inchInputController.text.length);
+      }
+    });
   }
 
   @override
   Widget build(BuildContext context) {
+    final inchBox = Column(
+      children: [
+        Text("Inch"),
+        Row(
+          children: [
+            Expanded(
+              child: TextFormField(
+                focusNode: _focusNode,
+                autofocus: true,
+                onChanged: _updateInputInch,
+                textAlign: TextAlign.center,
+                controller: inchInputController,
+                keyboardType: TextInputType.numberWithOptions(
+                    signed: false, decimal: true),
+                decoration: new InputDecoration(
+                  contentPadding: EdgeInsets.all(10),
+                  isDense: true,
+                  focusedBorder: OutlineInputBorder(
+                    borderSide: BorderSide(color: primaryColor, width: 1.0),
+                  ),
+                  enabledBorder: OutlineInputBorder(
+                    borderSide: BorderSide(color: Colors.grey[400], width: 1.0),
+                  ),
+                ),
+              ),
+            ),
+            Column(
+              children: [
+                InkWell(
+                  onTap: () => _addInc(1),
+                  child: Icon(
+                    Icons.add,
+                    color: primaryColor,
+                  ),
+                ),
+                InkWell(
+                  onTap: () => _addInc(-1),
+                  child: Icon(
+                    Icons.remove,
+                    color: primaryColor,
+                  ),
+                )
+              ],
+            )
+          ],
+        )
+      ],
+    );
+    final feetBox = Column(
+      children: [
+        Text("Feet"),
+        Row(
+          children: [
+            Expanded(
+              child: TextFormField(
+                onChanged: _updateInputFeet,
+                textAlign: TextAlign.center,
+                controller: feetInputController,
+                keyboardType: TextInputType.numberWithOptions(
+                    signed: false, decimal: true),
+                decoration: new InputDecoration(
+                  contentPadding: EdgeInsets.all(10),
+                  isDense: true,
+                  focusedBorder: OutlineInputBorder(
+                    borderSide: BorderSide(color: primaryColor, width: 1.0),
+                  ),
+                  enabledBorder: OutlineInputBorder(
+                    borderSide: BorderSide(color: Colors.grey[400], width: 1.0),
+                  ),
+                ),
+              ),
+            ),
+            Column(
+              children: [
+                InkWell(
+                  onTap: () => _addFeet(1),
+                  child: Icon(
+                    Icons.add,
+                    color: primaryColor,
+                  ),
+                ),
+                InkWell(
+                  onTap: () => _addFeet(-1),
+                  child: Icon(
+                    Icons.remove,
+                    color: primaryColor,
+                  ),
+                )
+              ],
+            )
+          ],
+        )
+      ],
+    );
     return SimpleDialog(
       title: Center(
           child: LocalText(
@@ -116,7 +226,20 @@ class _LengthPickerDialogState extends State<LengthPickerDialog> {
         fontSize: 16,
       )),
       children: [
-        Center(child: Text(_getText())),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: widget.displayFeet
+              ? [
+                  Container(width: 100, child: feetBox),
+                  Container(width: 100, child: inchBox),
+                ]
+              : [
+                  Container(width: 100, child: inchBox),
+                ],
+        ),
+        SizedBox(
+          height: 10,
+        ),
         widget.displayFeet
             ? Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
@@ -132,9 +255,11 @@ class _LengthPickerDialogState extends State<LengthPickerDialog> {
                   ),
                   Slider(
                     activeColor: primaryColor,
-                    value: _valueFeet.toDouble(),
+                    value: _valueFeet.toDouble() > MAX_FEET
+                        ? 0
+                        : _valueFeet.toDouble(),
                     min: 0,
-                    max: 15,
+                    max: MAX_FEET,
                     divisions: 100,
                     label: (_valueFeet ?? 0).round().toString(),
                     onChanged: (double v) {
@@ -158,9 +283,11 @@ class _LengthPickerDialogState extends State<LengthPickerDialog> {
             ),
             Slider(
               activeColor: primaryColor,
-              value: _valueInc.toDouble(),
+              value: _valueInc.toDouble() > (widget.displayFeet ? 11 : MAX_INC)
+                  ? 0
+                  : _valueInc.toDouble(),
               min: 0,
-              max: widget.displayFeet ? 11 : 50,
+              max: widget.displayFeet ? 11 : MAX_INC,
               divisions: 100,
               label: (_valueInc ?? 0).round().toString(),
               onChanged: (double v) {
@@ -177,27 +304,56 @@ class _LengthPickerDialogState extends State<LengthPickerDialog> {
     setState(() {
       _valueFeet = v.toInt();
     });
+    int _v = _valueInc.round() + _valueFeet.round() * 12;
     if (widget.controller != null) {
-      int _v = _valueInc.round() + _valueFeet.round() * 12;
       widget.controller.text = _v.toString();
     }
+    feetInputController.text =
+        widget.displayFeet ? _valueFeet.round().toString() : _v.toString();
   }
 
   _updateInc(double v) {
     setState(() {
       _valueInc = v.toInt();
     });
+    int _v = _valueInc.round() + _valueFeet.round() * 12;
+    if (widget.controller != null) {
+      widget.controller.text =
+          widget.displayFeet ? _v.toString() : _valueInc.toString();
+    }
+    inchInputController.text = _valueInc.toString();
+  }
+
+  _updateInputInch(String value) {
+    int val = int.tryParse(value) ?? _valueInc;
+    setState(() {
+      _valueInc = val.toInt();
+    });
+    int _v = _valueInc.round() + _valueFeet.round() * 12;
     if (widget.controller != null) {
-      int _v = _valueInc.round() + _valueFeet.round() * 12;
       widget.controller.text =
           widget.displayFeet ? _v.toString() : _valueInc.toString();
     }
   }
 
-  String _getText() {
-    int ft = _valueFeet.round();
-    int ins = _valueInc.round();
+  _updateInputFeet(String value) {
+    int val = int.tryParse(value) ?? _valueInc;
+    setState(() {
+      _valueFeet = val.toInt();
+    });
+    int _v = _valueInc.round() + _valueFeet.round() * 12;
+    if (widget.controller != null) {
+      widget.controller.text = _v.toString();
+    }
+  }
 
-    return widget.displayFeet ? "$ft\' $ins\"" : "$ins\"";
+  _addInc(int v) {
+    int value = int.tryParse(inchInputController.text) ?? 0;
+    _updateInc((value + v).toDouble());
+  }
+
+  _addFeet(int v) {
+    int value = int.tryParse(feetInputController.text) ?? 0;
+    _updateFeet((value + v).toDouble());
   }
 }