feat: add configurable barrier (backdrop) color (#17)

Author: buehler

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<GenericDropdown> {
           onTap: () => widget.closeOnOutsideTap ? _close() : null,
           child: Container(
             alignment: Alignment.topLeft,
-            color: Colors.transparent,
+            color: widget.barrierColor,
             child: Stack(
               children: [
                 StatefulBuilder(builder: (context, setState) {

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)),
+              ],
+            ),
           ));
     });