Fixed use of widget with empty initial value, and improve documentation

Author: hslbetto

.gitignore

@@ -29,8 +29,6 @@
 .pub-cache/
 .pub/
 build/
-#example/
-#doc/
 pubspec.lock
 
 # Android related

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.0.0 - 2020-07-17
+
+* Fixed use of widget with empty initial value
+* Improved README.md
+* Improved testing
+* Improved example app
+* Final validation
+
 ## 0.1.1 - 2020-07-16
 
 * Example page published

README.md

@@ -2,7 +2,7 @@
 
 [![pub package](https://img.shields.io/pub/v/select_form_field.svg)](https://pub.dartlang.org/packages/select_form_field)
 
-A Flutter select field widget. It shows a list of options in a dropdown menu.
+A Flutter select field widget. It shows a list of options in a dropdown menu.\
 This widget extend TextField and has a similar bihavior as TextFormField
 
 ## Usage
@@ -12,7 +12,7 @@ In the `pubspec.yaml` of your flutter project, add the following dependency:
 ```yaml
 dependencies:
   ...
-  select_form_field: "^0.1.1"
+  select_form_field: "^1.0.0"
 ```
 
 In your library add the following import:
@@ -35,19 +35,19 @@ Set items using a List map passing:
 ``` dart
 final List<Map<String, dynamic>> _items = [
   {
-    'value': 'box',
-    'label': 'Box',
+    'value': 'boxValue',
+    'label': 'Box Label',
     'icon': Icon(Icons.stop),
   },
   {
-    'value': 'circle',
-    'label': 'Circle',
+    'value': 'circleValue',
+    'label': 'Circle Label',
     'icon': Icon(Icons.fiber_manual_record),
     'textStyle': TextStyle(color: Colors.red),
   },
   {
-    'value': 'star',
-    'label': 'Star',
+    'value': 'starValue',
+    'label': 'Star Label',
     'enable': false,
     'icon': Icon(Icons.grade),
   },
@@ -65,4 +65,8 @@ SelectFormField(
 );
 ```
 
-![Overview](https://raw.githubusercontent.com/m3uzz/select_form_field/master/doc/images/select_form_field.png)
+The result of val in `onChanged`, `validator` and `onSaved` will be a String.\
+So, if you tap on Box Label item on select menu the result will be `boxValue`.
+
+## Preview
+![Overview](https://raw.githubusercontent.com/m3uzz/select_form_field/master/doc/images/select_form_field.gif)

doc/images/select_form_field.gif

@@ -18,7 +18,7 @@
 # The .vscode folder contains launch configuration and tasks you configure in
 # VS Code which you may wish to be included in version control, so this line
 # is commented out by default.
-#.vscode/
+.vscode/
 
 # Flutter/Dart/Pub related
 **/doc/api/
@@ -29,6 +29,7 @@
 .pub-cache/
 .pub/
 /build/
+pubspec.lock
 
 # Web related
 lib/generated_plugin_registrant.dart

doc/images/select_form_field.png

@@ -8,24 +8,21 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter SelectFormField Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-      ),
-      home: MyHomePage(title: 'Flutter SelectFormField Demo'),
+      home: MyHomePage(),
     );
   }
 }
 
 class MyHomePage extends StatefulWidget {
-  MyHomePage({Key key, this.title}) : super(key: key);
-
-  final String title;
+  MyHomePage({Key key}) : super(key: key);
 
   @override
   _MyHomePageState createState() => _MyHomePageState();
 }
 
 class _MyHomePageState extends State<MyHomePage> {
+  TextEditingController _controller;
+  //String _initialValue;
   String _value = '';
   final List<Map<String, dynamic>> _items = [
     {
@@ -47,25 +44,53 @@ class _MyHomePageState extends State<MyHomePage> {
     },
   ];
 
+  @override
+  void initState() {
+    super.initState();
+
+    //_initialValue = 'starValue';
+    _controller = TextEditingController(text: 'starValue');
+
+    _getValue();
+  }
+
+  /// This implementation is just to simulate a load data behavior
+  /// from a data base sqlite or from a API
+  Future<void> _getValue() async {
+    await Future.delayed(const Duration(seconds: 3), () {
+      setState(() {
+        //_initialValue = 'circleValue';
+        _controller.text = 'circleValue';
+      });
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
-        title: Text(widget.title),
+        title: Text('Flutter SelectFormField Demo'),
       ),
       body: SingleChildScrollView(
         padding: EdgeInsets.only(left: 20, right: 20, top: 10),
         child: Form(
           child: Column(
             children: <Widget>[
               SelectFormField(
-                initialValue: 'circleValue',
+                controller: _controller,
+                //initialValue: _initialValue,
                 icon: Icon(Icons.format_shapes),
                 labelText: 'Shape',
                 items: _items,
                 onChanged: (val) => setState(() => _value = val),
                 onSaved: (val) => setState(() => _value = val),
               ),
+              SizedBox(height: 30),
+              Text(
+                'SelectFormField data value:',
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+              SizedBox(height: 10),
               Text(_value),
             ],
           ),

example/.gitignore

@@ -28,8 +28,7 @@ dependencies:
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^0.1.3
-  select_form_field:
-    path: ../
+  select_form_field: ^1.0.0
 
 dev_dependencies:
   flutter_test:

example/lib/main.dart

@@ -365,30 +365,35 @@ class SelectFormField extends FormField<String> {
 
 class _SelectFormFieldState extends FormFieldState<String> {
   TextEditingController _labelController = TextEditingController();
-  TextEditingController _valueController;
+  TextEditingController _stateController;
   Map<String, dynamic> _item;
 
   @override
   SelectFormField get widget => super.widget as SelectFormField;
 
   TextEditingController get _effectiveController =>
-      widget.controller ?? _valueController;
+      widget.controller ?? _stateController;
 
   @override
   void initState() {
     super.initState();
 
     if (widget.controller == null) {
-      _valueController = TextEditingController(text: widget.initialValue);
+      _stateController = TextEditingController(text: widget.initialValue);
     } else {
       widget.controller.addListener(_handleControllerChanged);
     }
 
-    _item = widget.items.firstWhere(
-      (lmItem) => lmItem['value'] == _effectiveController.text,
-      orElse: () => widget.items[0],
-    );
-    _labelController.text = _item['label'];
+    if (_effectiveController.text != null && _effectiveController.text != '') {
+      _item = widget.items.firstWhere(
+        (lmItem) => lmItem['value'] == _effectiveController.text,
+        orElse: () => null,
+      );
+
+      if (_item != null) {
+        _labelController.text = _item['label'];
+      }
+    }
   }
 
   @override
@@ -400,24 +405,29 @@ class _SelectFormFieldState extends FormFieldState<String> {
       widget.controller?.addListener(_handleControllerChanged);
 
       if (oldWidget.controller != null && widget.controller == null) {
-        _valueController =
+        _stateController =
             TextEditingController.fromValue(oldWidget.controller.value);
       }
 
       if (widget.controller != null) {
         setValue(widget.controller.text);
 
         if (oldWidget.controller == null) {
-          _valueController = null;
+          _stateController = null;
         }
       }
     }
 
-    _item = widget.items.firstWhere(
-      (lmItem) => lmItem['value'] == _effectiveController.text,
-      orElse: () => widget.items[0],
-    );
-    _labelController.text = _item['label'];
+    if (_effectiveController.text != null && _effectiveController.text != '') {
+      _item = widget.items.firstWhere(
+        (lmItem) => lmItem['value'] == _effectiveController.text,
+        orElse: () => null,
+      );
+
+      if (_item != null) {
+        _labelController.text = _item['label'];
+      }
+    }
   }
 
   @override
@@ -459,12 +469,16 @@ class _SelectFormFieldState extends FormFieldState<String> {
     );
 
     if (lvItemPicked != null && lvItemPicked != value) {
-      _item = widget.items
-          .firstWhere((lmItem) => lmItem['value'] == _effectiveController.text);
-      _labelController.text = _item['label'];
+      _item = widget.items.firstWhere(
+        (lmItem) => lmItem['value'] == lvItemPicked,
+        orElse: () => null,
+      );
 
-      _effectiveController.text = lvItemPicked;
-      onChangedHandler(lvItemPicked);
+      if (_item != null) {
+        _labelController.text = _item['label'];
+        _effectiveController.text = lvItemPicked;
+        onChangedHandler(lvItemPicked);
+      }
     }
   }
 

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: select_form_field
 description: A Flutter select form field widget. It shows a list of options in a dropdown menu.
-version: 0.1.1
+version: 1.0.0
 homepage: https://github.com/m3uzz/select_form_field
 
 environment: