CODEWITHSUNDEEP
flutterflutter-layout
Eranot
Eranot

Reputation: 41

Keep button fixed in the bottom of screen, but only when the above list height is shorter than the device height

I am developing a Flutter app and would like to keep my button always in the bottom of the screen UNLESS what is in top of it is high enough to make the screen scroll. Examples:

Example A (what is on top of the button does not have height enough to scroll the screen)

Example B (what is on top of the button has height enough to scroll the screen, so the button will just go offscreen and allow the screen to scroll)

So summarizing: the button should be forced to stay at the bottom of the screen when the rest of the list is shorter than the device height, but if the list height is greater than the device height the button should behave normally and stay below the list.

What I tried:

Thanks.

Upvotes: 2

Views: 2478

Answers (2)

Eranot
Eranot

Reputation: 41

I got it. The right way of doing this is using LayoutBuilder, ConstrainedBox, IntrinsicHeight and Expanded, like this:

(In this example, _widgets is a list of widgets that I want it to be on top. _buttons is a list of buttons that I want to be in the bottom)

return Scaffold(
      appBar: buildAppBar(),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: IntrinsicHeight(
                child: Column(
                  children: <Widget>[
                    Expanded(
                      child: Column(
                        children: _widgets,
                      ),
                    ),
                    Column(
                      children: _buttons,
                    )
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );

The documentation says to avoid this, though, as it can be expensive. You can read more about this solution and other details in the documentation.

Upvotes: 1

Johny Saini
Johny Saini

Reputation: 909

Stack(
 children:[
        //Use list widget,
     yourList.length<7?  Postioned(
       bottom :10,                margin from bottom
      child: //button widget):Container()
 ])

In listbuilder 

ListView.builder( 
        physics: ScrollPhysics(),
        itemCount: yourList+1,
        itemBuilder: (BuildContext ctxt, int index) {
          if (index== yourList.length) {    
           return  yourList.length >7?  //your button widget:Container();
           } else {
           return //list item}
  });

Upvotes: 0

Related Questions