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

Issue

enter image description here

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 ?

Solution

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(),
        ],
      ),
    ),

Answered By – harsuu

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *