Styling Options

README.md

@@ -22,11 +22,11 @@ A flutter package to select a country from a list of countries.
   Show country picker using `showCountryPicker`:
 ```Dart
 showCountryPicker(
-   context: context,
-   showPhoneCode: true, // optional. Shows phone code before the country name.
-   onSelect: (Country country) {
-      print('Select country: ${country.displayName}');
-   },
+  context: context,
+  showPhoneCode: true, // optional. Shows phone code before the country name.
+  onSelect: (Country country) {
+    print('Select country: ${country.displayName}');
+  },
 );
 ```
 
@@ -50,10 +50,10 @@ MaterialApp(
 ```
 
 ### Parameters:
-* `onSelect`: Called when a country is select. The country picker passes the new value to the callback (required)
-* `onClosed`: Called when CountryPicker is dismiss, whether a country is selected or not (optional).
-* `showPhoneCode`: Can be used to to show phone code before the country name.
-* `countryListTheme`: Can be used to customizing the country list bottom sheet. (optional). 
+* `onSelect`: Called when a country is selected. The country picker passes the new value to the callback (required)
+* `onClosed`: Called when CountryPicker is dismissed, whether a country is selected or not (optional).
+* `showPhoneCode`: Can be used to show phone code before the country name.
+* `countryListTheme`: Can be used to customize the country list's bottom sheet. (optional). 
   ```Dart
   showCountryPicker(
     context: context,
@@ -73,9 +73,44 @@ MaterialApp(
     onSelect: (Country country) => print('Select country: ${country.displayName}'),
   );
   ```
-* `countryFilter`: Can be used to 	uses filter the countries list (optional). 
+* `countryFilter`: Can be used to filter the countries list (optional). 
   - It takes a list of country code(iso2). 
   - Can't provide both exclude and countryFilter
 
+* `borderRadius`: Can be used to set the bottom sheet's border radius. (optional).
+  ```Dart
+  showCountryPicker(
+    context: context,
+    onSelect: (Country country) {
+      print('Select country: ${country.displayName}');
+    },
+    //Optional. Sets the border radius for the bottomsheet.
+    borderRadius: BorderRadius.only(
+      topLeft: Radius.circular(20.0),
+      topRight: Radius.circular(20.0),
+    ),
+  );
+  ```
+* `inputDecoration`: Can be used to customize the search field. (optional). 
+  ```Dart
+  showCountryPicker(
+    context: context,
+    onSelect: (Country country) {
+      print('Select country: ${country.displayName}');
+    },
+    //Optional. Styles the search field.
+    inputDecoration: InputDecoration(
+      labelText: 'Search',
+      hintText: 'Start typing to search',
+      prefixIcon: const Icon(Icons.search),
+      border: OutlineInputBorder(
+        borderSide: BorderSide(
+          color: const Color(0xFF8C98A8).withOpacity(0.2),
+        ),
+      ),
+    ),
+  );
+  ```
+
 ## Contributions
 Contributions of any kind are more than welcome! Feel free to fork and improve country_code_picker in any way you want, make a pull request, or open an issue.

example/lib/main.dart

@@ -23,8 +23,12 @@ class MyApp extends StatelessWidget {
         const Locale('pt'),
         const Locale('ru'),
         const Locale('uk'),
-        const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // Generic Simplified Chinese 'zh_Hans'
-        const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // Generic traditional Chinese 'zh_Hant'
+        const Locale.fromSubtags(
+            languageCode: 'zh',
+            scriptCode: 'Hans'), // Generic Simplified Chinese 'zh_Hans'
+        const Locale.fromSubtags(
+            languageCode: 'zh',
+            scriptCode: 'Hant'), // Generic traditional Chinese 'zh_Hant'
       ],
       localizationsDelegates: [
         CountryLocalizations.delegate,
@@ -55,6 +59,22 @@ class HomePage extends StatelessWidget {
               onSelect: (Country country) {
                 print('Select country: ${country.displayName}');
               },
+              //Optional. Sets the border radius for the bottomsheet.
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(20.0),
+                topRight: Radius.circular(20.0),
+              ),
+              //Optional. Styles the search field.
+              inputDecoration: InputDecoration(
+                labelText: 'Search',
+                hintText: 'Start typing to search',
+                prefixIcon: const Icon(Icons.search),
+                border: OutlineInputBorder(
+                  borderSide: BorderSide(
+                    color: const Color(0xFF8C98A8).withOpacity(0.2),
+                  ),
+                ),
+              ),
             );
           },
           child: const Text('Show country picker'),

example/pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -111,7 +111,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
@@ -146,7 +146,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19"
+    version: "0.3.0"
   typed_data:
     dependency: transitive
     description:

lib/country_picker.dart

@@ -38,6 +38,12 @@ void showCountryPicker({
   List<String>? countryFilter,
   bool showPhoneCode = false,
   CountryListThemeData? countryListTheme,
+  InputDecoration? inputDecoration,
+  BorderRadius? borderRadius = const BorderRadius.only(
+    topLeft: Radius.circular(40.0),
+    topRight: Radius.circular(40.0),
+  ),
+  // InputDecoration? inputDecoration
 }) {
   assert(exclude == null || countryFilter == null,
       'Cannot provide both exclude and countryFilter');
@@ -49,5 +55,7 @@ void showCountryPicker({
     countryFilter: countryFilter,
     showPhoneCode: showPhoneCode,
     countryListTheme: countryListTheme,
+    borderRadius: borderRadius,
+    inputDecoration: inputDecoration,
   );
 }

lib/src/country_list_bottom_sheet.dart

@@ -12,6 +12,11 @@ void showCountryListBottomSheet({
   List<String>? countryFilter,
   bool showPhoneCode = false,
   CountryListThemeData? countryListTheme,
+  InputDecoration? inputDecoration,
+  BorderRadius? borderRadius = const BorderRadius.only(
+    topLeft: Radius.circular(40.0),
+    topRight: Radius.circular(40.0),
+  ),
 }) {
   showModalBottomSheet(
     context: context,
@@ -24,6 +29,8 @@ void showCountryListBottomSheet({
       countryFilter,
       showPhoneCode,
       countryListTheme,
+      inputDecoration,
+      borderRadius,
     ),
   ).whenComplete(() {
     if (onClosed != null) onClosed();
@@ -37,6 +44,8 @@ Widget _builder(
   List<String>? countryFilter,
   bool showPhoneCode,
   CountryListThemeData? countryListTheme,
+  InputDecoration? inputDecoration,
+  BorderRadius? borderRadius,
 ) {
   final device = MediaQuery.of(context).size.height;
   final statusBarHeight = MediaQuery.of(context).padding.top;
@@ -56,17 +65,15 @@ Widget _builder(
     height: height,
     decoration: BoxDecoration(
       color: _backgroundColor,
-      borderRadius: const BorderRadius.only(
-        topLeft: Radius.circular(40.0),
-        topRight: Radius.circular(40.0),
-      ),
+      borderRadius: borderRadius,
     ),
     child: CountryListView(
       onSelect: onSelect,
       exclude: exclude,
       countryFilter: countryFilter,
       showPhoneCode: showPhoneCode,
       countryListTheme: countryListTheme,
+      inputDecoration: inputDecoration,
     ),
   );
 }

lib/src/country_list_view.dart

@@ -24,17 +24,21 @@ class CountryListView extends StatefulWidget {
   /// Note: Can't provide both [countryFilter] and [exclude]
   final List<String>? countryFilter;
 
-  /// An optional argument for for customizing the
+  /// An optional argument for customizing the
   /// country list bottom sheet.
   final CountryListThemeData? countryListTheme;
 
+  /// An optional argument for styling the search field.
+  final InputDecoration? inputDecoration;
+
   const CountryListView({
     Key? key,
     required this.onSelect,
     this.exclude,
     this.countryFilter,
     this.showPhoneCode = false,
     this.countryListTheme,
+    this.inputDecoration,
   })  : assert(exclude == null || countryFilter == null,
             'Cannot provide both exclude and countryFilter'),
         super(key: key);
@@ -87,16 +91,17 @@ class _CountryListViewState extends State<CountryListView> {
           padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
           child: TextField(
             controller: _searchController,
-            decoration: InputDecoration(
-              labelText: searchLabel,
-              hintText: searchLabel,
-              prefixIcon: const Icon(Icons.search),
-              border: OutlineInputBorder(
-                borderSide: BorderSide(
-                  color: const Color(0xFF8C98A8).withOpacity(0.2),
+            decoration: widget.inputDecoration ??
+                InputDecoration(
+                  labelText: searchLabel,
+                  hintText: searchLabel,
+                  prefixIcon: const Icon(Icons.search),
+                  border: OutlineInputBorder(
+                    borderSide: BorderSide(
+                      color: const Color(0xFF8C98A8).withOpacity(0.2),
+                    ),
+                  ),
                 ),
-              ),
-            ),
             onChanged: _filterSearchResults,
           ),
         ),

pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.0"
+    version: "2.6.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -99,7 +99,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.8.1"
   stack_trace:
     dependency: transitive
     description:
@@ -134,7 +134,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.19"
+    version: "0.3.0"
   typed_data:
     dependency: transitive
     description: