How to Make Content Inside showModalBottomSheet Scrollable when it consists webview inside?

Question

I am working on a Flutter application where I'm using a showModalBottomSheet to display some content, including a WebViewWidget. The issue I'm facing is that the content inside the showModalBottomSheet is not scrollable when it exceeds the available height. I would like to make the content scrollable so that users can navigate through the entire content of the WebViewWidget when it doesn't fit within the given height. webview will of infinity height.

I've tried wrapping the WebViewWidget with a SingleChildScrollView, but it doesn't seem to work as expected. The content inside the showModalBottomSheet remains non-scrollable.

Here's the relevant part of my code:

    showModalBottomSheet(
      context: context,
      elevation: 10,
      enableDrag: true,
      isScrollControlled: true,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10.0),
          topRight: Radius.circular(10.0),
        ),
      ),
      builder: (BuildContext sheetContext) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            return SizedBox(
              height: MediaQuery.of(context).size.height * 0.6,
              child: Padding(
                padding: EdgeInsets.only(top: 5.0),
                child: Column(
                  children: [
                    Center(
                      child: Container(
                        height: 2.0,
                        width: 20.0,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(30.0),
                          color: Colors.grey,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        IconButton(
                          onPressed: goBack,
                          icon: const Icon(
                            CupertinoIcons.arrow_left,
                            size: 30,
                            color: Colors.black,
                          ),
                        ),
                        Expanded(
                          child: Text(
                            copiedText,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 1,
                            style: const TextStyle(
                                fontSize: 18, color: Colors.black),
                          ),
                        ),
                        // IconButton(
                        //     icon: const Icon(
                        //       Icons.keyboard_arrow_down,
                        //       size: 30,
                        //       color: Colors.black,
                        //     ),
                        //     onPressed: widget.fn),
                      ],
                    ),
                    Expanded(
                      child: WebViewWidget(
                        controller: controller,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    )

Could you please help me understand what I might be missing or suggest an alternative approach to making the content inside the showModalBottomSheet scrollable? I want to achieve a similar behavior to how Google Chrome shows a bottom search bar when selecting text.

Thank you for your assistance!

Answer 1

This is because your ModalBottomSheet is draggable that's why it blocks the scroll control on the webview.

showModalBottomSheet(
    context: context,
    elevation: 10,
    enableDrag: false,    // disable it
    ...
    ...
);