From 3aea101743d88e89ea36e9e46dcce0a3d61f4bbb Mon Sep 17 00:00:00 2001 From: Nilashish Roy Date: Fri, 6 Mar 2026 20:48:45 +0600 Subject: [PATCH 1/3] Add support for custom `boxShadow` in `CountryCodePicker`, `SelectionDialog`, and `SelectionBottomSheet`. * Allow users to provide a custom `List` to override the default dialog and bottom sheet styling. * Update `CountryCodePicker` to pass the `backgroundColor` and `boxShadow` properties to the selection components. * Set `elevation` to 0 in the default `Dialog` to favor custom `BoxDecoration`. --- lib/country_code_picker.dart | 8 +++++++- lib/src/bottom_sheet.dart | 9 +++++---- lib/src/selection_dialog.dart | 6 ++++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 7c33ff8..1e6d57b 100644 --- a/lib/country_code_picker.dart +++ b/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; ///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 { context: context, builder: (context) => Center( child: Dialog( + backgroundColor: widget.backgroundColor, + elevation: 0, child: SelectionDialog( elements, favoriteElements, @@ -347,6 +351,7 @@ class CountryCodePickerState extends State { 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 { final item = await showModalBottomSheet( isScrollControlled: true, context: context, - backgroundColor: Colors.transparent, + backgroundColor: widget.backgroundColor, elevation: 0, builder: (ctx) { return SelectionBottomSheet( @@ -388,6 +393,7 @@ class CountryCodePickerState extends State { barrierColor: widget.barrierColor, hideSearch: widget.hideSearch, closeIcon: widget.closeIcon, + boxShadow: widget.boxShadow, flagDecoration: widget.flagDecoration, ); }, diff --git a/lib/src/bottom_sheet.dart b/lib/src/bottom_sheet.dart index dcb143c..681c13d 100644 --- a/lib/src/bottom_sheet.dart +++ b/lib/src/bottom_sheet.dart @@ -18,6 +18,7 @@ class SelectionBottomSheet extends StatefulWidget { final Size? size; final bool hideSearch; final Icon? closeIcon; + final List? boxShadow; /// Background color of SelectionBottomSheet final Color? backgroundColor; @@ -43,6 +44,7 @@ class SelectionBottomSheet extends StatefulWidget { this.flagWidth = 32, this.size, this.backgroundColor, + this.boxShadow, this.barrierColor, this.hideSearch = false, this.closeIcon, @@ -71,13 +73,12 @@ class _SelectionBottomSheetState extends State { 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), ), ], ), diff --git a/lib/src/selection_dialog.dart b/lib/src/selection_dialog.dart index 6a12d6d..cfc664a 100644 --- a/lib/src/selection_dialog.dart +++ b/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; /// 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 { 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), ), ], ), From 42c61fe7d97f93b97f464411af78566cfbf153d9 Mon Sep 17 00:00:00 2001 From: Nilashish Roy Date: Fri, 6 Mar 2026 21:12:35 +0600 Subject: [PATCH 2/3] Add header customization options to the selection bottom sheet. Specific changes include: - Added `hideHeaderText`, `headerText`, `headerTextStyle`, `topBarPadding`, `headerAlignment`, and `hideCloseIcon` properties to `CountryCodePicker` and `SelectionBottomSheet`. - Implemented a new header row in the bottom sheet to support optional titles and alignment configurations. - Added logic to toggle the visibility of the close icon. --- lib/country_code_picker.dart | 6 ++++++ lib/src/bottom_sheet.dart | 38 +++++++++++++++++++++++++++++++----- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/lib/country_code_picker.dart b/lib/country_code_picker.dart index 1e6d57b..4756c2d 100644 --- a/lib/country_code_picker.dart +++ b/lib/country_code_picker.dart @@ -389,6 +389,12 @@ class CountryCodePickerState extends State { 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, diff --git a/lib/src/bottom_sheet.dart b/lib/src/bottom_sheet.dart index 681c13d..cd4f2e1 100644 --- a/lib/src/bottom_sheet.dart +++ b/lib/src/bottom_sheet.dart @@ -19,6 +19,12 @@ class SelectionBottomSheet extends StatefulWidget { final bool hideSearch; final Icon? closeIcon; final List? 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; @@ -48,6 +54,12 @@ class SelectionBottomSheet extends StatefulWidget { 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, @@ -86,11 +98,27 @@ class _SelectionBottomSheetState extends State { 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( From ba7b9782f07b3551ab667f4e1a17711bcf5ab24f Mon Sep 17 00:00:00 2001 From: Nilashish Roy Date: Fri, 6 Mar 2026 21:19:36 +0600 Subject: [PATCH 3/3] Update CHANGELOG.md for unreleased changes - Exposed backgroundColor for Dialog and BottomSheet - Added customizable boxShadow support - Added header customization for BottomSheet --- CHANGELOG.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 70e39f3..b55f338 100644 --- a/CHANGELOG.md +++ b/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