From 919f461125d4c3d6294f4ad0e57aa1fe0989ed9c Mon Sep 17 00:00:00 2001 From: Jacques Date: Wed, 21 Feb 2024 11:14:47 +0100 Subject: [PATCH] fix: Proper saving of value and more customization --- example/pubspec.lock | 2 +- lib/src/inputs/inputs.dart | 1 + lib/src/inputs/phone/phone.dart | 119 ++++++++++--------- lib/src/inputs/phone/phone_number_model.dart | 9 ++ pubspec.yaml | 2 +- 5 files changed, 78 insertions(+), 55 deletions(-) create mode 100644 lib/src/inputs/phone/phone_number_model.dart diff --git a/example/pubspec.lock b/example/pubspec.lock index a44fe71..7ef7265 100644 --- a/example/pubspec.lock +++ b/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: diff --git a/lib/src/inputs/inputs.dart b/lib/src/inputs/inputs.dart index bcaa357..d0825a7 100644 --- a/lib/src/inputs/inputs.dart +++ b/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'; diff --git a/lib/src/inputs/phone/phone.dart b/lib/src/inputs/phone/phone.dart index 794985d..418e4d5 100644 --- a/lib/src/inputs/phone/phone.dart +++ b/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? priorityCountries; - final Widget? countrySelectorUnderline; - final double countrySelectorWidth; + final Widget? dialCodeSelectorUnderline; + final double dialCodeSelectorWidth; + final Widget Function(Widget child)? dialCodeWrapper; @override State createState() => _FlutterFormInputPhoneState(); @@ -70,7 +74,10 @@ class _FlutterFormInputPhoneState extends State { } } - _selectedCountry = _countryList.first; + _selectedCountry = _countryList.firstWhereOrNull( + (country) => widget.initialValue?.dialCode == country.dialCode, + ) ?? + _countryList.first; } @override @@ -80,57 +87,63 @@ class _FlutterFormInputPhoneState extends State { 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, - child: 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; - }); - } - }, - ), + 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, ), diff --git a/lib/src/inputs/phone/phone_number_model.dart b/lib/src/inputs/phone/phone_number_model.dart new file mode 100644 index 0000000..25f0d15 --- /dev/null +++ b/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; +} diff --git a/pubspec.yaml b/pubspec.yaml index a1e4e90..8fb418a 100644 --- a/pubspec.yaml +++ b/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: