Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Vertical Alignment Not Working For Column Widgets And Its Children

I am trying to make all my widgets in a column widget to vertically align at the center of the page but after applying MainAxisAlignment and CrossAxisAlignment it still align top. What could be the reason for this. I expected the mainaxis alignment to fix this.

Here is my code:

body: ListView(
      children: [
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // Welcome back
              const SizedBox(height: 10),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 25.0),
                child: Text(
                  'Welcome back, you've been missed!',
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
              const SizedBox(height: 30),

          
              //email textfield
              MyTextField(
                  controller: emailController,
                  hintText: 'Email',
                  obscureText: false,
              ),
              const SizedBox(height: 10),
          
              //Password textfield
              MyTextField(
                  controller: passwordController,
                  hintText: 'Password',
                  obscureText: true,
              ),
              const SizedBox(height: 10),
          
              //signin button
              MyButton(
                onTap: loginUser,
                butlabel: 'Log In',
              ),
         
          ],),
        ),

      ],
    ),
Tags:

2

Answers


  1. 0

    You just need to wrap your Column with an intrinsic height widget that has the same height of the screen:

    enter image description here

    Container(

height: MediaQuery.of(context).size.height,
child: YourColumn(),
)

    Note: after displaying your TextFields, if it’s too height a bottom overflow may happen. You need to know that ‘alignment doesn’t work within the scroll views’.

    So, i would suggest to use SizedBoxs to align your Design within the column rather than alignment that’s if an overflow occurred.

    Login or Signup to reply.
  2. 0 
    Container(
  height: MediaQuery.of(context).size.height,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      // Welcome back
      const SizedBox(height: 10),
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 25.0),
        child: Text(
          'Welcome back, you've been missed!',
          style: TextStyle(
            fontSize: 20,
          ),
        ),
      ),
      const SizedBox(height: 30),

  
      //email textfield
      MyTextField(
          controller: emailController,
          hintText: 'Email',
          obscureText: false,
      ),
      const SizedBox(height: 10),
  
      //Password textfield
      MyTextField(
          controller: passwordController,
          hintText: 'Password',
          obscureText: true,
      ),
      const SizedBox(height: 10),
  
      //signin button
      MyButton(
        onTap: loginUser,
        butlabel: 'Log In',
      ),
  ],),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search