Added parameter to override default behavior on web

lib/country_code_picker.dart

@@ -80,6 +80,9 @@ class CountryCodePicker extends StatefulWidget {
   /// [BoxDecoration] for the flag image
   final Decoration? flagDecoration;
 
+  /// Set to true if you want to use showMaterialModalBottomSheet instead of showDialog in platforms other than mobile
+  final bool alwaysShowAsSheet;
+
   /// An optional argument for injecting a list of countries
   /// with customized codes.
   final List<Map<String, String>> countryList;
@@ -117,6 +120,7 @@ class CountryCodePicker extends StatefulWidget {
     this.dialogSize,
     this.dialogBackgroundColor,
     this.closeIcon = const Icon(Icons.close),
+    this.alwaysShowAsSheet = false,
     this.countryList = codes,
     Key? key,
   }) : super(key: key);
@@ -282,7 +286,9 @@ class CountryCodePickerState extends State<CountryCodePicker> {
   }
 
   void showCountryCodePickerDialog() {
-    if (!UniversalPlatform.isAndroid && !UniversalPlatform.isIOS) {
+    if (!widget.alwaysShowAsSheet &&
+        !UniversalPlatform.isAndroid &&
+        !UniversalPlatform.isIOS) {
       showDialog(
         barrierColor: widget.barrierColor ?? Colors.grey.withOpacity(0.5),
         // backgroundColor: widget.backgroundColor ?? Colors.transparent,

lib/selection_dialog.dart

@@ -58,90 +58,95 @@ class _SelectionDialogState extends State<SelectionDialog> {
   /// this is useful for filtering purpose
   late List<CountryCode> filteredElements;
 
+  int get _itemCount =>
+      (widget.favoriteElements.length > 0 ? 1 : 0) + filteredElements.length;
+
+  bool get _displayFavoriteElements => widget.favoriteElements.length > 0;
+
   @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: BorderRadius.all(Radius.circular(8.0)),
-                boxShadow: [
-                  BoxShadow(
-                    color: widget.barrierColor ?? Colors.grey.withOpacity(1),
-                    spreadRadius: 5,
-                    blurRadius: 7,
-                    offset: 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),
+  Widget build(BuildContext context) {
+    return 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: BorderRadius.all(Radius.circular(8.0)),
+            boxShadow: [
+              BoxShadow(
+                color: widget.barrierColor ?? Colors.grey.withOpacity(1),
+                spreadRadius: 5,
+                blurRadius: 7,
+                offset: Offset(0, 3), // changes position of shadow
+              )
+            ],
+          ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
+          IconButton(
+            padding: EdgeInsets.zero,
+            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,
               ),
-              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(),
-                            ],
+            ),
+          Expanded(
+            child: ListView.builder(
+              itemCount: _itemCount,
+              itemBuilder: (BuildContext context, int index) {
+                if (index == 0) {
+                  if (_displayFavoriteElements ||
+                      filteredElements.length == 0) {
+                    return Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        if (_displayFavoriteElements) ...[
+                          ...widget.favoriteElements.map(
+                            (favoriteItem) => SimpleDialogOption(
+                              child: _buildOption(favoriteItem),
+                              onPressed: () => _selectItem(favoriteItem),
+                            ),
                           ),
-                    if (filteredElements.isEmpty)
-                      _buildEmptySearchWidget(context)
-                    else
-                      ...filteredElements.map(
-                        (e) => SimpleDialogOption(
-                          child: _buildOption(e),
-                          onPressed: () {
-                            _selectItem(e);
-                          },
-                        ),
-                      ),
-                  ],
-                ),
-              ),
-            ],
+                          const Divider(),
+                        ],
+                        if (filteredElements.length == 0)
+                          _buildEmptySearchWidget(context)
+                      ],
+                    );
+                  } else {
+                    return SizedBox.shrink();
+                  }
+                }
+                final filteredItem = filteredElements[index - 1];
+                return SimpleDialogOption(
+                  child: _buildOption(filteredItem),
+                  onPressed: () => _selectItem(filteredItem),
+                );
+              },
+            ),
           ),
-        ),
-      );
+        ],
+      ),
+    );
+  }
 
   Widget _buildOption(CountryCode e) {
     return Container(
       width: 400,
       child: Flex(
         direction: Axis.horizontal,
-        children: <Widget>[
+        children: [
           if (widget.showFlag!)
             Flexible(
               child: Container(
@@ -200,7 +205,5 @@ class _SelectionDialogState extends State<SelectionDialog> {
     });
   }
 
-  void _selectItem(CountryCode e) {
-    Navigator.pop(context, e);
-  }
+  void _selectItem(CountryCode e) => Navigator.pop(context, e);
 }