'Cannot Center Column Widget
I am new to flutter and i am trying to centre all the widgets inside column widget but its not working. I tried encapsulating column into centre widget but its still the same and aligned with the top of screen. Below is my code, please have a look and let me know what i am doing wrong. Thanks :)
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class SignIn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
children: <Widget>[
Text(
'SignIn Screen',
style: TextStyle(fontSize: 26.0),
),
Padding(
padding: EdgeInsets.only(top: 30.0),
),
TextField(
maxLength: 25,
decoration: InputDecoration(
hintText: 'Enter username',
),
),
TextField(
maxLength: 25,
decoration: InputDecoration(
hintText: 'Enter password',
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
child: Text('SignIn'),
onPressed: _signIn,
),
],
),
),
],
),
),
);
}
Future _signIn() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setBool('isLoggedIn', true);
}
}
Solution 1:[1]
Add MainAxisAlignment.center and remove Expanded
class SignIn extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Padding(
padding: EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'SignIn Screen',
style: TextStyle(fontSize: 26.0),
),
Padding(
padding: EdgeInsets.only(top: 30.0),
),
TextField(
maxLength: 25,
decoration: InputDecoration(
hintText: 'Enter username',
),
),
TextField(
maxLength: 25,
decoration: InputDecoration(
hintText: 'Enter password',
),
),
RaisedButton(
child: Text('SignIn'),
onPressed: _signIn,
),
],
),
),
);
}
Solution 2:[2]
Center vertically
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ ... ],
)
Center horizontally
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ ... ],
)
But if the column is hugging its content then just wrap it in a Center widget
Center(
child: Column(
children: <Widget>[ ... ],
),
)
Solution 3:[3]
For centering vertically,
Center(
child:Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ ... ],
)
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Andrey Turkovsky |
| Solution 2 | |
| Solution 3 | Haramine Sinan |

