flutterflutter-appbarsliverappbar

How to create overlapping header in flutter?

I'm kinda new to Flutter and I am trying to build a home page where the header is at the back of the main content. So when the app is scrolling, the content in front is overlapping the header.

Like this

The main goal I want to achieve is overlapping scrolling. But it's nice if I can make the status bar color and the border radius changes when I scroll up the content, but I guess it's kinda advanced?

Can I user SliverAppBar to make it works like that? or are there any plugins for that?

Thank you

Solution

  • You can use Draggable Scrollable Sheet for this with min height of 0.7 to 0.8.

    https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html