Issue
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",
),
),
),
],
),
),
),
),
);
}
}
Solution
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",
),
),
),
],
),
),
),
);
}
}
Answered By – V.N
Answer Checked By – Marie Seifert (FlutterFixes Admin)