How to center text in container?

Viewed 776

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://imgur.com/a/FWdjPYX

4 Answers

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')
 )
);

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

Wrap your Text Widget in a Center Widget.

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

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