Can't center a column in a container

Question

I've been trying to do this for a while and i just doesn't work. I've tried using Center() and it doesn't work even without errors. I also tried using

mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,

for the column also and it still didn't work. i've done something like this before but now i'm not sure if its because it's in a FractionallySizedBox() ,and i do need it to be in there. Here is the complete code:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Demo Login',
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: Align(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints contraints) {
            return AspectRatio(
              aspectRatio: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  new FractionallySizedBox(
                    widthFactor: 0.7,
                    child: new Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(20),
                          child: Container(
                            decoration: BoxDecoration(
                                border: Border.all(
                              color: Colors.black87,
                              width: 2,
                            )),
                            child: Image.asset(
                              'Assets/6.jpg',
                              color: Color.fromRGBO(255, 255, 255, 0.5),
                              colorBlendMode: BlendMode.modulate,
                            ),
                          ),
                        ),
                        FractionallySizedBox(
                          widthFactor: 0.85,
                          child: Center(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  height: 50,
                                ),
                                TextField(
                                  autofocus: false,
                                  textAlign: TextAlign.center,
                                  keyboardType: TextInputType.text,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.face),
                                      fillColor: Colors.black87,
                                      filled: true,
                                      hintText: "Enter Your Username",
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      ),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      labelText: "Username",
                                      labelStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      )),
                                ),
                                SizedBox(
                                  height: 12,
                                ),
                                TextField(
                                  keyboardType: TextInputType.visiblePassword,
                                  autocorrect: false,
                                  obscureText: true,
                                  textAlign: TextAlign.center,
                                  decoration: InputDecoration(
                                      prefixIcon: Icon(Icons.security),
                                      fillColor: Colors.black87,
                                      filled: true,
                                      hintText: "Enter Your Password",
                                      hintStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      ),
                                      border: OutlineInputBorder(
                                        borderRadius: BorderRadius.circular(5),
                                      ),
                                      labelText: "Password",
                                      labelStyle: TextStyle(
                                        color: Colors.grey,
                                        fontSize: 15,
                                      )),
                                ),
                                SizedBox(
                                  height: 20,
                                ),
                                FlatButton(
                                  onPressed: () {},
                                  color: Colors.blueGrey,
                                  height: 40,
                                  minWidth: 150,
                                  child: Text("Login"),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
      backgroundColor: Colors.grey[800],
    );
  }
}

and the output building this on Linux device:

Many thanks!

score 1 · Accepted Answer · answered Nov 20 '20 at 13:07

I've cleaned you code a little bit and I've tried it on Android table and it works

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: Home(),
    ));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Demo Login',
          style: TextStyle(
            color: Colors.black54,
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.blueGrey,
      ),
      body: Center(
        child: Stack(
          children: [
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.7,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                      color: Colors.black87,
                      width: 2,
                    )),
                    child: Image.asset(
                      'Assets/6.jpg',
                      color: Color.fromRGBO(255, 255, 255, 0.5),
                      colorBlendMode: BlendMode.modulate,
                    ),
                  ),
                ),
              ),
            ),
            Center(
              child: FractionallySizedBox(
                widthFactor: 0.6,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 50,
                    ),
                    TextField(
                      autofocus: false,
                      textAlign: TextAlign.center,
                      keyboardType: TextInputType.text,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.face),
                          fillColor: Colors.black87,
                          filled: true,
                          hintText: "Enter Your Username",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          labelText: "Username",
                          labelStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          )),
                    ),
                    SizedBox(
                      height: 12,
                    ),
                    TextField(
                      keyboardType: TextInputType.visiblePassword,
                      autocorrect: false,
                      obscureText: true,
                      textAlign: TextAlign.center,
                      decoration: InputDecoration(
                          prefixIcon: Icon(Icons.security),
                          fillColor: Colors.black87,
                          filled: true,
                          hintText: "Enter Your Password",
                          hintStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(5),
                          ),
                          labelText: "Password",
                          labelStyle: TextStyle(
                            color: Colors.grey,
                            fontSize: 15,
                          )),
                    ),
                    SizedBox(
                      height: 20,
                    ),
                    FlatButton(
                      onPressed: () {},
                      color: Colors.blueGrey,
                      height: 40,
                      minWidth: 150,
                      child: Text("Login"),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
      backgroundColor: Colors.grey[800],
    );
  }
}

score 0 · Answer 2 · answered Nov 20 '20 at 12:49

0

In your code remove widthFactor: 0.85, then it'll be center aligned.

answered Nov 20 '20 at 12:49

Vignesh

215
2
6

that still didn't work. even before this, the button aligned horizontally but the text fields didn't so i was also thinking it is a problem with the text fields but nothing was aligned vertically. And i also need that code. removing that code just makes the width of the text fields equal to the width of the parent widget so it looks aligned but not quite the result i wanted – Viqtoh Nov 20 '20 at 12:55

Can't center a column in a container

2 Answers2