Get Container take the remaining space of the screen below the Header

Issue

I got my page layout like this:

return new Scaffold(
  appBar: _getAppBarWidget(_currentIndex),
  body: return CustomScrollView(slivers: [
          SliverPersistentHeader(
            delegate: ProfileBar(expandedHeight: 200),
            pinned: true,
          ),
          SliverToBoxAdapter(
            child: ProfileView()
          ),
      ]);,
  bottomNavigationBar: BottomBar(),
);

and I want my ProfileView to take the whole rest of the screensize.

ProfileView() looks like this:

return Container(
  color: Colors.green;
  child: RaisedButton(
    child: const Text('Something'),
    textColor: Colors.white,
    color: Colors.redAccent,
    onPressed: () {}
  )
);

But I just can’t get my Container from ProfileView to take the whole rest of the screenheight that is remaining below the SliverPersistentHeader.

I tried a lot of different things but didn’t succeed. (e.g. using Expended) Someone has an advice for this?

Edit: The only thing I succeeded in was hardcoding it. But this is not what I want.

Solution

To solve the issue you can use SliverFillRemaining instead of SliverToBoxAdapter

So your updated code will be

return new Scaffold(
appBar: _getAppBarWidget(_currentIndex),
body: return CustomScrollView(slivers: [
      SliverPersistentHeader(
        delegate: ProfileBar(expandedHeight: 200),
        pinned: true,
      ),
      SliverFillRemaining(
        child: ProfileView()
      ),
  ]);,
bottomNavigationBar: BottomBar(),
);

Answered By – Shubham Gupta

Answer Checked By – Pedro (FlutterFixes Volunteer)