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

user_5445401 0
Viewed 1271

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:

  • Using a ListView, which will normally scroll if necessary, but I couldn't find a way to send the button to the botton of the screen;
  • Using a Column. With the help of a Spacer I could make the button go to the bottom of the screen, but a Column will not scroll, and if I add a SingleChildScrollViewto wrap it, the Spacer will no longer work because SingleChildScrollView has the potential to have infinite height;

Thanks.

flutter-layout flutter
2 Answers

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.

user_54454010 
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}
  });
user_136541500
Related