Merge pull request #134 from lordvidex/feature/flag-decorations

Added flagDecoration feature to allow for flexibility in flag design/shape etc

README.md

@@ -158,6 +158,7 @@ Here is a list of properties available to customize your widget:
 |showFlagMain| bool | shows the flag only when closed |
 |showFlagDialog| bool | shows the flag only in dialog |
 |flagWidth| double | the width of the flags |
+|flagDecoration| Decoration | used for styling the flags |
 |comparator| Comparator<CountryCode> | use this to sort the countries in the selection dialog |
 |hideSearch| bool | if true the search feature will be disabled |
 

example/lib/main.dart

@@ -111,6 +111,16 @@ class _MyAppState extends State<MyApp> {
                 onInit: (code) =>
                     print("on init ${code.name} ${code.dialCode} ${code.name}"),
               ),
+              CountryCodePicker(
+                onChanged: print,
+                // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
+                initialSelection: 'IT',
+                favorite: ['+39', 'FR'],
+                countryFilter: ['IT', 'FR'],
+                // flag can be styled with BoxDecoration's `borderRadius` and `shape` fields
+                flagDecoration:
+                    BoxDecoration(borderRadius: BorderRadius.circular(7)),
+              ),
               SizedBox(
                 width: 400,
                 height: 60,

lib/country_code_picker.dart

@@ -6,6 +6,7 @@ import 'package:collection/collection.dart' show IterableExtension;
 import 'package:country_code_picker/country_code.dart';
 import 'package:country_code_picker/country_codes.dart';
 import 'package:country_code_picker/selection_dialog.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
 
@@ -77,6 +78,9 @@ class CountryCodePicker extends StatefulWidget {
   /// Set to true if you want to show drop down button
   final bool showDropDownButton;
 
+  /// [BoxDecoration] for the flag image
+  final Decoration flagDecoration;
+
   CountryCodePicker({
     this.onChanged,
     this.onInit,
@@ -95,6 +99,7 @@ class CountryCodePicker extends StatefulWidget {
     this.showFlagDialog,
     this.hideMainText = false,
     this.showFlagMain,
+    this.flagDecoration,
     this.builder,
     this.flagWidth = 32.0,
     this.enabled = true,
@@ -168,8 +173,11 @@ class CountryCodePickerState extends State<CountryCodePicker> {
               Flexible(
                 flex: widget.alignLeft ? 0 : 1,
                 fit: widget.alignLeft ? FlexFit.tight : FlexFit.loose,
-                child: Padding(
+                child: Container(
-                  padding: widget.alignLeft
+                  clipBehavior:
+                      widget.flagDecoration == null ? Clip.none : Clip.hardEdge,
+                  decoration: widget.flagDecoration,
+                  margin: widget.alignLeft
                       ? const EdgeInsets.only(right: 16.0, left: 8.0)
                       : const EdgeInsets.only(right: 16.0),
                   child: Image.asset(
@@ -267,42 +275,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
   }
 
   void showCountryCodePickerDialog() {
-    if (Platform.isIOS || Platform.isAndroid) {
+    if (kIsWeb || (!Platform.isIOS && !Platform.isAndroid)) {
-      showMaterialModalBottomSheet(
-        barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5),
-        backgroundColor: widget.backgroundColor ?? Colors.transparent,
-        context: context,
-        builder: (context) => Center(
-          child: SelectionDialog(
-            elements,
-            favoriteElements,
-            showCountryOnly: widget.showCountryOnly,
-            emptySearchBuilder: widget.emptySearchBuilder,
-            searchDecoration: widget.searchDecoration,
-            searchStyle: widget.searchStyle,
-            textStyle: widget.dialogTextStyle,
-            boxDecoration: widget.boxDecoration,
-            showFlag: widget.showFlagDialog != null
-                ? widget.showFlagDialog
-                : widget.showFlag,
-            flagWidth: widget.flagWidth,
-            size: widget.dialogSize,
-            backgroundColor: widget.dialogBackgroundColor,
-            barrierColor: widget.barrierColor,
-            hideSearch: widget.hideSearch,
-            closeIcon: widget.closeIcon,
-          ),
-        ),
-      ).then((e) {
-        if (e != null) {
-          setState(() {
-            selectedItem = e;
-          });
-
-          _publishSelection(e);
-        }
-      });
-    } else {
       showDialog(
         barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5),
         // backgroundColor: widget.backgroundColor ?? Colors.transparent,
@@ -339,6 +312,42 @@ class CountryCodePickerState extends State<CountryCodePicker> {
             selectedItem = e;
           });
 
+          _publishSelection(e);
+        }
+      });
+    } else {
+      showMaterialModalBottomSheet(
+        barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5),
+        backgroundColor: widget.backgroundColor ?? Colors.transparent,
+        context: context,
+        builder: (context) => Center(
+          child: SelectionDialog(
+            elements,
+            favoriteElements,
+            showCountryOnly: widget.showCountryOnly,
+            emptySearchBuilder: widget.emptySearchBuilder,
+            searchDecoration: widget.searchDecoration,
+            searchStyle: widget.searchStyle,
+            textStyle: widget.dialogTextStyle,
+            boxDecoration: widget.boxDecoration,
+            showFlag: widget.showFlagDialog != null
+                ? widget.showFlagDialog
+                : widget.showFlag,
+            flagWidth: widget.flagWidth,
+            flagDecoration: widget.flagDecoration,
+            size: widget.dialogSize,
+            backgroundColor: widget.dialogBackgroundColor,
+            barrierColor: widget.barrierColor,
+            hideSearch: widget.hideSearch,
+            closeIcon: widget.closeIcon,
+          ),
+        ),
+      ).then((e) {
+        if (e != null) {
+          setState(() {
+            selectedItem = e;
+          });
+
           _publishSelection(e);
         }
       });

lib/selection_dialog.dart

@@ -12,6 +12,7 @@ class SelectionDialog extends StatefulWidget {
   final WidgetBuilder? emptySearchBuilder;
   final bool? showFlag;
   final double flagWidth;
+  final Decoration? flagDecoration;
   final Size? size;
   final bool hideSearch;
   final Icon? closeIcon;
@@ -36,6 +37,7 @@ class SelectionDialog extends StatefulWidget {
     this.textStyle,
     this.boxDecoration,
     this.showFlag,
+    this.flagDecoration,
     this.flagWidth = 32,
     this.size,
     this.backgroundColor,
@@ -142,8 +144,11 @@ class _SelectionDialogState extends State<SelectionDialog> {
         children: <Widget>[
           if (widget.showFlag!)
             Flexible(
-              child: Padding(
+              child: Container(
-                padding: const EdgeInsets.only(right: 16.0),
+                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',