Is there a way to keep active GestureDetector on the screen when the bottom sheet is showing?

Question

I'm using the GetX package to display a bottomSheet.

I want users to be able to click on the screen when my bottom sheet is opened, like the following image.

How can I do this?

Answer 1

The answer is no

---

Why?

According to the Flutter documentation:

A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.

The main purpose of the bottom sheet is to prevent the user from interacting with the rest of the app.

---

How can we overcome this?

Use a persistent bottom sheet, i.e., using showBottomSheet.

A closely related widget is a persistent bottom sheet, which shows information that supplements the primary content of the app without preventing the user from interacting with the app.

Output:

Code:

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: showSheet(),
      ),
    );
  }
}

class showSheet extends StatefulWidget {
  const showSheet({Key? key}) : super(key: key);

  @override
  State<showSheet> createState() => _showSheetState();
}

class _showSheetState extends State<showSheet> {
  void displayPersistentBottomSheet() {
    Scaffold.of(context).showBottomSheet<void>((BuildContext context) {
      return Container(
        color: Colors.amber,
        height: 200,   // 👈 Change this according to your need
        child: const Center(child: Text("Image Filter Here")),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FilledButton(
        onPressed: displayPersistentBottomSheet,
        child: const Text(
          'Draggable Widget Here',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

---

Can it be done using Getx?

Unfortunately no, because getx supports only bottomShet which is an alternative to Modal Bottom Sheet and there isn't any alternative to a persistent bottom sheet.

Answer 2

Instead of using Get.bottomSheet, you can use a Stack widget and use it something like this:

Widget yourPhotoEditingWidget() {
  bool onShadowButtonTapped = false;
  return Stack(
    children: [
      Column(
        children: [
          yourDraggableWidget(),
          Align(
            alignment: Alignment.center,
            child: MaterialButton(
              color: Colors.orange,
              onPressed: () {
                onShadowButtonTapped = !onShadowButtonTapped;
                setState(() {});
              },
              child: const Text(
                'Shadow',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ],
      ),
      if (onShadowButtonTapped)
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            height: 150,
            width: 300,
            color: Colors.orange,
            child: const Center(
              child: Text(
                'Your Widget',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
    ],
  );
}