CODEWITHSUNDEEP
flutter
nzxcvbnm
nzxcvbnm

Reputation: 184

How to center text in container?

The code I wrote places text in container in the center of the first line and I need it to be in the center of the full square (middle line).

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      textFormfield1('name', Controller),
      Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Text('Add at 3 images',
                textAlign: TextAlign.start,
                style: TextStyle(
                    //color: Colors.grey[400],
                    fontWeight: FontWeight.bold,
                    fontSize: 16))
          ]),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
          child: Text(text,        
          textAlign: TextAlign.center),
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.yellow)));
          )
),

Pic of what happens and what I need: https://i.sstatic.net/UGbXX.jpg

Upvotes: 2

Views: 3718

Answers (5)

Mez
Mez

Reputation: 106

The Text widget has a textAlign property that can be used to align text within a container. Other answers did not work for me.

Text(
  'My text',
  textAlign: TextAlign.center,
)

Upvotes: 0

user8759167
user8759167

Reputation:

You can use Center Widget as a parent of column widget and set the crossAsixAlignment proper to center.

    Center(
    child: Column(
    crossAxisAligment: CrossAxisAligment.center,
    children : [
    const Text('This is centered'),
      ]
    ),
)

Upvotes: 0

K. La Rosa
K. La Rosa

Reputation: 46

You should wrap your Text with a Center widget.

Center(
 child: Text('Your text')
);

So in your context

Container(
 child: Center(
  child: Text('Your text')
 )
);

Upvotes: 3

JustCodeNinja
JustCodeNinja

Reputation: 79

Wrap your Text Widget in a Center Widget.

Center(
 child: Text('Your text')
);

Upvotes: 1

Amani Saaduddin
Amani Saaduddin

Reputation: 458

Use the alignment attribute of Container widget like - alignment: Alignment.center,

Upvotes: 1

Related Questions