diff --git a/lib/src/generic_dropdown.dart b/lib/src/generic_dropdown.dart index c0f20aa..6e0e95b 100644 --- a/lib/src/generic_dropdown.dart +++ b/lib/src/generic_dropdown.dart @@ -119,6 +119,11 @@ final class GenericDropdown extends StatefulWidget { /// you need to ensure that the mouse events are passed to the dropdown. final ToggleBuilder toggleBuilder; + /// The color of the barrier that is shown when the dropdown is open. + /// Defaults to `Colors.transparent`. + /// This spans the entire screen. + final Color barrierColor; + const GenericDropdown( {super.key, required this.contentBuilder, @@ -127,6 +132,7 @@ final class GenericDropdown extends StatefulWidget { required this.toggleBuilder, this.closeOnOutsideTap = true, this.openOnRender = false, + this.barrierColor = Colors.transparent, this.offset = Offset.zero}); @override @@ -445,7 +451,7 @@ final class _GenericDropdownState extends State { onTap: () => widget.closeOnOutsideTap ? _close() : null, child: Container( alignment: Alignment.topLeft, - color: Colors.transparent, + color: widget.barrierColor, child: Stack( children: [ StatefulBuilder(builder: (context, setState) { diff --git a/storybook/lib/main.dart b/storybook/lib/main.dart index 81570fa..3e46956 100644 --- a/storybook/lib/main.dart +++ b/storybook/lib/main.dart @@ -103,6 +103,18 @@ Story _dropdown() => Story( description: 'Whether the content is closed on an outside tap or only if the content calls close().', initial: true), + barrierColor: context.knobs.options( + label: 'Barrier Color', + description: 'The color of the barrier behind the dropdown.', + initial: Colors.transparent, + options: [ + Option(label: 'Transparent', value: Colors.transparent), + Option(label: 'Black', value: Colors.black.withOpacity(.5)), + Option(label: 'Red', value: Colors.red.withOpacity(.5)), + Option(label: 'Green', value: Colors.green.withOpacity(.5)), + Option(label: 'Blue', value: Colors.blue.withOpacity(.5)), + ], + ), )); });