how to make a widget to be on the bottom of the screen if using SliverStack?

Question

as you can see at the image above, I have a red container stick on the top (right below the app bar). here is the code I use

  CustomScrollView(
      slivers: [
          SliverAppBar(),
          _buildStack(),
      ]
  ),

 
  
  Widget _buildStack() {
    return SliverStack(
       children: [

        // I have other widgets here ..

        SliverPositioned(
          bottom: 0, // <-- I have set the bottom to be zero
          child: SliverToBoxAdapter(
            child: _buildRedBox(),
        ),
     
     ],
   )
 }
  

  Widget _buildRedBox() {
    return Container(
      width: double.infinity,
      height: 50,
      color: Colors.red,
    );
  }

I am using sliver tool package so I can access SliverStack and SliverPositioned.

as you can see, I have set the bottom to be zero. but the red box is still on the top. I need to make the red box at the bottom of the screen inside my SliverStack. how to do that ?

score 1 · Accepted Answer · answered Aug 20 '21 at 10:35

Use SliverFillRemaining widget instead of SliverPositioned widget.

SliverFillRemaining will automatically size itself to fill the space between the bottom of the last list item and the bottom of the viewport

SliverFillRemaining(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          _buildRedBox(),
        ],
      ),
    ),

how to make a widget to be on the bottom of the screen if using SliverStack?

1 Answers1