'Using flexible SliverAppBar as non-top element

I'm trying to display a flexible SliverAppBar below a custom app bar (let's say it's a container with a height of 80.0).

When making the SliverAppBar the top element, it works fine, but when it's the second one, there is a top-padding as big as the Android UI interface.

 Scaffold(
   body: Column(children: <Widget>[
          Container(height: 80.0),
          Expanded(child: _content())
        ]),
 );

_content()

return CustomScrollView(slivers: <Widget>[
  SliverAppBar(
    backgroundColor: Colors.red,
    leading: PopContentButton(),
    title: Text('Test'),
    snap: true,
    pinned: true,
    floating: true,
    bottom: TabBar(
      tabs: _tabs(),
      controller: TabControllerExtended(length: 4, vsync: this),
    ),
  ),
  SliverList(delegate: new SliverChildListDelegate(buildTextViews(50)))
]);

This is not how it should look: wrong
(source: bilder-upload.eu)

It should look like: right
(source: bilder-upload.eu)



Solution 1:[1]

Wrap you - SliverAppBar with MediaQuery.removePadding.

Updated Code :

....
MediaQuery.removePadding(
        context: context,
        removeTop: true,
        child: SliverAppBar(
...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 anmol.majhail