CODEWITHSUNDEEP
flutterflutter-layoutflutter-sliver
Agung
Agung

Reputation: 13813

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

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 ?

Upvotes: 0

Views: 1974

Answers (1)

harsuu
harsuu

Reputation: 34

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

Upvotes: 0

Related Questions