fix: Proper saving of value and more customization

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/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,29 @@ 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.dialCodeSelectorUnderline,
-    this.countrySelectorWidth = 100,
+    this.dialCodeSelectorWidth = 100,
+    this.dialCodeWrapper,
   });
 
   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 Widget? dialCodeSelectorUnderline;
-  final double countrySelectorWidth;
+  final double dialCodeSelectorWidth;
+  final Widget Function(Widget child)? dialCodeWrapper;
 
   @override
   State<FlutterFormInputPhone> createState() => _FlutterFormInputPhoneState();
@@ -70,7 +74,10 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
       }
     }
 
-    _selectedCountry = _countryList.first;
+    _selectedCountry = _countryList.firstWhereOrNull(
+          (country) => widget.initialValue?.dialCode == country.dialCode,
+        ) ??
+        _countryList.first;
   }
 
   @override
@@ -80,57 +87,63 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
           label: widget.label ?? const Text('Phone number'),
         );
 
+    var dropDownButton = DropdownButton(
+      value: _selectedCountry,
+      style: widget.dialCodeSelectorStyle,
+      underline: widget.dialCodeSelectorUnderline,
+      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}'),
+              ],
+            ),
+          ),
+        ],
+      ],
+      onChanged: (value) {
+        if (value != null) {
+          setState(() {
+            _selectedCountry = value;
+          });
+        }
+      },
+    );
+
     return Row(
       children: [
         Container(
           padding: const EdgeInsets.only(top: 16),
-          width: widget.countrySelectorWidth,
+          width: widget.dialCodeSelectorWidth,
-          child: DropdownButton(
+          child: widget.dialCodeWrapper?.call(dropDownButton) ?? dropDownButton,
-            value: _selectedCountry,
-            style: widget.style,
-            underline: widget.countrySelectorUnderline,
-            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}'),
-                    ],
-                  ),
-                ),
-              ],
-            ],
-            onChanged: (value) {
-              if (value != null) {
-                setState(() {
-                  _selectedCountry = value;
-                });
-              }
-            },
-          ),
         ),
         const SizedBox(
           width: 16,
         ),
         Expanded(
           child: FlutterFormInputPlainText(
-            style: widget.style,
+            style: widget.numberFieldStyle,
-            initialValue: widget.initialValue,
+            initialValue: widget.initialValue?.number,
-            onSaved: (value) =>
+            onSaved: (value) => widget.onSaved?.call(
-                widget.onSaved?.call('${_selectedCountry.dialCode}$value'),
+              PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
-            validator: (value) =>
+            ),
-                widget.validator?.call('${_selectedCountry.dialCode}$value'),
+            validator: (value) => widget.validator?.call(
-            onChanged: (value) =>
+              PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
-                widget.onChanged?.call('${_selectedCountry.dialCode}$value'),
+            ),
-            onFieldSubmitted: (value) => widget.onFieldSubmitted
+            onChanged: (value) => widget.onChanged?.call(
-                ?.call('${_selectedCountry.dialCode}$value'),
+              PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
-            decoration: inputDecoration.copyWith(),
+            ),
+            onFieldSubmitted: (value) => widget.onFieldSubmitted?.call(
+              PhoneNumber(dialCode: _selectedCountry.dialCode, number: value),
+            ),
+            decoration: inputDecoration,
             keyboardType: TextInputType.phone,
             enabled: widget.enabled,
           ),

lib/src/inputs/phone/phone_number_model.dart

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

pubspec.yaml

@@ -4,7 +4,7 @@ version: 3.2.0
 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: