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,10 +85,32 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
           label: widget.label ?? const Text('Phone number'),
         );
 
-    var dropDownButton = DropdownButton(
+    return FlutterFormInputPlainText(
+      label: widget.label,
+      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.copyWith(
+        contentPadding: EdgeInsets.zero,
+        prefixIcon: Padding(
+          padding: widget.dialCodeSelectorPadding,
+          child: DropdownButton(
+            padding: EdgeInsets.zero,
+            elevation: 0,
             value: _selectedCountry,
             style: widget.dialCodeSelectorStyle,
-      underline: widget.dialCodeSelectorUnderline,
+            underline: const SizedBox.shrink(),
             items: [
               for (var country in _countryList) ...[
                 DropdownMenuItem(
@@ -115,40 +135,12 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
                 });
               }
             },
-    );
-
-    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,
-          ),
+      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: