How to tap outside of the BottomSheet to dismiss it?-CodePudding

I have a showModalBottomSheet widget inside SingleChildScrollView. When the showModalBottomSheet pops up, it leads me to a DraggableScrollableSheet with a custom height. It all works fine. But somehow, it seems like whenever I do custom height using initialChildSize, I can't tap out to dismiss the BottomSheet. How can I do it?

PS. Based on my current code, to dismiss the BottomSheet, I'll have to swipe the sheet down manually.

Code 1.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Column(
      children: [
        Container(),
        Container(
          child: Expanded(
            child: PageView(
              controller: _pageController,
              onPageChanged: (page) {},
              children: [
                SingleChildScrollView(
                  child: Column(
                    children: [
                      Container(
                        padding: EdgeInsets.only(
                            top: 1, left: 30, right: 30, bottom: 10),
                        child: Row(
                          children: [
                            Text(),
                            ElevatedButton(
                              onPressed: () {
                                showModalBottomSheet(
                                  context: context,
                                  builder: (context) =>
                                      AssetScreen(),
                                  isScrollControlled: true,
                                  backgroundColor: Colors.transparent,
                                );
                              },
                              child: Icon(Icons.add, color: Colors.white),
                            ),
                          ],
                        ),),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}}

Code 2.

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

@override
Widget build(BuildContext context) {
  return DraggableScrollableSheet(
      initialChildSize: 0.79,
      builder: (_, controller)
  =>
      Container(
        color: Color(0xff757575),
        child: Container(
          padding: EdgeInsets.all(30.0),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20.0),
                topRight: Radius.circular(20.0),
              )),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
              SizedBox(),
          Text(),
          Center(
            child: Column(
              children: [],
            ),
          ),
        ),
      );
}}

Based on the comments below by Dhrumil Shah, dismming now works. However, maxChildSize and minChildSize not working as intended. What is missing here?

@override
Widget build(BuildContext context) {
  return GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () => Navigator.pop(context),

    child: DraggableScrollableSheet(
      initialChildSize: 0.79,
      maxChildSize: 0.79,
      minChildSize: 0.3,
      builder: (_, controller) =>
          Container(
            color: Color(0xff757575),
            child: Container(
              padding: EdgeInsets.all(30.0),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(20.0),
                    topRight: Radius.circular(20.0),
                  )),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                  SizedBox(),
              Text(),
              Center(
                child: Column(
                  children: [],
                ),
              ),
            ),
          ),
    ),
  ),}

CodePudding user response：

GestureDetector( behavior: HitTestBehavior.opaque, onTap: () => Navigator.pop(context), child: DraggableScrollableSheet( initialChildSize: 0.65, maxChildSize: 1, minChildSize: 0.5,)

Wrapping my draggable bottom sheet with gesture detector works for me