How can I align a form in the center using Flutter?

Question

I have a program written in Flutter and I would like to center the form in the middle of the screen but I can't get it. I tried to use Align and I don't think I am using it correctly! Someone can help me? Thanks

class _Defini extends State<Definicoes> {

  GlobalKey<FormState> _formkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar:
        ...

      body: Container(
        color: Colors.amber.withOpacity(0.80),
    child: Align(
    alignment: Alignment(0, 0),
        child: Form(
          key: _formkey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                        width: 300,
                        height: 300,
                        child: TextFormField(
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                              labelText: "RaspberryPi",
                              labelStyle: TextStyle(color: Colors.white)),
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.white, fontSize: 25.0),
                          validator: (value) {
                            if (value.isEmpty){
                              return "Insira";
                            }
                          },
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                             ...
                            ),
                          ],
                        ),
                        child: FlatButton(
                          color: Colors.white,
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding: EdgeInsets.all(8.0),
                          splashColor: Colors.blueAccent,
                          onPressed: () {
                            if(_formkey.currentState.validate()){

                            }
                          },
                          child: Text(
                            "Ligar",
                          ),
                ),
              ),
            ],
          ),
        ),
      ),
      ),
    );
  }
}

Answer 1

Align is used if you have only one child.

To make the Form be at the center, set the mainAxisAlignment property of your column to MainAxisAlignment.center

Check the code below:

class _Defini extends State<Definicoes> {

  GlobalKey<FormState> _formkey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar:
        ...

      body: Container(
        color: Colors.amber.withOpacity(0.80),
    child: Form(
          key: _formkey,
          child: Column(
            // set the mainAxisAlignment property here
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                        width: 300,
                        height: 300,
                        child: TextFormField(
                          keyboardType: TextInputType.number,
                          decoration: InputDecoration(
                              labelText: "RaspberryPi",
                              labelStyle: TextStyle(color: Colors.white)),
                          textAlign: TextAlign.center,
                          style: TextStyle(color: Colors.white, fontSize: 25.0),
                          validator: (value) {
                            if (value.isEmpty){
                              return "Insira";
                            }
                          },
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                             ...
                            ),
                          ],
                        ),
                        child: FlatButton(
                          color: Colors.white,
                          textColor: Colors.white,
                          disabledColor: Colors.grey,
                          disabledTextColor: Colors.black,
                          padding: EdgeInsets.all(8.0),
                          splashColor: Colors.blueAccent,
                          onPressed: () {
                            if(_formkey.currentState.validate()){

                            }
                          },
                          child: Text(
                            "Ligar",
                          ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}