Minimum sliverAppBar height

I want to decrease the height of sliverAppBar but don’t know how.


The second app bar doesn’t fit to it’s child widget.
So that there is a huge gap between big logo and menu bar which is breaking the app design.

I suppose this minimum height restriction is made to prevent status bar overlapping by the 'sliverAppBar' if 'pinned: true' because this extra padding is exactly the same as system status bar height.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.blue,
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar( // <-- app bar for logo
          expandedHeight: 120,
          floating: false,
          pinned: false,
          elevation: 0.0,
          backgroundColor: Colors.green,
          brightness: Brightness.light,
          flexibleSpace: SafeArea(child:
            FlexibleSpaceBar(
              background: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Image.asset(
                    'assets/images/user.png',
                    fit: BoxFit.cover,
                    width: 120,
                    height: 120,
                  ),
                ],
              ),
            )
          )
        ),
        SliverAppBar( // <-- app bar for custom sticky menu
          floating: false,
          pinned: true,
          backgroundColor: Colors.yellow,
          brightness: Brightness.light,
          elevation: 0.0,
          expandedHeight: 60.0, // <-- doesn't work for minimum height setup
          flexibleSpace: SafeArea(child:
            Container(
              height: 60.0,
              decoration: BoxDecoration(color: Colors.red),
              child: Padding(
                padding: EdgeInsets.only(left: 15.0, right: 15.0),
                child: CustomMenuBar,
              )
            )
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return CountryList();
            },
            childCount: widget.europeanCountries.length,
          ),
        ),
      ],
    ),);
  }
}

Is it possible to fit sliverAppBar height to it’s content? Or just make it smaller?

1 Like