CODEWITHSUNDEEP
flutter
marcin
marcin

Reputation: 399

How to vertically align Text inside Container

I have a Wrap layout with some Container children. Each container has a child, Text

The Container has a fixed height but a flexible width.

How can I vertically align the Text inside the Container? I tried to use alignment: Alignment.centerLeft, but then the Container's width spans the whole parent.

I can not set the width of the Container since I don't know what width the text will be.

Wrap(
      spacing: 3.0, // gap between adjacent chips
      runSpacing: 3.0, // gap between lines
      children: <Widget>[
        new Container(
          height: 30,
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.circular(15),
          ),
          child: Text(
            'hallo',
            style: TextStyle(background: _paint,),
          ),
        ),
        ...

This is how it should look like - but the red text should be vertically centered:

Upvotes: 21

Views: 31828

Answers (5)

Abu Saad Papa
Abu Saad Papa

Reputation: 1946

I don't think we should use Column for alignment purposes. A better way is to use Align widget as shown below:

Container(
  height: 30,
  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
  decoration: BoxDecoration(
  color: Colors.grey[200],
    borderRadius: BorderRadius.circular(15),
  ),
  child: Align(
    alignment: Alignment.center,
    child: Text(
      'hallo',
      style: TextStyle(background: _paint),
    ),
  ),
),

If you have only one child widget and need to align vertically. The best option is using align widget shown below.

Align(alignment: Alignment.centerLeft)

Upvotes: 15

Gpak
Gpak

Reputation: 3390

if you wrap your Texts inside a row add a property

crossAxisAlignment: CrossAxisAlignment.center,

like

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
      Text(ucfirst(activity.name),
        style: TextStyle(
          fontWeight: FontWeight.w400,
          fontSize: 21,),
    ),

That should work for you if you have many Text Widgets inside a row or a single one, see my output below.

enter image description here

Upvotes: -1

gStephin
gStephin

Reputation: 344

           Container(
                alignment: Alignment.center,
                height: 100,
                width: 100,
                margin: EdgeInsets.all(10),
                decoration: BoxDecoration(
                    border: Border.all(width: 1), color: Colors.blueGrey),
                child:Text('Enter a url')

              )

Upvotes: 8

live-love
live-love

Reputation: 52366

To align vertically and horizontally, just use Align widget:

   Align(
    alignment: Alignment.center,
    child: Text(
      'hallo',
    ),

Upvotes: 1

diegoveloper
diegoveloper

Reputation: 103421

Wrap your Container inside a Column and set the mainAxisAlignment to Center

  new Container(
                  height: 30,
                  padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        'hallo',
                        style: TextStyle(background: _paint),
                      ),
                    ],
                  ),
                ),

Upvotes: 25

Related Questions