diff --git a/CHANGELOG.md b/CHANGELOG.md index 71096e7..2c083ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,3 +37,7 @@ ## 0.1.0 * Fix refCountryCode issues in showCountrySelectorBottomSheet + +## 0.1.1 + +* Add withDialCode feature diff --git a/README.md b/README.md index 3c5ab0a..17d26f8 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,7 @@ showCountrySelectorBottomSheet( | Parameter | Description | |---|---| +| `withDialCode` | Used to determine whether show the dialCode of country or not | | `refCountryCode` | Sets the default selected country | | `customAppBar` | Sets the Custom AppBar instead of using provided default AppBar | | `bottomAppBarHeight` | Sets the height for the bottom `Continue Section` widget | @@ -90,11 +91,11 @@ showCountrySelectorBottomSheet( ## Demonstration of CountrySelectorWidget - Flutter Web -!["CountrySelectorWidget - SelectedLocale.zhCH"](https://github.com/hkk97/country_selector_widget/blob/master/example/demo_gifs/countrySelectorWidget_demo.gif?raw=true) +!["CountrySelectorWidget - SelectedLocale.zhCH"](example/demo_gifs/countrySelectorWidget_demo.gif) ## Demonstration of showCountrySelectorBottomSheet - Flutter Web -!["showCountrySelectorBottomSheet - SelectedLocale.en"](https://github.com/hkk97/country_selector_widget/blob/master/example/demo_gifs/showCountrySelectorBottomSheet.gif?raw=true) +!["showCountrySelectorBottomSheet - SelectedLocale.en"](example/demo_gifs/showCountrySelectorBottomSheet.gif) ## Demonstration of CountrySelectorWidget - Android diff --git a/example/lib/main.dart b/example/lib/main.dart index f249de9..86277b4 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -67,6 +67,8 @@ class App extends StatelessWidget { // show country selector bottom sheet widget await showCountrySelectorBottomSheet( context: context, + // enable dialCode instead of selected circle + withDialCode: true, // set the default selected country refCountryCode: "HK", onSelectedCountry: (country) async { diff --git a/lib/country_selector.dart b/lib/country_selector.dart index cef79fc..d3bf89b 100644 --- a/lib/country_selector.dart +++ b/lib/country_selector.dart @@ -13,6 +13,8 @@ import 'package:country_selector_widget/util/text_util.dart'; // func to show countryselectorbottom sheet Future showCountrySelectorBottomSheet({ required BuildContext context, + // Used to determine whether show the dialCode of country or not + bool withDialCode = false, // The refCountryCode used to indicate the default selected country String? refCountryCode, // the height of the bottomsheet @@ -98,6 +100,7 @@ Future showCountrySelectorBottomSheet({ height: bottomSheetHeight ?? MediaQuery.of(context).size.height * 0.8, child: CountrySelectorWidget( customAppBar: customAppBar, + withDialCode: withDialCode, refCountryCode: refCountryCode, bottomAppBarHeight: bottomAppBarHeight, continueBtnPadding: continueBtnPadding, @@ -132,6 +135,8 @@ Future showCountrySelectorBottomSheet({ } class CountrySelectorWidget extends StatefulWidget { + // Used to determine whether show the dialCode of country or not + final bool withDialCode; // The refCountryCode used to indicate the default selected country final String? refCountryCode; // Sets the Custom AppBar instead of using provided default AppBar @@ -190,6 +195,7 @@ class CountrySelectorWidget extends StatefulWidget { const CountrySelectorWidget({ super.key, + this.withDialCode = false, this.refCountryCode, this.customAppBar, this.bottomAppBarHeight = 75, @@ -408,6 +414,7 @@ class CountrySelectorWidgetState extends State { ), ), CountryCardWidget( + withDialCode: widget.withDialCode, aniDuration: widget.aniDuration, selectedColor: widget.selectedCardColor, selectedLocale: widget.selectedLocale, @@ -492,6 +499,7 @@ class CountrySelectorWidgetState extends State { countries[index]; } }, + withDialCode: widget.withDialCode, ); }, childCount: countries.length, @@ -573,6 +581,7 @@ class CountrySelectorWidgetState extends State { // the widget used to visualize the country object class CountryCardWidget extends StatefulWidget { + final bool withDialCode; final bool isSelected; // determine whether this widget is selected or not final Country country; // country info final Color selectedColor; // hightlighted color when widget is selected @@ -584,6 +593,7 @@ class CountryCardWidget extends StatefulWidget { const CountryCardWidget({ super.key, this.isSelected = false, + required this.withDialCode, required this.country, required this.selectedColor, required this.aniDuration, @@ -704,17 +714,29 @@ class CountryCardWidgetState extends State ), ), Container( - width: 22.5, - height: 22.5, - decoration: BoxDecoration( - shape: BoxShape.circle, - border: Border.all( - color: widget.isSelected - ? widget.selectedColor - : Colors.grey.shade300, - width: widget.isSelected ? 2 : 1.5, - ), - ), + width: widget.withDialCode ? null : 22.5, + height: widget.withDialCode ? null : 22.5, + decoration: widget.withDialCode + ? null + : BoxDecoration( + shape: BoxShape.circle, + border: Border.all( + color: widget.isSelected + ? widget.selectedColor + : Colors.grey.shade300, + width: widget.isSelected ? 2 : 1.5, + ), + ), + child: widget.withDialCode + ? Text( + widget.country.dialCode, + style: const TextStyle( + color: Colors.grey, + fontWeight: FontWeight.bold, + letterSpacing: 1.15, + ), + ) + : const SizedBox(), ), ], ), diff --git a/pubspec.yaml b/pubspec.yaml index 138e5f9..631aa07 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: country_selector_widget description: Country Selector Widget provides CountrySelectorWidget and showCountrySelectorBottomSheet to fulfill the needed usage. -version: 0.1.0 +version: 0.1.1 homepage: https://hkk97.github.io/country_selector_widget/ environment: