Merge pull request #5 from hkk97/add-feat-withDialCode

Add feat with dial code
hkk97 · Nov 12, 2022 · f0bd2dd · f0bd2dd
2 parents 522ab5c + 9bd579a
commit f0bd2dd
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -13,6 +13,8 @@ import 'package:country_selector_widget/util/text_util.dart';
 // func to show countryselectorbottom sheet
 Future<void> 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<void> 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<void> 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<CountrySelectorWidget> {
                                         ),
                                       ),
                                       CountryCardWidget(
+                                        withDialCode: widget.withDialCode,
                                         aniDuration: widget.aniDuration,
                                         selectedColor: widget.selectedCardColor,
                                         selectedLocale: widget.selectedLocale,
@@ -492,6 +499,7 @@ class CountrySelectorWidgetState extends State<CountrySelectorWidget> {
                                                     countries[index];
                                               }
                                             },
+                                            withDialCode: widget.withDialCode,
                                           );
                                         },
                                         childCount: countries.length,
@@ -573,6 +581,7 @@ class CountrySelectorWidgetState extends State<CountrySelectorWidget> {
 
 // 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<CountryCardWidget>
                     ),
                   ),
                   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
@@ -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: