diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index d962ff02..7d72e746 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 País', + 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); @@ -295,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, @@ -306,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, @@ -319,7 +340,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/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/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", diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 6f932fee..afedb65b 100644 --- a/lib/src/selection_dialog.dart +++ b/lib/src/selection_dialog.dart @@ -19,6 +19,9 @@ class SelectionDialog extends StatefulWidget { final bool hideSearch; final bool hideCloseIcon; final Icon? closeIcon; + final String hintText; + final TextStyle? hintTextStyle; + final String noCountryFoundMessage; /// Background color of SelectionDialog final Color? backgroundColor; @@ -53,7 +56,8 @@ 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, + this.noCountryFoundMessage = 'No country found', }) : searchDecoration = searchDecoration.prefixIcon == null ? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search)) : searchDecoration, @@ -72,18 +76,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 +95,49 @@ 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, + ), + ), + ), + ] + ), + ), + Expanded( child: ListView( children: [ @@ -121,13 +151,9 @@ class _SelectionDialogState extends State { onTap: () { _selectItem(f); }, - child: Padding( - padding: widget.dialogItemPadding, - child: _buildOption(f), - ) + child: _buildOption(f) ) ), - const Divider(), ], ), if (filteredElements.isEmpty) @@ -138,10 +164,7 @@ class _SelectionDialogState extends State { onTap: () { _selectItem(e); }, - child: Padding( - padding: widget.dialogItemPadding, - child: _buildOption(e), - ) + child: _buildOption(e) ) ), ], @@ -153,23 +176,30 @@ class _SelectionDialogState extends State { ); Widget _buildOption(CountryCode e) { - return SizedBox( + 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!) - 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: 0.0), + decoration: widget.flagDecoration, + child: Image.asset( + e.flagUri!, + package: 'country_code_picker', + width: widget.flagWidth, ), ), Expanded( @@ -192,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), + ), ); }