5

I am trying to show a modal bottom sheet which utilizes a DraggableScrollableSheet, which in turn contains a WebView , when tapping on a card. The WebView is supposed to be scrollable as it contains a long web page. I am using the DraggableScrollableSheet because I want to be able to close the bottom sheet when scrolling up after the top of the web page is reached.

This is what I have so far:

onTap: () {
      showModalBottomSheet(
        context: context,
        isScrollControlled: true,
        builder: (_) {
          return DraggableScrollableSheet(
            expand: false,
            builder: (_, scrollController) {
              return Container(
                child: WebView(
                  initialUrl: this.newsUrl,
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              );
            },
          );
        },
      );
    }

However in the current state of the code, the WebView is not scrollable. The only thing I can do is flick the sheet down to close it. The widget inside DraggableScrollableSheet has to use the ScrollController provided by the DraggableScrollableSheet for this to work, but I haven't been able to find a way to use this ScrollController with the WebView. I tried wrapping the WebView with a SingleChildScrollView but that didn't work.

I am thinking there might be some workaround to this problem which I haven't been able to find. Any kind of help is appreciated.

dave_a7x
  • 51
  • 3
  • Having this same problem in 2022. What did you end up doing? @dave_a7x – markhops Oct 01 '22 at 14:24
  • This worked for me https://stackoverflow.com/a/62276169/1176788 – markhops Oct 01 '22 at 14:39
  • 1
    @markhops I ended up taking a different approach but can't remember exactly what I did. I don't have the access to the codebase anymore. Thanks for pointing out a solution though :) – dave_a7x Oct 02 '22 at 16:13

0 Answers0