CODEWITHSUNDEEP
flutterflutter-layout
Night owl
Night owl

Reputation: 145

Why the text is not align center in flutter

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

Upvotes: 1

Views: 3834

Answers (4)

Benyamin
Benyamin

Reputation: 1144

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

Upvotes: 1

Nirmal Code
Nirmal Code

Reputation: 4058

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,
              ),
            )
          ],
        ),
      ),

Upvotes: 5

Dinesh Nagarajan
Dinesh Nagarajan

Reputation: 1243

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

Upvotes: 1

TheUltimateOptimist
TheUltimateOptimist

Reputation: 1219

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?

Upvotes: 1

Related Questions