MainAxisAlignment under SingleChildScrollView is not working | FIX

This occurs when you try to fix Bottom overflowed by x pixels when showing keyboard issue.

When you try to fix this issue with many solutions, you get ad the end another issue.
and it that you can't use ManAxisAligment anymore in the main column.

I will show you 2 Fixes for this issue, the first is the easiest one, but the second is the best solution for my case and if your case seems to be like mine, that would help you so much.
(ads1)
you can see the video or just continue reading and feel free to copy the code

Check the code in GitHub

 

Solution 1: 

is to use Scaffold features , add this to the Scaffold :

resizeToAvoidBottomInset : false,

Example:

    return Scaffold(
      resizeToAvoidBottomInset : false,
      body: YourWidgets(),
    );

The issue with this Fix that you can't scroll view
this way, it will NOT automaticlly scroll the text field into view

Solution 2: ( the best FIX )

you can use CustomScrollView, it will let you use you main column widget as you want,

and will be able to use the ManAxisAligment however you need, also the view will be 

scrollable and you can scorll the whole screen
You can try this code blocks

 

Example:

CustomScrollView(
            scrollDirection: Axis.vertical,
            slivers: [
              SliverFillRemaining(
                hasScrollBody: false,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('test'),
                    for (int i = 0; i < 10; i++) const FlutterLogo(size: 80)
                  ],
                ),
              ),
            ],
          ),

There is alot of ways that you can use to fix this issue, it depents on
the situation of the widget tree 

 

you can also check this fix code in github from this link:

https://github.com/ramyhq/FIX_MainAxisAlignment_not_working/blob/main/Add_Questions_Page.dart

 

 

Solution 3 : (would help you too)

 

You can give hight and width for the column to force it to be the same size of the 

screen, (any phone screen) with :

 

MediaQuery.of(context).size.hight

MediaQuery.of(context).size.width

  

Then put the main column in a SingleChildScrollView so that Flutter automatically scrolls the screen just enough when open the keyboard.

 

Example:

 

SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width,
          minHeight: MediaQuery.of(context).size.height,
        ),
        child: IntrinsicHeight(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              // CONTENT HERE
            ],
          ),
        ),
      ),
    )

 

 

I will be so much greatfull if this arical or video help someone 

Have nice day

⭐⭐⭐  Buy Food for my Dog 🐶 ⭐⭐⭐

https://buymeacoffee.com/ramy.dmk