Merge pull request #35 from Iconica-Development/bugfix/phone_field

Bugfix/phone field

CHANGELOG.md

@@ -72,3 +72,7 @@
 
 ## 3.2.0
 * Added `FlutterFormInputPhone`
+
+## 3.2.1
+* Added `PhoneNumber` model to save the `FlutterFormInputPhone` result.
+* Added more customization for `FlutterFormInputPhone`.

example/pubspec.lock

@@ -68,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "3.1.0"
+    version: "3.2.0"
   flutter_lints:
     dependency: "direct dev"
     description:

lib/src/inputs/bool/bool_field.dart

@@ -85,7 +85,6 @@ class _BoolWidgetState extends State<BoolWidget> {
           focusNode: widget.focusNode,
           onChanged: onChanged,
         );
-        break;
 
       case BoolWidgetType.checkbox:
         child = Checkbox(
@@ -97,7 +96,6 @@ class _BoolWidgetState extends State<BoolWidget> {
             }
           },
         );
-        break;
     }
 
     return Column(

lib/src/inputs/date_picker/date_picker_field.dart

@@ -107,7 +107,7 @@ class _DateInputFieldState extends State<DateTimeInputField> {
           userInput = unformatted != null
               ? widget.dateFormat.format(unformatted)
               : userInput;
-          break;
+
         case FlutterFormDateTimeType.dateTime:
           await getInputFromUser(FlutterFormDateTimeType.date)
               .then((value) async {
@@ -132,7 +132,7 @@ class _DateInputFieldState extends State<DateTimeInputField> {
               }
             }
           });
-          break;
+
         case FlutterFormDateTimeType.range:
           if (context.mounted) {
             userInput = await showDateRangePicker(
@@ -147,7 +147,7 @@ class _DateInputFieldState extends State<DateTimeInputField> {
                   : '',
             );
           }
-          break;
+
         case FlutterFormDateTimeType.time:
           if (context.mounted) {
             userInput = await showTimePicker(

lib/src/inputs/inputs.dart

@@ -4,6 +4,7 @@ export 'date_picker/date_picker.dart';
 export 'number_picker/number_picker.dart';
 export 'phone/countries.dart';
 export 'phone/phone.dart';
+export 'phone/phone_number_model.dart';
 export 'scroll_picker/scroll_picker.dart';
 export 'slider/slider.dart';
 export 'text/password.dart';

lib/src/inputs/phone/phone.dart

@@ -17,25 +17,27 @@ class FlutterFormInputPhone extends StatefulWidget {
     this.onSaved,
     this.validator,
     this.onFieldSubmitted,
-    this.style,
+    this.numberFieldStyle,
+    this.dialCodeSelectorStyle,
     this.enabled = true,
     this.priorityCountries = const ['NL', 'BE', 'LU'],
-    this.countrySelectorUnderline,
+    this.textAlignVertical = TextAlignVertical.top,
-    this.countrySelectorWidth = 100,
+    this.dialCodeSelectorPadding = const EdgeInsets.only(top: 6),
   });
 
   final InputDecoration? decoration;
   final Widget? label;
-  final String? initialValue;
+  final PhoneNumber? initialValue;
-  final Function(String?)? onSaved;
+  final Function(PhoneNumber?)? onSaved;
-  final String? Function(String?)? validator;
+  final String? Function(PhoneNumber?)? validator;
-  final Function(String?)? onChanged;
+  final Function(PhoneNumber?)? onChanged;
-  final Function(String?)? onFieldSubmitted;
+  final Function(PhoneNumber?)? onFieldSubmitted;
-  final TextStyle? style;
+  final TextStyle? numberFieldStyle;
+  final TextStyle? dialCodeSelectorStyle;
   final bool enabled;
   final List<String>? priorityCountries;
-  final Widget? countrySelectorUnderline;
+  final EdgeInsets dialCodeSelectorPadding;
-  final double countrySelectorWidth;
+  final TextAlignVertical textAlignVertical;
 
   @override
   State<FlutterFormInputPhone> createState() => _FlutterFormInputPhoneState();
@@ -70,7 +72,10 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
       }
     }
 
-    _selectedCountry = _countryList.first;
+    _selectedCountry = _countryList.firstWhereOrNull(
+          (country) => widget.initialValue?.dialCode == country.dialCode,
+        ) ??
+        _countryList.first;
   }
 
   @override
@@ -80,15 +85,32 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
           label: widget.label ?? const Text('Phone number'),
         );
 
-    return Row(
+    return FlutterFormInputPlainText(
-      children: [
+      label: widget.label,
-        Container(
+      style: widget.numberFieldStyle,
-          padding: const EdgeInsets.only(top: 16),
+      initialValue: widget.initialValue?.number,
-          width: widget.countrySelectorWidth,
+      onSaved: (value) => widget.onSaved?.call(
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
+      ),
+      validator: (value) => widget.validator?.call(
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
+      ),
+      onChanged: (value) => widget.onChanged?.call(
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
+      ),
+      onFieldSubmitted: (value) => widget.onFieldSubmitted?.call(
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
+      ),
+      decoration: inputDecoration.copyWith(
+        contentPadding: EdgeInsets.zero,
+        prefixIcon: Padding(
+          padding: widget.dialCodeSelectorPadding,
           child: DropdownButton(
+            padding: EdgeInsets.zero,
+            elevation: 0,
             value: _selectedCountry,
-            style: widget.style,
+            style: widget.dialCodeSelectorStyle,
-            underline: widget.countrySelectorUnderline,
+            underline: const SizedBox.shrink(),
             items: [
               for (var country in _countryList) ...[
                 DropdownMenuItem(
@@ -115,27 +137,10 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
             },
           ),
         ),
-        const SizedBox(
+      ),
-          width: 16,
+      keyboardType: TextInputType.phone,
-        ),
+      enabled: widget.enabled,
-        Expanded(
+      textAlignVertical: widget.textAlignVertical,
-          child: FlutterFormInputPlainText(
-            style: widget.style,
-            initialValue: widget.initialValue,
-            onSaved: (value) =>
-                widget.onSaved?.call('${_selectedCountry.dialCode}$value'),
-            validator: (value) =>
-                widget.validator?.call('${_selectedCountry.dialCode}$value'),
-            onChanged: (value) =>
-                widget.onChanged?.call('${_selectedCountry.dialCode}$value'),
-            onFieldSubmitted: (value) => widget.onFieldSubmitted
-                ?.call('${_selectedCountry.dialCode}$value'),
-            decoration: inputDecoration.copyWith(),
-            keyboardType: TextInputType.phone,
-            enabled: widget.enabled,
-          ),
-        ),
-      ],
     );
   }
 }

lib/src/inputs/phone/phone_number_model.dart

@@ -0,0 +1,9 @@
+class PhoneNumber {
+  const PhoneNumber({
+    this.dialCode,
+    this.number,
+  });
+
+  final String? dialCode;
+  final String? number;
+}

pubspec.yaml

@@ -1,10 +1,10 @@
 name: flutter_input_library
 description: A new Flutter package project.
-version: 3.2.0
+version: 3.2.1
 repository: https://github.com/Iconica-Development/flutter_input_library
 
 environment:
-  sdk: ">=2.18.2 <3.0.0"
+  sdk: ^3.0.0
   flutter: ">=1.17.0"
 
 dependencies: