androidflutterflutter-layout

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 :)

enter image description here

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

  • 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,
                      ),
              ],
            ),
          ),
        );
      }