Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position a Widget at the bottom of a SingleChildScrollView?

I need to use SingleChildScrollView in order to be able to use keyboard_actions so that i can put a "Done" button on top of the keyboard in iOS (using a numeric keyboard at the moment)

The SingleChildScrollView will have a column as a child and then a button to be placed at the bottom. I tried using LayoutBuilder to enforce a height to the SingleChildScrollView.

LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
    return SingleChildScrollView(
        child: ConstrainedBox(
            constraints:
                BoxConstraints(minHeight: viewportConstraints.maxHeight),
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Column(),
                  // Spacer() ?
                  FlatButton()
                ])));
  });

I tried using the BoxConstraints with the maxHeight attribute, but ultimately the widget wouldn't scrooll up when the keyboard appeared.

Side note: the Scaffold has both resizeToAvoidBottomInset and resizeToAvoidBottomPadding set to true (the default value)

like image 617
Vanethos Avatar asked Mar 08 '19 16:03

Vanethos


People also ask

How do you get the position of a widget in Flutter?

That's how to get the size and position of a widget rendered on the screen. Basically, you need to get the RenderBox of the widget. Then, you can access the size property to get the size of the widget and call localToGlobal method to get the offset.

How do I make my screen not scroll in Flutter?

Flutter ListView – Never Scrollable You can make the ListView widget never scrollable by setting physics property to NeverScrollableScrollPhysics().


1 Answers

The issue with SingleChildScrollView is that it shrikwrap it's children. So to have auto size widget in between - we need to use MediaQuery to get the screen height & SizedBox to expand - SingleChildScrollView.

Here Button will be at bottom of screen.

working Code:

double height = MediaQuery.of(context).size.height;

    SingleChildScrollView(
          child: SizedBox(
              height: height,
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Column(
                      children: <Widget>[
                        Text('Dummy'),
                        Text('Dummy'),
                        Text('Dummy'),
                      ],
                    ),
                    Spacer(),
                    FlatButton(
                      onPressed: () {},
                      child: Text('Demo'),
                    )
                  ])),
        ) 
like image 72
anmol.majhail Avatar answered Sep 20 '22 00:09

anmol.majhail