Merge pull request #47 from chandrabezzo/update-3.2.0

Update 3.2.0

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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
 

example/lib/main.dart

@@ -121,6 +121,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,13 +151,17 @@ class CountryCodePicker extends StatefulWidget {
     this.dialogBackgroundColor,
     this.closeIcon = const Icon(Icons.close),
     this.countryList = codes,
-    this.dialogItemPadding = const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
+    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.headerTextStyle = const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+    this.headerTextStyle =
+        const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
     this.hideHeaderText = false,
-    this.topBarPadding = const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20),
+    this.topBarPadding =
+        const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20),
     Key? key,
   }) : super(key: key);
 
@@ -159,18 +170,25 @@ class CountryCodePicker extends StatefulWidget {
   State<StatefulWidget> createState() {
     List<Map<String, String>> jsonList = countryList;
 
-    List<CountryCode> elements = jsonList.map((json) => CountryCode.fromJson(json)).toList();
+    List<CountryCode> elements =
+        jsonList.map((json) => CountryCode.fromJson(json)).toList();
 
     if (comparator != null) {
       elements.sort(comparator);
     }
 
     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();
+      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();
     }
 
-    return CountryCodePickerState(elements);
+    return CountryCodePickerState(elements, pickerStyle);
   }
 }
 
@@ -178,34 +196,48 @@ 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(
             direction: Axis.horizontal,
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              if (widget.showFlagMain != null ? widget.showFlagMain! : widget.showFlag)
+              if (widget.showFlagMain != null
+                  ? widget.showFlagMain!
+                  : widget.showFlag)
                 Flexible(
                   flex: widget.alignLeft ? 0 : 1,
                   fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
                   child: Container(
-                    clipBehavior: widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
+                    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',
@@ -217,8 +249,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
                 Flexible(
                   fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
                   child: Text(
-                    widget.showOnlyCountryWhenClosed ? selectedItem!.toCountryStringOnly() : selectedItem.toString(),
-                    style: widget.textStyle ?? Theme.of(context).textTheme.labelLarge,
+                    widget.showOnlyCountryWhenClosed
+                        ? selectedItem!.toCountryStringOnly()
+                        : selectedItem.toString(),
+                    style: widget.textStyle ??
+                        Theme.of(context).textTheme.labelLarge,
                     overflow: widget.textOverflow,
                   ),
                 ),
@@ -227,7 +262,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,
@@ -258,9 +295,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
       if (widget.initialSelection != null) {
         selectedItem = elements.firstWhere(
             (criteria) =>
-                (criteria.code!.toUpperCase() == widget.initialSelection!.toUpperCase()) ||
+                (criteria.code!.toUpperCase() ==
+                    widget.initialSelection!.toUpperCase()) ||
                 (criteria.dialCode == widget.initialSelection) ||
-                (criteria.name!.toUpperCase() == widget.initialSelection!.toUpperCase()),
+                (criteria.name!.toUpperCase() ==
+                    widget.initialSelection!.toUpperCase()),
             orElse: () => elements[0]);
       } else {
         selectedItem = elements[0];
@@ -276,9 +315,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
     if (widget.initialSelection != null) {
       selectedItem = elements.firstWhere(
           (item) =>
-              (item.code!.toUpperCase() == widget.initialSelection!.toUpperCase()) ||
+              (item.code!.toUpperCase() ==
+                  widget.initialSelection!.toUpperCase()) ||
               (item.dialCode == widget.initialSelection) ||
-              (item.name!.toUpperCase() == widget.initialSelection!.toUpperCase()),
+              (item.name!.toUpperCase() ==
+                  widget.initialSelection!.toUpperCase()),
           orElse: () => elements[0]);
     } else {
       selectedItem = elements[0];
@@ -286,14 +327,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 +380,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/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  
-version: 3.1.0
+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.2.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