How to enable interaction with background elements while using DraggableScrollableSheet with showBottomSheet?

In Flutter, when you open a BottomSheet, it typically takes over user interaction, preventing gestures from passing through to the background widgets. However, if you want to keep the background list scrollable while the bottom sheet is open, you can use the showModalBottomSheet with the isScrollControlled: true property and wrap the BottomSheet with a DraggableScrollableSheet. Here's how you can do it:

Using DraggableScrollableSheet

The DraggableScrollableSheet allows the bottom sheet to be partially opened while still allowing interactions with the background list.

Try this and give me feedback that it's Works or Not?

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Scrollable List with Bottom Sheet")),
      body: Stack(
        children: [
          // Background ListView
          ListView.builder(
            itemCount: 50,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),

          // Draggable Scrollable Bottom Sheet
          DraggableScrollableSheet(
            initialChildSize: 0.3, // How much it takes initially
            minChildSize: 0.1, // Minimum size when collapsed
            maxChildSize: 0.8, // Maximum height
            builder: (context, scrollController) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                  boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 10)],
                ),
                child: ListView.builder(
                  controller: scrollController, // Attach the controller
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('Bottom Sheet Item $index'),
                    );
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

Use ModalBottomSheetRoute

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    backgroundColor: Colors.transparent,
    isDismissible: false, 
    enableDrag: false, 
    isScrollControlled: true, 
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.5,
        minChildSize: 0.2,
        maxChildSize: 1,
        snap: true,
        snapSizes: [0.2, 0.5, 1.0],
        builder: (context, scrollController) {
          return Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
            ),
            child: ListView.builder(
              controller: scrollController,
              itemCount: 20,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Item $index"));
              },
            ),
          );
        },
      );
    },
  );
}

Or Use Stack with IgnorePointer

void _showBottomSheet(BuildContext context) {
  showBottomSheet(
    context: context,
    backgroundColor: Colors.transparent,
    builder: (context) {
      return Stack(
        children: [
    
          IgnorePointer(
            ignoring: false,
            child: GestureDetector(
              onTap: () => Navigator.pop(context), 
              behavior: HitTestBehavior.translucent,
            ),
          ),
          DraggableScrollableSheet(
            initialChildSize: 0.5,
            minChildSize: 0.2,
            maxChildSize: 1,
            snap: true,
            snapSizes: [0.2, 0.5, 1.0],
            builder: (context, scrollController) {
              return Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
                ),
                child: ListView.builder(
                  controller: scrollController,
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    return ListTile(title: Text("Item $index"));
                  },
                ),
              );
            },
          ),
        ],
      );
    },
  );
}