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.countrySelectorWidth = 100,
+    this.dialCodeSelectorUnderline,
+    this.dialCodeSelectorWidth = 100,
+    this.dialCodeWrapper,
   });
 
   final InputDecoration? decoration;
   final Widget? label;
-  final String? initialValue;
-  final Function(String?)? onSaved;
-  final String? Function(String?)? validator;
-  final Function(String?)? onChanged;
-  final Function(String?)? onFieldSubmitted;
-  final TextStyle? style;
+  final PhoneNumber? initialValue;
+  final Function(PhoneNumber?)? onSaved;
+  final String? Function(PhoneNumber?)? validator;
+  final Function(PhoneNumber?)? onChanged;
+  final Function(PhoneNumber?)? onFieldSubmitted;
+  final TextStyle? numberFieldStyle;
+  final TextStyle? dialCodeSelectorStyle;
   final bool enabled;
   final List<String>? priorityCountries;
-  final Widget? countrySelectorUnderline;
-  final double countrySelectorWidth;
+  final Widget? dialCodeSelectorUnderline;
+  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,15 +87,10 @@ class _FlutterFormInputPhoneState extends State<FlutterFormInputPhone> {
           label: widget.label ?? const Text('Phone number'),
         );
 
-    return Row(
-      children: [
-        Container(
-          padding: const EdgeInsets.only(top: 16),
-          width: widget.countrySelectorWidth,
-          child: DropdownButton(
+    var dropDownButton = DropdownButton(
       value: _selectedCountry,
-            style: widget.style,
-            underline: widget.countrySelectorUnderline,
+      style: widget.dialCodeSelectorStyle,
+      underline: widget.dialCodeSelectorUnderline,
       items: [
         for (var country in _countryList) ...[
           DropdownMenuItem(
@@ -113,24 +115,35 @@ 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.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(),
+            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,
           ),

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: