From 21fecd257ab56bafc1fb68f8ea8736dd24340c83 Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 15:17:14 -0500 Subject: [PATCH 1/8] Refactor: custom select country dialog --- lib/country_code_picker.dart | 13 +++++-- lib/src/selection_dialog.dart | 72 +++++++++++++++++++++++++---------- 2 files changed, 61 insertions(+), 24 deletions(-) diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index d962ff02..1a401364 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -28,6 +28,8 @@ class CountryCodePicker extends StatefulWidget { final bool enabled; final TextOverflow textOverflow; final Icon closeIcon; + final String hintText; + final TextStyle? hintTextStyle; /// Barrier color of ModalBottomSheet final Color? barrierColor; @@ -129,7 +131,9 @@ class CountryCodePicker extends StatefulWidget { this.countryList = codes, this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8), this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), - Key? key, + this.hintText = 'Busca un Pais', + this.hintTextStyle, + Key? key, }) : super(key: key); @override @@ -162,7 +166,9 @@ class CountryCodePicker extends StatefulWidget { class CountryCodePickerState extends State { CountryCode? selectedItem; List elements = []; - List favoriteElements = []; + List favoriteElements = [ + + ]; CountryCodePickerState(this.elements); @@ -319,7 +325,8 @@ class CountryCodePickerState extends State { closeIcon: widget.closeIcon, flagDecoration: widget.flagDecoration, dialogItemPadding: widget.dialogItemPadding, - searchPadding: widget.searchPadding, + searchPadding: widget.searchPadding, + hintText: widget.hintText, ), ), ), diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 6f932fee..8efce0f8 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -19,6 +19,8 @@ class SelectionDialog extends StatefulWidget { final bool hideSearch; final bool hideCloseIcon; final Icon? closeIcon; + final String hintText; + final TextStyle? hintTextStyle; /// Background color of SelectionDialog final Color? backgroundColor; @@ -53,7 +55,7 @@ class SelectionDialog extends StatefulWidget { this.hideCloseIcon = false, this.closeIcon, this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8), - this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), + this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), required this.hintText, this.hintTextStyle, }) : searchDecoration = searchDecoration.prefixIcon == null ? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search)) : searchDecoration, @@ -72,18 +74,17 @@ class _SelectionDialogState extends State { padding: const EdgeInsets.all(0.0), child: Container( clipBehavior: Clip.hardEdge, - width: widget.size?.width ?? MediaQuery.of(context).size.width, - height: - widget.size?.height ?? MediaQuery.of(context).size.height * 0.85, + width: 296, + height: 220, decoration: widget.boxDecoration ?? BoxDecoration( color: widget.backgroundColor ?? Colors.white, - borderRadius: const BorderRadius.all(Radius.circular(8.0)), + borderRadius: const BorderRadius.all(Radius.circular(12.0)), boxShadow: [ BoxShadow( color: widget.barrierColor ?? Colors.grey.withOpacity(1), spreadRadius: 5, - blurRadius: 7, + blurRadius: 5, offset: const Offset(0, 3), // changes position of shadow ), ], @@ -92,22 +93,50 @@ class _SelectionDialogState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.end, children: [ - if (!widget.hideCloseIcon) - IconButton( - padding: const EdgeInsets.all(0), - iconSize: 20, - icon: widget.closeIcon!, - onPressed: () => Navigator.pop(context), - ), - if (!widget.hideSearch) - Padding( - padding: widget.searchPadding, - child: TextField( - style: widget.searchStyle, - decoration: widget.searchDecoration, - onChanged: _filterElements, - ), + Container( + height: 55, + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide( + width: 1, + color: Color(0xFFF0F0F0), + ) + ) + ), + + child: Row( + children: [ + const Padding( + padding: EdgeInsets.only(left: 20), + child: Icon( + Icons.search_outlined, + color: Color(0xFF929292), + size: 30 + ) + ), + + Padding( + padding: const EdgeInsets.only(left: 10), + child: SizedBox( + width: 200, + height: 40, + child: TextField( + decoration: InputDecoration( + border: InputBorder.none, + hintText: widget.hintText, + hintStyle: widget.hintTextStyle, + ), + style: widget.searchStyle, + onChanged: _filterElements, + ), + ), + ), + ] ), + ), + + //if (!widget.hideSearch) + Expanded( child: ListView( children: [ @@ -153,6 +182,7 @@ class _SelectionDialogState extends State { ); Widget _buildOption(CountryCode e) { + print(e.toLongString()); return SizedBox( width: 400, child: Flex( From 121dea319826fe92a9f2a1a2d270e4ce27c21854 Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 15:31:51 -0500 Subject: [PATCH 2/8] Refactor: resize country item --- lib/src/selection_dialog.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 8efce0f8..1ca323cf 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -185,6 +185,7 @@ class _SelectionDialogState extends State { print(e.toLongString()); return SizedBox( width: 400, + height: 73.33, child: Flex( direction: Axis.horizontal, children: [ From 91aa2f6e7d5e0a6483ab2af9bb25619b0db89dd5 Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 15:34:00 -0500 Subject: [PATCH 3/8] Refactor: resize country item --- lib/src/selection_dialog.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 1ca323cf..f3c5aa72 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -182,8 +182,8 @@ class _SelectionDialogState extends State { ); Widget _buildOption(CountryCode e) { - print(e.toLongString()); - return SizedBox( + return Container( + color: Colors.pink, width: 400, height: 73.33, child: Flex( From 22803e39c6003a3494ec86d7f0bee9a2aa7992a2 Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 16:11:30 -0500 Subject: [PATCH 4/8] Refactor: resize country item --- lib/country_code_picker.dart | 2 +- lib/src/selection_dialog.dart | 46 +++++++++++++++++------------------ 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 1a401364..05694220 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -131,7 +131,7 @@ class CountryCodePicker extends StatefulWidget { this.countryList = codes, this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8), this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), - this.hintText = 'Busca un Pais', + this.hintText = ' Busca un Pais', this.hintTextStyle, Key? key, }) : super(key: key); diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index f3c5aa72..afa303bb 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -95,6 +95,7 @@ class _SelectionDialogState extends State { children: [ Container( height: 55, + decoration: const BoxDecoration( border: Border( bottom: BorderSide( @@ -135,8 +136,6 @@ class _SelectionDialogState extends State { ), ), - //if (!widget.hideSearch) - Expanded( child: ListView( children: [ @@ -150,13 +149,9 @@ class _SelectionDialogState extends State { onTap: () { _selectItem(f); }, - child: Padding( - padding: widget.dialogItemPadding, - child: _buildOption(f), - ) + child: _buildOption(f) ) ), - const Divider(), ], ), if (filteredElements.isEmpty) @@ -167,10 +162,7 @@ class _SelectionDialogState extends State { onTap: () { _selectItem(e); }, - child: Padding( - padding: widget.dialogItemPadding, - child: _buildOption(e), - ) + child: _buildOption(e) ) ), ], @@ -183,24 +175,30 @@ class _SelectionDialogState extends State { Widget _buildOption(CountryCode e) { return Container( - color: Colors.pink, width: 400, - height: 73.33, + height: 35, + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide( + width: 1, + color: Color(0xFFF0F0F0), + ) + ) + ), child: Flex( direction: Axis.horizontal, children: [ if (widget.showFlag!) - Flexible( - child: Container( - margin: const EdgeInsets.only(right: 16.0), - decoration: widget.flagDecoration, - clipBehavior: - widget.flagDecoration == null ? Clip.none : Clip.hardEdge, - child: Image.asset( - e.flagUri!, - package: 'country_code_picker', - width: widget.flagWidth, - ), + Container( + margin: const EdgeInsets.only(right: 16.0), + padding: const EdgeInsets.only(left: 25.0), + decoration: widget.flagDecoration, + clipBehavior: + widget.flagDecoration == null ? Clip.none : Clip.hardEdge, + child: Image.asset( + e.flagUri!, + package: 'country_code_picker', + width: widget.flagWidth, ), ), Expanded( From 2d6f7eabec8bf49cf16dca0b22c2441c5b95362d Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 16:38:42 -0500 Subject: [PATCH 5/8] Refactor: p. --- lib/src/selection_dialog.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index afa303bb..955243bf 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -175,8 +175,10 @@ class _SelectionDialogState extends State { Widget _buildOption(CountryCode e) { return Container( + padding: widget.dialogItemPadding, width: 400, height: 35, + color: Colors.pink, decoration: const BoxDecoration( border: Border( bottom: BorderSide( From 1cdf9c0428814db3f4fbe405e21a5f5e18aa8a4c Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 16:46:11 -0500 Subject: [PATCH 6/8] Refactor: p. --- lib/src/selection_dialog.dart | 43 +---------------------------------- 1 file changed, 1 insertion(+), 42 deletions(-) diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 955243bf..ba38adb6 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -174,48 +174,7 @@ class _SelectionDialogState extends State { ); Widget _buildOption(CountryCode e) { - return Container( - padding: widget.dialogItemPadding, - width: 400, - height: 35, - color: Colors.pink, - decoration: const BoxDecoration( - border: Border( - bottom: BorderSide( - width: 1, - color: Color(0xFFF0F0F0), - ) - ) - ), - child: Flex( - direction: Axis.horizontal, - children: [ - if (widget.showFlag!) - Container( - margin: const EdgeInsets.only(right: 16.0), - padding: const EdgeInsets.only(left: 25.0), - decoration: widget.flagDecoration, - clipBehavior: - widget.flagDecoration == null ? Clip.none : Clip.hardEdge, - child: Image.asset( - e.flagUri!, - package: 'country_code_picker', - width: widget.flagWidth, - ), - ), - Expanded( - flex: 4, - child: Text( - widget.showCountryOnly! - ? e.toCountryStringOnly() - : e.toLongString(), - overflow: TextOverflow.fade, - style: widget.textStyle, - ), - ), - ], - ), - ); + return Text('jajajajajajajajaja'); } Widget _buildEmptySearchWidget(BuildContext context) { From 423b430c5b431d484bd6109e3b21733a02689ae9 Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 20:51:49 -0500 Subject: [PATCH 7/8] Feat: redesing selection dialog --- lib/country_code_picker.dart | 21 ++++++++++++--- lib/src/country_code.dart | 2 +- lib/src/selection_dialog.dart | 51 ++++++++++++++++++++++++++++++++--- 3 files changed, 66 insertions(+), 8 deletions(-) diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 05694220..7d72e746 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -131,7 +131,7 @@ class CountryCodePicker extends StatefulWidget { this.countryList = codes, this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8), this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), - this.hintText = ' Busca un Pais', + this.hintText = ' Busca un País', this.hintTextStyle, Key? key, }) : super(key: key); @@ -301,6 +301,21 @@ class CountryCodePickerState extends State { } void showCountryCodePickerDialog() async { + + TextStyle textStyleDefault = const TextStyle( + color: Color(0xFF929292), + fontSize: 14, + fontFamily: 'Montserrat', + fontWeight: FontWeight.w400 + ); + + TextStyle textSearchStyleDefault = const TextStyle( + color: Color(0xFFCDCDCD), + fontSize: 18, + fontFamily: 'Montserrat', + fontWeight: FontWeight.w400 + ); + final item = await showDialog( barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5), context: context, @@ -312,8 +327,8 @@ class CountryCodePickerState extends State { showCountryOnly: widget.showCountryOnly, emptySearchBuilder: widget.emptySearchBuilder, searchDecoration: widget.searchDecoration, - searchStyle: widget.searchStyle, - textStyle: widget.dialogTextStyle, + searchStyle: widget.searchStyle ?? textSearchStyleDefault, + textStyle: widget.textStyle ?? textStyleDefault, boxDecoration: widget.boxDecoration, showFlag: widget.showFlagDialog ?? widget.showFlag, flagWidth: widget.flagWidth, diff --git a/lib/src/country_code.dart b/lib/src/country_code.dart index b8a38634..acf97a5f 100644 --- a/lib/src/country_code.dart +++ b/lib/src/country_code.dart @@ -63,7 +63,7 @@ class CountryCode { @override String toString() => "$dialCode"; - String toLongString() => "$dialCode ${toCountryStringOnly()}"; + String toLongString() => "${toCountryStringOnly()} ($dialCode)"; String toCountryStringOnly() { return '$_cleanName'; diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index ba38adb6..afedb65b 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -21,6 +21,7 @@ class SelectionDialog extends StatefulWidget { final Icon? closeIcon; final String hintText; final TextStyle? hintTextStyle; + final String noCountryFoundMessage; /// Background color of SelectionDialog final Color? backgroundColor; @@ -56,6 +57,7 @@ class SelectionDialog extends StatefulWidget { this.closeIcon, this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8), this.searchPadding = const EdgeInsets.symmetric(horizontal: 24), required this.hintText, this.hintTextStyle, + this.noCountryFoundMessage = 'No country found', }) : searchDecoration = searchDecoration.prefixIcon == null ? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search)) : searchDecoration, @@ -174,7 +176,45 @@ class _SelectionDialogState extends State { ); Widget _buildOption(CountryCode e) { - return Text('jajajajajajajajaja'); + return Container( + padding: widget.dialogItemPadding, + width: 400, + height: 55, + decoration: const BoxDecoration( + border: Border( + bottom: BorderSide( + width: 1, + color: Color(0xFFF0F0F0), + ) + ) + ), + child: Flex( + direction: Axis.horizontal, + children: [ + if (widget.showFlag!) + Container( + margin: const EdgeInsets.only(right: 16.0), + padding: const EdgeInsets.only(left: 0.0), + decoration: widget.flagDecoration, + child: Image.asset( + e.flagUri!, + package: 'country_code_picker', + width: widget.flagWidth, + ), + ), + Expanded( + flex: 4, + child: Text( + widget.showCountryOnly! + ? e.toCountryStringOnly() + : e.toLongString(), + overflow: TextOverflow.fade, + style: widget.textStyle, + ), + ), + ], + ), + ); } Widget _buildEmptySearchWidget(BuildContext context) { @@ -182,9 +222,12 @@ class _SelectionDialogState extends State { return widget.emptySearchBuilder!(context); } - return Center( - child: Text(CountryLocalizations.of(context)?.translate('no_country') ?? - 'No country found'), + return Padding( + padding: const EdgeInsets.only(top: 16.0), + child: Center( + child: Text(CountryLocalizations.of(context)?.translate('no_country') ?? + widget.noCountryFoundMessage), + ), ); } From e2d6e346b759cdae482d206acba7dc9e2a5c6b14 Mon Sep 17 00:00:00 2001 From: manumochado Date: Mon, 20 Nov 2023 21:10:52 -0500 Subject: [PATCH 8/8] Feat: withot favorite --- lib/src/country_codes.dart | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/lib/src/country_codes.dart b/lib/src/country_codes.dart index 7e7c0823..5eaa1627 100644 --- a/lib/src/country_codes.dart +++ b/lib/src/country_codes.dart @@ -1,4 +1,19 @@ const List> codes = [ + { + "name": "United States", + "code": "US", + "dial_code": "+1", + }, + { + "name": "Colombia", + "code": "CO", + "dial_code": "+57", + }, + { + "name": "México", + "code": "MX", + "dial_code": "+52", + }, { "name": "افغانستان", "code": "AF", @@ -1174,11 +1189,6 @@ const List> codes = [ "code": "GB", "dial_code": "+44", }, - { - "name": "United States", - "code": "US", - "dial_code": "+1", - }, { "name": "Uruguay", "code": "UY",