How to vertically align Text inside Container

Question

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:

Answer 1

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