Why the text is not align center in flutter

user_10907640 0
Viewed 725

Hi All I am learning flutter and I want the text to be align-center inside the column but the property crossAlignmentCenter is not working can anyone look and told what i am doing wrong here

enter image description here


class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              Container(
                child: Text("Log In", style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.w400,
                  color: Colors.black,
                ),),
              )
          ],
        ),
      ),
      backgroundColor: Colors.teal,
    );
  }
}```
flutter-layout flutter
4 Answers

You need to wrap the Column widget with a SizedBox or a Container with the width of double.infinity. This allows Column to extend as much as the parent allows.

Replace Padding widget with this,


Container(
        width: double.infinity,
        padding: const EdgeInsets.only(left: 32, right: 32, top: 32), 
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "Log In",
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.w400,
                color: Colors.black,
              ),
            )
          ],
        ),
      ),
user_53542290

The reason is that by default columns do not take all available space on the cross axis. So in your example, the column is only as thick as the child it holds. Therefore centering it does not change anything. If you are looking for a solution go to Why CrossAxisAligment not Working in Flex,Row and Column?

user_166660450

If you are expecting to make it the vertical center of the column add mainAxisAlignment for your column widget.

mainAxisAlignment: MainAxisAlignment.center,

If want to have it horizontal center replace your column widget to row and make sure to set mainAxisAlignment and crossAxisAlignnment to center

user_28045810

you can wrap your Text widget inside an Align widget to do this. this is your fixed code:

import 'package:flutter/cupertino.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body: Padding(
        padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              Container(
                child: Align(
                  alignment: Alignment.center,
                  child:Text("Log In", style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.w400,
                  color: Colors.black,
                ),)
                ) ,
              )
          ],
        ),
      ),
      backgroundColor: Colors.teal,
    );
  }
}
user_132122640
Related