Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
  }
}
like image 520
Zubair Rehman Avatar asked Dec 02 '18 15:12

Zubair Rehman


People also ask

How do you center a column horizontally in flutter?

To center align contents of Column widget horizontally, set crossAxisAlignment attribute with CrossAxisAlignment.

How do you center text in column flutter?

Flutter – Center Align Text in Text Widget To center align the text in a Text widget, provide textAlign property with value TextAlign. center .


3 Answers

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,
                  ),
          ],
        ),
      ),
    );
  }
like image 137
Andrey Turkovsky Avatar answered Oct 22 '22 09:10

Andrey Turkovsky


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>[ ... ],
  ),
)
like image 22
Suragch Avatar answered Oct 22 '22 08:10

Suragch


For centering vertically,

Center(
   child:Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[ ... ],
   )
)
like image 1
Haramine Sinan Avatar answered Oct 22 '22 09:10

Haramine Sinan