fix: expose background color & shadow customization, sync header support to BottomSheet

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [Unreleased]
+- fix: exposed `backgroundColor` for both Dialog and BottomSheet
+- fix: `boxShadow` now customizable — pass `[]` to remove, or provide custom shadows
+- feat: BottomSheet now supports header customization (`headerText`, `hideHeaderText`, `headerTextStyle`, etc.)
+
 ## 3.4.1 - October 08 2025
 - Fix French country translations
 - Removed Netherlands Antilles from country codes list

lib/country_code_picker.dart

@@ -34,6 +34,7 @@ class CountryCodePicker extends StatefulWidget {
   final bool enabled;
   final TextOverflow textOverflow;
   final Icon closeIcon;
+  final List<BoxShadow>? boxShadow;
 
   ///Picker style [BottomSheet] or [Dialog]
   final PickerStyle pickerStyle;
@@ -146,6 +147,7 @@ class CountryCodePicker extends StatefulWidget {
     this.boxDecoration,
     this.comparator,
     this.countryFilter,
+    this.boxShadow,
     this.hideSearch = false,
     this.hideCloseIcon = false,
     this.showDropDownButton = false,
@@ -325,6 +327,8 @@ class CountryCodePickerState extends State<CountryCodePicker> {
       context: context,
       builder: (context) => Center(
         child: Dialog(
+          backgroundColor: widget.backgroundColor,
+          elevation: 0,
           child: SelectionDialog(
             elements,
             favoriteElements,
@@ -347,6 +351,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
             barrierColor: widget.barrierColor,
             hideSearch: widget.hideSearch,
             hideCloseIcon: widget.hideCloseIcon,
+            boxShadow: widget.boxShadow,
             closeIcon: widget.closeIcon,
             flagDecoration: widget.flagDecoration,
             dialogItemPadding: widget.dialogItemPadding,
@@ -369,7 +374,7 @@ class CountryCodePickerState extends State<CountryCodePicker> {
     final item = await showModalBottomSheet(
       isScrollControlled: true,
       context: context,
-      backgroundColor: Colors.transparent,
+      backgroundColor: widget.backgroundColor,
       elevation: 0,
       builder: (ctx) {
         return SelectionBottomSheet(
@@ -384,10 +389,17 @@ class CountryCodePickerState extends State<CountryCodePicker> {
           showFlag: widget.showFlagDialog ?? widget.showFlag,
           flagWidth: widget.flagWidth,
           size: widget.dialogSize,
+          hideHeaderText: widget.hideHeaderText,
+          headerText: widget.headerText,
+          headerTextStyle: widget.headerTextStyle,
+          topBarPadding: widget.topBarPadding,
+          headerAlignment: widget.headerAlignment,
+          hideCloseIcon: widget.hideCloseIcon,
           backgroundColor: widget.dialogBackgroundColor,
           barrierColor: widget.barrierColor,
           hideSearch: widget.hideSearch,
           closeIcon: widget.closeIcon,
+          boxShadow: widget.boxShadow,
           flagDecoration: widget.flagDecoration,
         );
       },

lib/src/bottom_sheet.dart

@@ -18,6 +18,13 @@ class SelectionBottomSheet extends StatefulWidget {
   final Size? size;
   final bool hideSearch;
   final Icon? closeIcon;
+  final List<BoxShadow>? boxShadow;
+  final bool hideHeaderText;
+  final String? headerText;
+  final TextStyle headerTextStyle;
+  final EdgeInsets topBarPadding;
+  final MainAxisAlignment headerAlignment;
+  final bool hideCloseIcon;
 
   /// Background color of SelectionBottomSheet
   final Color? backgroundColor;
@@ -43,9 +50,16 @@ class SelectionBottomSheet extends StatefulWidget {
     this.flagWidth = 32,
     this.size,
     this.backgroundColor,
+    this.boxShadow,
     this.barrierColor,
     this.hideSearch = false,
     this.closeIcon,
+    this.hideHeaderText = true,       // default true = no header, keeps old behavior
+    this.headerText,
+    this.headerTextStyle = const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+    this.topBarPadding = const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20),
+    this.headerAlignment = MainAxisAlignment.spaceBetween,
+    this.hideCloseIcon = false,
   })  : searchDecoration = searchDecoration.prefixIcon == null
             ? searchDecoration.copyWith(prefixIcon: const Icon(Icons.search))
             : searchDecoration,
@@ -71,25 +85,40 @@ class _SelectionBottomSheetState extends State<SelectionBottomSheet> {
               BoxDecoration(
                 color: widget.backgroundColor ?? Colors.white,
                 borderRadius: const BorderRadius.all(Radius.circular(8.0)),
-                boxShadow: [
+                boxShadow: widget.boxShadow ?? [
                   BoxShadow(
-                    color: widget.barrierColor ?? Colors.grey
-                      ..withAlpha(255),
+                    color: widget.barrierColor ?? Colors.grey.withAlpha(255),
                     spreadRadius: 5,
                     blurRadius: 7,
-                    offset: const Offset(0, 3), // changes position of shadow
+                    offset: const Offset(0, 3),
                   ),
                 ],
               ),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.end,
             children: [
-              IconButton(
-                padding: const EdgeInsets.all(0),
-                iconSize: 20,
-                icon: widget.closeIcon!,
-                onPressed: () => Navigator.pop(context),
+              Padding(
+                padding: !widget.hideHeaderText ? widget.topBarPadding : EdgeInsets.zero,
+                child: Row(
+                  mainAxisAlignment: widget.headerAlignment,
+                  children: [
+                    !widget.hideHeaderText && widget.headerText != null
+                        ? Text(
+                      widget.headerText!,
+                      overflow: TextOverflow.fade,
+                      style: widget.headerTextStyle,
+                    )
+                        : const SizedBox.shrink(),
+                    if (!widget.hideCloseIcon)
+                      IconButton(
+                        padding: const EdgeInsets.all(0),
+                        iconSize: 20,
+                        icon: widget.closeIcon!,
+                        onPressed: () => Navigator.pop(context),
+                      ),
+                  ],
+                ),
               ),
               if (!widget.hideSearch)
                 Padding(

lib/src/selection_dialog.dart

@@ -26,6 +26,7 @@ class SelectionDialog extends StatefulWidget {
   final String? headerText;
   final EdgeInsets topBarPadding;
   final MainAxisAlignment headerAlignment;
+  final List<BoxShadow>? boxShadow;
 
   /// Background color of SelectionDialog
   final Color? backgroundColor;
@@ -60,6 +61,7 @@ class SelectionDialog extends StatefulWidget {
     this.flagDecoration,
     this.flagWidth = 32,
     this.size,
+    this.boxShadow,
     this.backgroundColor,
     this.barrierColor,
     this.hideSearch = false,
@@ -93,12 +95,12 @@ class _SelectionDialogState extends State<SelectionDialog> {
               BoxDecoration(
                 color: widget.backgroundColor ?? Colors.white,
                 borderRadius: const BorderRadius.all(Radius.circular(8.0)),
-                boxShadow: [
+                boxShadow: widget.boxShadow ?? [
                   BoxShadow(
                     color: widget.barrierColor ?? Colors.grey.withAlpha(255),
                     spreadRadius: 5,
                     blurRadius: 7,
-                    offset: const Offset(0, 3), // changes position of shadow
+                    offset: const Offset(0, 3),
                   ),
                 ],
               ),