SingleChildScrollView , Problem with spaces on the child Column

Question

I had a BOTTOM OVERFLOWED BY ** PIXELS when i tried to open the phone keyboard so i wrapped my Column in a SingleChildScrollView But somehow it became pushed to the top and the MainAxisAlignment.spaceEvenly stopped working so i made some space between them using SizedBox my question is: is that the good way to do it? to achieve space between the widgets and is it gonna work on different phone sizes

my code:

second question: how can i push all the column to the top until last item is showing without scrolling when i open the keyboard like the picture below

Answer 1

1. To make the MainAxisAlignment.spaceEvenly work again, you need to wrap your inside a ConstrainedBox to be like this:

SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight: MediaQuery.of(context).size.height,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('data'),
              Text('HelloWorld'),
            ],
          ),
        ),
      ),

2. To scroll to the end of your form, use a ScrollController for the SingleChildScrollView and animate to the end of the list like this:

   controller.animateTo(
      controller.position.maxScrollExtent,
      duration: const Duration(milliseconds: 500),
      curve: Curves.easeOut,
    );

3. It's okay to use SizedBox for spaces, A small Tip: remember to set const before it to make your app more performant, cuz this way flutter won't rebuild the sizedBox Widget every time your widget is rebuilt

Hope you find this helpful =D

Answer 2

Normally you should be using a ListView , that should solve the problem of your keyboard hidding your form fields.

About the SizedBox and the issues with the distribution of you widget, that is because normally when you create a column, it uses the entire hight of the parent, but in the case of the SingleChildScrollView , it does not have a size to give you, hence the column doesnt know how to distribute your children.

Finally, I've seen a lot of developers use the SizedBox to create spacing, so I dont think there is nothing wrong with using it. You could also create a ListView.separated ( official docs ) which will add a the same Widget (that you provide) as a separator.