From 8e8fe01467043bc0082c04edc89e5a1e47764736 Mon Sep 17 00:00:00 2001 From: Jacques Date: Wed, 21 Feb 2024 13:55:02 +0100 Subject: [PATCH] fix: Chang dial code selector to prefix icon --- CHANGELOG.md | 4 + lib/src/inputs/bool/bool_field.dart | 2 - .../inputs/date_picker/date_picker_field.dart | 6 +- lib/src/inputs/phone/phone.dart | 120 ++++++++---------- lib/src/inputs/phone/phone_number_model.dart | 2 +- pubspec.yaml | 2 +- 6 files changed, 65 insertions(+), 71 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21809c7..b2da3ff 100644 --- a/CHANGELOG.md +++ b/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`. diff --git a/lib/src/inputs/bool/bool_field.dart b/lib/src/inputs/bool/bool_field.dart index e0eaa3e..79acd7c 100644 --- a/lib/src/inputs/bool/bool_field.dart +++ b/lib/src/inputs/bool/bool_field.dart @@ -85,7 +85,6 @@ class _BoolWidgetState extends State { focusNode: widget.focusNode, onChanged: onChanged, ); - break; case BoolWidgetType.checkbox: child = Checkbox( @@ -97,7 +96,6 @@ class _BoolWidgetState extends State { } }, ); - break; } return Column( diff --git a/lib/src/inputs/date_picker/date_picker_field.dart b/lib/src/inputs/date_picker/date_picker_field.dart index b614d8e..576fe35 100644 --- a/lib/src/inputs/date_picker/date_picker_field.dart +++ b/lib/src/inputs/date_picker/date_picker_field.dart @@ -107,7 +107,7 @@ class _DateInputFieldState extends State { 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 { } } }); - break; + case FlutterFormDateTimeType.range: if (context.mounted) { userInput = await showDateRangePicker( @@ -147,7 +147,7 @@ class _DateInputFieldState extends State { : '', ); } - break; + case FlutterFormDateTimeType.time: if (context.mounted) { userInput = await showTimePicker( diff --git a/lib/src/inputs/phone/phone.dart b/lib/src/inputs/phone/phone.dart index 418e4d5..a2c2f68 100644 --- a/lib/src/inputs/phone/phone.dart +++ b/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.dialCodeSelectorWidth = 100, - this.dialCodeWrapper, + this.textAlignVertical = TextAlignVertical.top, + this.dialCodeSelectorPadding = const EdgeInsets.only(top: 6), }); final InputDecoration? decoration; @@ -37,9 +36,8 @@ class FlutterFormInputPhone extends StatefulWidget { final TextStyle? dialCodeSelectorStyle; final bool enabled; final List? priorityCountries; - final Widget? dialCodeSelectorUnderline; - final double dialCodeSelectorWidth; - final Widget Function(Widget child)? dialCodeWrapper; + final EdgeInsets dialCodeSelectorPadding; + final TextAlignVertical textAlignVertical; @override State createState() => _FlutterFormInputPhoneState(); @@ -87,68 +85,62 @@ 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, + 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: 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(() { - _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, + ], + onChanged: (value) { + if (value != null) { + setState(() { + _selectedCountry = value; + }); + } + }, ), ), - ], + ), + keyboardType: TextInputType.phone, + enabled: widget.enabled, + textAlignVertical: widget.textAlignVertical, ); } } diff --git a/lib/src/inputs/phone/phone_number_model.dart b/lib/src/inputs/phone/phone_number_model.dart index 25f0d15..54ae16b 100644 --- a/lib/src/inputs/phone/phone_number_model.dart +++ b/lib/src/inputs/phone/phone_number_model.dart @@ -1,5 +1,5 @@ class PhoneNumber { - PhoneNumber({ + const PhoneNumber({ this.dialCode, this.number, }); diff --git a/pubspec.yaml b/pubspec.yaml index 8fb418a..fc64213 100644 --- a/pubspec.yaml +++ b/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: