chandrabezzo · maudevnc · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023
diff --git 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<CountryCodePicker> {
   CountryCode? selectedItem;
   List<CountryCode> elements = [];
-  List<CountryCode> favoriteElements = [];
+  List<CountryCode> favoriteElements = [
+
+  ];
 
   CountryCodePickerState(this.elements);
 
@@ -295,6 +301,21 @@ class CountryCodePickerState extends State<CountryCodePicker> {
   }
 
   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<CountryCodePicker> {
             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<CountryCodePicker> {
             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
@@ -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
@@ -1,4 +1,19 @@
 const List<Map<String, String>> 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<Map<String, String>> 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
@@ -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<SelectionDialog> {
         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<SelectionDialog> {
             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<SelectionDialog> {
                                   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<SelectionDialog> {
                           onTap: () {
                             _selectItem(e);
                           },
-                          child: Padding(
-                          padding: widget.dialogItemPadding,
-                            child: _buildOption(e),
-                          )
+                          child: _buildOption(e)
                         )
                       ),
                   ],
@@ -153,23 +176,30 @@ class _SelectionDialogState extends State<SelectionDialog> {
       );
 
   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: <Widget>[
           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<SelectionDialog> {
       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),
+      ),
     );
   }