feat: hongkong to chinese hongkong

Fix Typos, Localization Issue, and Syria Flag Issue in CountryCodePicker #50, #48, #45

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 3.3.0 - March 26 2025
+- Fix localization, typo, and flag issue #51 thanks to @MrRoy121
+
+## 3.2.0 - January 31 2025
+- Add country code picker style #6
+- Remove Special Character #37
+- Fixes for Flutter and Dart SDK Updates and Enhancements #44
+
 ## 3.1.0 - October 24 2024
 - Add some improvement
 

README.md

@@ -57,8 +57,9 @@ void _onCountryChange(CountryCode countryCode) {
 
 ### i18n
 
-Just add the `CountryLocalizations.delegate` in the list of your app delegates
+Just add the `CountryLocalizations.delegate` in the list of your app delegates 
 
+### Default Usage (Localization Enabled)
 ```dart
  return new MaterialApp(
       supportedLocales: [
@@ -140,9 +141,19 @@ Just add the `CountryLocalizations.delegate` in the list of your app delegates
       ],
 ```
 
+### Force English (Localization Disabled)
+```dart
+ return new MaterialApp(
+      localizationsDelegates: [
+        CountryLocalizations.delegate(enableLocalization: false),
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+      ],
+```
+
 ## Customization
 
-Here is a list of properties available to customize your widget:
+Here is a list of properties available to customizeccc your widget:
 
 | Name | Type | Description |
 |-----|-----|------|
@@ -198,7 +209,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/chandra-abdul-fattah"><img src="https://avatars.githubusercontent.com/u/16184998?v=4?s=100" width="100px;" alt="Chandra Abdul Fattah"/><br /><sub><b>Chandra Abdul Fattah</b></sub></a><br /><a href="#infra-chandrabezzo" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/chandrabezzo/CountryCodePicker/commits?author=chandrabezzo" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/imtoori"><img src="https://avatars.githubusercontent.com/u/20601437?v=4?s=100" width="100px;" alt="Salvatore Giordano"/><br /><sub><b>Salvatore Giordano</b></sub></a><br /><a href="#infra-imtoori" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/chandrabezzo/CountryCodePicker/commits?author=imtoori" title="Code">💻</a></td>
-    </tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/nilashish-roy-b8a4a0171/"><img src="https://avatars.githubusercontent.com/u/96123041?v=4?s=100" width="100px;" alt="Nilashish Roy"/><br /><sub><b>Nilashish Roy</b></sub></a><br /><a href="#infra-mrroy121" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/chandrabezzo/CountryCodePicker/commits?author=mrroy121" title="Code">💻</a></td>
+   </tr>
   </tbody>
 </table>
 

example/lib/main.dart

@@ -89,6 +89,7 @@ class MyAppState extends State<MyApp> {
       ],
       localizationsDelegates: const [
         CountryLocalizations.delegate,
+       /// CountryLocalizations.getDelegate(enableLocalization: false),  // For no localization only english just declare delegate this way.
         GlobalMaterialLocalizations.delegate,
         GlobalWidgetsLocalizations.delegate,
       ],
@@ -121,6 +122,7 @@ class MyAppState extends State<MyApp> {
                 flagDecoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(7),
                 ),
+                pickerStyle: PickerStyle.bottomSheet,
               ),
               const SizedBox(
                 width: 400,

lib/country_code_picker.dart

@@ -3,6 +3,8 @@ library country_code_picker;
 import 'package:collection/collection.dart' show IterableExtension;
 import 'package:flutter/material.dart';
 
+import 'src/bottom_sheet.dart';
+import 'src/constants.dart';
 import 'src/country_code.dart';
 import 'src/country_codes.dart';
 import 'src/selection_dialog.dart';
@@ -11,6 +13,8 @@ export 'src/country_code.dart';
 export 'src/country_codes.dart';
 export 'src/country_localizations.dart';
 export 'src/selection_dialog.dart';
+export 'src/bottom_sheet.dart';
+export 'src/constants.dart';
 
 class CountryCodePicker extends StatefulWidget {
   final ValueChanged<CountryCode>? onChanged;
@@ -30,6 +34,9 @@ class CountryCodePicker extends StatefulWidget {
   final TextOverflow textOverflow;
   final Icon closeIcon;
 
+  ///Picker style [BottomSheet] or [Dialog]
+  final PickerStyle pickerStyle;
+
   /// Barrier color of ModalBottomSheet
   final Color? barrierColor;
 
@@ -144,10 +151,11 @@ class CountryCodePicker extends StatefulWidget {
     this.dialogBackgroundColor,
     this.closeIcon = const Icon(Icons.close),
     this.countryList = codes,
+    this.pickerStyle = PickerStyle.dialog,
     this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
     this.searchPadding = const EdgeInsets.symmetric(horizontal: 24),
     this.headerAlignment = MainAxisAlignment.spaceBetween,
-    this.headerText = "Select County",
+    this.headerText = "Select Country",
     this.headerTextStyle = const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
     this.hideHeaderText = false,
     this.topBarPadding = const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20),
@@ -167,10 +175,15 @@ class CountryCodePicker extends StatefulWidget {
 
     if (countryFilter != null && countryFilter!.isNotEmpty) {
       final uppercaseCustomList = countryFilter!.map((criteria) => criteria.toUpperCase()).toList();
-      elements = elements.where((criteria) => uppercaseCustomList.contains(criteria.code) || uppercaseCustomList.contains(criteria.name) || uppercaseCustomList.contains(criteria.dialCode)).toList();
+      elements = elements
+          .where((criteria) =>
+              uppercaseCustomList.contains(criteria.code) ||
+              uppercaseCustomList.contains(criteria.name) ||
+              uppercaseCustomList.contains(criteria.dialCode))
+          .toList();
     }
 
-    return CountryCodePickerState(elements);
+    return CountryCodePickerState(elements, pickerStyle);
   }
 }
 
@@ -178,20 +191,25 @@ class CountryCodePickerState extends State<CountryCodePicker> {
   CountryCode? selectedItem;
   List<CountryCode> elements = [];
   List<CountryCode> favoriteElements = [];
+  PickerStyle pickerStyle;
 
-  CountryCodePickerState(this.elements);
+  CountryCodePickerState(this.elements, this.pickerStyle);
 
   @override
   Widget build(BuildContext context) {
     Widget internalWidget;
     if (widget.builder != null) {
       internalWidget = InkWell(
-        onTap: widget.enabled ? showCountryCodePickerDialog : null,
+        onTap: pickerStyle == PickerStyle.dialog ? showCountryCodePickerDialog : showCountryCodePickerBottomSheet,
         child: widget.builder!(selectedItem),
       );
     } else {
       internalWidget = TextButton(
-        onPressed: widget.enabled ? showCountryCodePickerDialog : null,
+        onPressed: widget.enabled
+            ? pickerStyle == PickerStyle.dialog
+                ? showCountryCodePickerDialog
+                : showCountryCodePickerBottomSheet
+            : null,
         child: Padding(
           padding: widget.padding,
           child: Flex(
@@ -205,7 +223,10 @@ class CountryCodePickerState extends State<CountryCodePicker> {
                   child: Container(
                     clipBehavior: widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
                     decoration: widget.flagDecoration,
-                    margin: widget.margin ?? (widget.alignLeft ? const EdgeInsets.only(right: 16.0, left: 8.0) : const EdgeInsets.only(right: 16.0)),
+                    margin: widget.margin ??
+                        (widget.alignLeft
+                            ? const EdgeInsets.only(right: 16.0, left: 8.0)
+                            : const EdgeInsets.only(right: 16.0)),
                     child: Image.asset(
                       selectedItem!.flagUri!,
                       package: 'country_code_picker',
@@ -227,7 +248,9 @@ class CountryCodePickerState extends State<CountryCodePicker> {
                   flex: widget.alignLeft ? 0 : 1,
                   fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
                   child: Padding(
-                      padding: (widget.alignLeft ? const EdgeInsets.only(right: 16.0, left: 8.0) : const EdgeInsets.only(right: 16.0)),
+                      padding: (widget.alignLeft
+                          ? const EdgeInsets.only(right: 16.0, left: 8.0)
+                          : const EdgeInsets.only(right: 16.0)),
                       child: Icon(
                         Icons.arrow_drop_down,
                         color: Colors.grey,
@@ -286,14 +309,17 @@ class CountryCodePickerState extends State<CountryCodePicker> {
 
     favoriteElements = elements
         .where((item) =>
-            widget.favorite.firstWhereOrNull((criteria) => item.code!.toUpperCase() == criteria.toUpperCase() || item.dialCode == criteria || item.name!.toUpperCase() == criteria.toUpperCase()) !=
+            widget.favorite.firstWhereOrNull((criteria) =>
+                item.code!.toUpperCase() == criteria.toUpperCase() ||
+                item.dialCode == criteria ||
+                item.name!.toUpperCase() == criteria.toUpperCase()) !=
             null)
         .toList();
   }
 
   void showCountryCodePickerDialog() async {
     final item = await showDialog(
-      barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5),
+      barrierColor: widget.barrierColor ?? Colors.grey.withAlpha(128),
       context: context,
       builder: (context) => Center(
         child: Dialog(
@@ -336,6 +362,43 @@ class CountryCodePickerState extends State<CountryCodePicker> {
     }
   }
 
+  void showCountryCodePickerBottomSheet() async {
+    final item = await showModalBottomSheet(
+      isScrollControlled: true,
+      context: context,
+      backgroundColor: Colors.transparent,
+      elevation: 0,
+      builder: (ctx) {
+        return SelectionBottomSheet(
+          elements,
+          favoriteElements,
+          showCountryOnly: widget.showCountryOnly,
+          emptySearchBuilder: widget.emptySearchBuilder,
+          searchDecoration: widget.searchDecoration,
+          searchStyle: widget.searchStyle,
+          textStyle: widget.dialogTextStyle,
+          boxDecoration: widget.boxDecoration,
+          showFlag: widget.showFlagDialog ?? widget.showFlag,
+          flagWidth: widget.flagWidth,
+          size: widget.dialogSize,
+          backgroundColor: widget.dialogBackgroundColor,
+          barrierColor: widget.barrierColor,
+          hideSearch: widget.hideSearch,
+          closeIcon: widget.closeIcon,
+          flagDecoration: widget.flagDecoration,
+        );
+      },
+    );
+
+    if (item == null) return;
+
+    setState(() {
+      selectedItem = item;
+    });
+
+    _publishSelection(item);
+  }
+
   void _publishSelection(CountryCode countryCode) {
     if (widget.onChanged != null) {
       widget.onChanged!(countryCode);

lib/src/bottom_sheet.dart

@@ -0,0 +1,208 @@
+import 'package:flutter/material.dart';
+
+import 'country_code.dart';
+import 'country_localizations.dart';
+
+/// selection bottom sheet used for selection of the country code
+class SelectionBottomSheet extends StatefulWidget {
+  final List<CountryCode> elements;
+  final bool? showCountryOnly;
+  final InputDecoration searchDecoration;
+  final TextStyle? searchStyle;
+  final TextStyle? textStyle;
+  final BoxDecoration? boxDecoration;
+  final WidgetBuilder? emptySearchBuilder;
+  final bool? showFlag;
+  final double flagWidth;
+  final Decoration? flagDecoration;
+  final Size? size;
+  final bool hideSearch;
+  final Icon? closeIcon;
+
+  /// Background color of SelectionBottomSheet
+  final Color? backgroundColor;
+
+  /// Boxshaow color of SelectionBottomSheet that matches CountryCodePicker barrier color
+  final Color? barrierColor;
+
+  /// elements passed as favorite
+  final List<CountryCode> favoriteElements;
+
+  SelectionBottomSheet(
+    this.elements,
+    this.favoriteElements, {
+    Key? key,
+    this.showCountryOnly,
+    this.emptySearchBuilder,
+    InputDecoration searchDecoration = const InputDecoration(),
+    this.searchStyle,
+    this.textStyle,
+    this.boxDecoration,
+    this.showFlag,
+    this.flagDecoration,
+    this.flagWidth = 32,
+    this.size,
+    this.backgroundColor,
+    this.barrierColor,
+    this.hideSearch = false,
+    this.closeIcon,
+  })  : searchDecoration = searchDecoration.prefixIcon == null
+            ? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search))
+            : searchDecoration,
+        super(key: key);
+
+  @override
+  State<StatefulWidget> createState() => _SelectionBottomSheetState();
+}
+
+class _SelectionBottomSheetState extends State<SelectionBottomSheet> {
+  /// this is useful for filtering purpose
+  late List<CountryCode> filteredElements;
+
+  @override
+  Widget build(BuildContext context) => Padding(
+        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,
+          decoration: widget.boxDecoration ??
+              BoxDecoration(
+                color: widget.backgroundColor ?? Colors.white,
+                borderRadius: const BorderRadius.all(Radius.circular(8.0)),
+                boxShadow: [
+                  BoxShadow(
+                    color: widget.barrierColor ?? Colors.grey
+                      ..withAlpha(255),
+                    spreadRadius: 5,
+                    blurRadius: 7,
+                    offset: const Offset(0, 3), // changes position of shadow
+                  ),
+                ],
+              ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              IconButton(
+                padding: const EdgeInsets.all(0),
+                iconSize: 20,
+                icon: widget.closeIcon!,
+                onPressed: () => Navigator.pop(context),
+              ),
+              if (!widget.hideSearch)
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 24),
+                  child: TextField(
+                    style: widget.searchStyle,
+                    decoration: widget.searchDecoration,
+                    onChanged: _filterElements,
+                  ),
+                ),
+              Expanded(
+                child: ListView(
+                  children: [
+                    widget.favoriteElements.isEmpty
+                        ? const DecoratedBox(decoration: BoxDecoration())
+                        : Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              ...widget.favoriteElements.map(
+                                (f) => SimpleDialogOption(
+                                  child: _buildOption(f),
+                                  onPressed: () {
+                                    _selectItem(f);
+                                  },
+                                ),
+                              ),
+                              const Divider(),
+                            ],
+                          ),
+                    if (filteredElements.isEmpty)
+                      _buildEmptySearchWidget(context)
+                    else
+                      ...filteredElements.map(
+                        (e) => SimpleDialogOption(
+                          child: _buildOption(e),
+                          onPressed: () {
+                            _selectItem(e);
+                          },
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+
+  Widget _buildOption(CountryCode e) {
+    return SizedBox(
+      width: 400,
+      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,
+                ),
+              ),
+            ),
+          Expanded(
+            flex: 4,
+            child: Text(
+              widget.showCountryOnly!
+                  ? e.toCountryStringOnly()
+                  : e.toLongString(),
+              overflow: TextOverflow.fade,
+              style: widget.textStyle,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildEmptySearchWidget(BuildContext context) {
+    if (widget.emptySearchBuilder != null) {
+      return widget.emptySearchBuilder!(context);
+    }
+
+    return Center(
+      child: Text(CountryLocalizations.of(context)?.translate('no_country') ??
+          'No country found'),
+    );
+  }
+
+  @override
+  void initState() {
+    filteredElements = widget.elements;
+    super.initState();
+  }
+
+  void _filterElements(String s) {
+    s = s.toUpperCase();
+    setState(() {
+      filteredElements = widget.elements
+          .where((e) =>
+              e.code!.contains(s) ||
+              e.dialCode!.contains(s) ||
+              e.name!.toUpperCase().contains(s))
+          .toList();
+    });
+  }
+
+  void _selectItem(CountryCode e) {
+    Navigator.pop(context, e);
+  }
+}

lib/src/constants.dart

@@ -0,0 +1 @@
+enum PickerStyle { dialog, bottomSheet, fullScreen }

lib/src/country_localizations.dart

@@ -15,14 +15,17 @@ class CountryLocalizations {
     );
   }
 
-  static const LocalizationsDelegate<CountryLocalizations> delegate =
+  static const LocalizationsDelegate<CountryLocalizations> delegate = _CountryLocalizationsDelegate();
-      _CountryLocalizationsDelegate();
+
+  static LocalizationsDelegate<CountryLocalizations> getDelegate({bool enableLocalization = true}) {
+    return _CountryLocalizationsDelegate(enableLocalization: enableLocalization);
+  }
 
   late Map<String, String> _localizedStrings;
 
   Future<bool> load() async {
-    String jsonString = await rootBundle.loadString(
+    String jsonString =
-        'packages/country_code_picker/src/i18n/${locale.languageCode}.json');
+        await rootBundle.loadString('packages/country_code_picker/src/i18n/${locale.languageCode}.json');
     Map<String, dynamic> jsonMap = json.decode(jsonString);
 
     _localizedStrings = jsonMap.map((key, value) {
@@ -37,9 +40,10 @@ class CountryLocalizations {
   }
 }
 
-class _CountryLocalizationsDelegate
+class _CountryLocalizationsDelegate extends LocalizationsDelegate<CountryLocalizations> {
-    extends LocalizationsDelegate<CountryLocalizations> {
+  final bool enableLocalization;
-  const _CountryLocalizationsDelegate();
+
+  const _CountryLocalizationsDelegate({this.enableLocalization = true});
 
   @override
   bool isSupported(Locale locale) {
@@ -119,7 +123,10 @@ class _CountryLocalizationsDelegate
 
   @override
   Future<CountryLocalizations> load(Locale locale) async {
-    CountryLocalizations localizations = CountryLocalizations(const Locale('en'));//locale);
+    // Use the provided locale if localization is enabled; otherwise, use English.
+    Locale effectiveLocale = enableLocalization ? locale : const Locale('en');
+
+    CountryLocalizations localizations = CountryLocalizations(effectiveLocale);
     await localizations.load();
     return localizations;
   }

lib/src/i18n/zh.json

@@ -93,7 +93,7 @@
     "GU": "关岛",
     "GW": "几内亚比绍",
     "GY": "圭亚那",
-    "HK": "香港",
+    "HK": "中国香港",
     "HM": "赫德岛和麦克唐纳群岛",
     "HN": "洪都拉斯",
     "HR": "克罗地亚",
@@ -146,7 +146,7 @@
     "ML": "马里",
     "MM": "缅甸",
     "MN": "蒙古",
-    "MO": "澳门",
+    "MO": "中国澳门",
     "MP": "北马里亚纳群岛",
     "MQ": "马提尼克",
     "MR": "毛里塔尼亚",

lib/src/selection_dialog.dart

@@ -88,7 +88,7 @@ class _SelectionDialogState extends State<SelectionDialog> {
                 borderRadius: const BorderRadius.all(Radius.circular(8.0)),
                 boxShadow: [
                   BoxShadow(
-                    color: widget.barrierColor ?? Colors.grey.withOpacity(1),
+                    color: widget.barrierColor ?? Colors.grey.withAlpha(255),
                     spreadRadius: 5,
                     blurRadius: 7,
                     offset: const Offset(0, 3), // changes position of shadow

pubspec.yaml

@@ -1,12 +1,12 @@
 name: country_code_picker
-description: A flutter package for showing a country code selector. In addition it gives the possibility to select a list of favorites countries, as well as to search using a simple searchbox  
+description: A flutter package for showing a country code selector. In addition it gives the possibility to select a list of favorites countries, as well as to search using a simple searchbox
-version: 3.1.0
+version: 3.3.0
 homepage: https://github.com/chandrabezzo/CountryCodePicker
 repository: https://github.com/chandrabezzo/CountryCodePicker
 issue_tracker: https://github.com/imtoori/CountryCodePicker/issues
 
 environment:
-  sdk: '>=2.17.0 <4.0.0'
+  sdk: ">=2.17.0 <4.0.0"
 
 dependencies:
   flutter:
@@ -87,6 +87,6 @@ flutter:
     - packages/country_code_picker/src/i18n/uk.json
     - packages/country_code_picker/src/i18n/uz.json
     - packages/country_code_picker/src/i18n/zh.json
-    
+
 dev_dependencies:
   flutter_lints: ^2.0.1