fix: Chang dial code selector to prefix icon

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`.

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/phone/phone.dart

@@ -21,9 +21,8 @@ class FlutterFormInputPhone extends StatefulWidget {
     this.dialCodeSelectorStyle,
     this.enabled = true,
     this.priorityCountries = const ['NL', 'BE', 'LU'],
-    this.dialCodeSelectorUnderline,
+    this.textAlignVertical = TextAlignVertical.top,
-    this.dialCodeSelectorWidth = 100,
+    this.dialCodeSelectorPadding = const EdgeInsets.only(top: 6),
-    this.dialCodeWrapper,
   });
 
   final InputDecoration? decoration;
@@ -37,9 +36,8 @@ class FlutterFormInputPhone extends StatefulWidget {
   final TextStyle? dialCodeSelectorStyle;
   final bool enabled;
   final List<String>? priorityCountries;
-  final Widget? dialCodeSelectorUnderline;
+  final EdgeInsets dialCodeSelectorPadding;
-  final double dialCodeSelectorWidth;
+  final TextAlignVertical textAlignVertical;
-  final Widget Function(Widget child)? dialCodeWrapper;
 
   @override
   State<FlutterFormInputPhone> createState() => _FlutterFormInputPhoneState();
@@ -87,68 +85,62 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
           label: widget.label ?? const Text('Phone number'),
         );
 
-    var dropDownButton = DropdownButton(
+    return FlutterFormInputPlainText(
-      value: _selectedCountry,
+      label: widget.label,
-      style: widget.dialCodeSelectorStyle,
+      style: widget.numberFieldStyle,
-      underline: widget.dialCodeSelectorUnderline,
+      initialValue: widget.initialValue?.number,
-      items: [
+      onSaved: (value) => widget.onSaved?.call(
-        for (var country in _countryList) ...[
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
-          DropdownMenuItem(
+      ),
-            value: country,
+      validator: (value) => widget.validator?.call(
-            child: Row(
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
-              mainAxisSize: MainAxisSize.min,
+      ),
-              children: [
+      onChanged: (value) => widget.onChanged?.call(
-                Text(country.flag),
+        PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
-                const SizedBox(
+      ),
-                  width: 4,
+      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.dialCodeSelectorStyle,
+            underline: const SizedBox.shrink(),
+            items: [
+              for (var country in _countryList) ...[
+                DropdownMenuItem(
+                  value: country,
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(country.flag),
+                      const SizedBox(
+                        width: 4,
+                      ),
+                      Text('+${country.dialCode}'),
+                    ],
+                  ),
                 ),
-                Text('+${country.dialCode}'),
               ],
-            ),
+            ],
-          ),
+            onChanged: (value) {
-        ],
+              if (value != null) {
-      ],
+                setState(() {
-      onChanged: (value) {
+                  _selectedCountry = value;
-        if (value != null) {
+                });
-          setState(() {
+              }
-            _selectedCountry = value;
+            },
-          });
-        }
-      },
-    );
-
-    return Row(
-      children: [
-        Container(
-          padding: const EdgeInsets.only(top: 16),
-          width: widget.dialCodeSelectorWidth,
-          child: widget.dialCodeWrapper?.call(dropDownButton) ?? dropDownButton,
-        ),
-        const SizedBox(
-          width: 16,
-        ),
-        Expanded(
-          child: FlutterFormInputPlainText(
-            style: widget.numberFieldStyle,
-            initialValue: widget.initialValue?.number,
-            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,
-            keyboardType: TextInputType.phone,
-            enabled: widget.enabled,
           ),
         ),
-      ],
+      ),
+      keyboardType: TextInputType.phone,
+      enabled: widget.enabled,
+      textAlignVertical: widget.textAlignVertical,
     );
   }
 }

lib/src/inputs/phone/phone_number_model.dart

@@ -1,5 +1,5 @@
 class PhoneNumber {
-  PhoneNumber({
+  const PhoneNumber({
     this.dialCode,
     this.number,
   });

pubspec.yaml

@@ -1,6 +1,6 @@
 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: