Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WebView CustomScrollView + Floating AppBar

I am trying to create a screen that has a WebView (from webview_flutter: ^0.3.5+3) and an AppBar that I want to scroll offscreen on user scroll.

I stumbled upon this guide and tried implementing something similar, but no dice.
Is there a way to use a WebView in a CustomScrollView with Slivers or is this not supported yet?

I can get the scrolling app bar to work if I create regular Widgets in my SliverChildListDelegate (I tried Row, Text, Container etc.), but had no luck with a WebView.

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: const Text("Heading"),
            floating: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                child: WebView(
                  initialUrl: url,
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              )
            ]
            ),
          )
        ],
      )
  );
}

Any pointers/suggestions/RTFMs welcome.

EDIT BOUNTY

The solution provided by jordan-davies works but is very choppy. Whenever the SliverAppBar is scrolled away the WebView tries to resize itself to fill the remaining viewport. This makes for a very choppy/slow experience.

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        title: const Text("Heading"),
        floating: true,
      ),
      SliverFillRemaining(
        child: WebView(initialUrl: "http://stackoverflow.com"),
      )
    ],
  );
}

gif of code above
Is there a better way?

like image 718
user3403083 Avatar asked Jan 16 '19 15:01

user3403083


Video Answer


1 Answers

I actually wanted to make a comment but it is too long to fit

I can give you my view for why it is not possible to do that with the current state of the plugin ,by default the Webview only respond to drag gesture when no other views claim that gesture. On the other hand, Scrolling slivers like SliverList, which is needed to make the SliverAppBar to scroll up ,by default consumes all drag scrolling gestures -although you can disable that by providing noScrollPhysics - but once the WebView cover all the screen there is actually noway to report back to the slivers to start consume scroll again .

So the solution is to modify the WebView plugin itself to provide a callback for drag gestures , hope that flutter team will implement this feature soon.

like image 112
Saed Nabil Avatar answered Oct 14 '22 04:10

Saed Nabil