Flutter different alignment in Column

Question

I have a column with three rows:

@override
Widget build(BuildContext context) {
return GestureDetector(
  onTap: () {
    print('card of course clicked');
  },
  child: Card(
    shape: RoundedRectangleBorder(borderRadius: 
    BorderRadius.circular(8.0)),
    child: Container(
      height: 144,
      child: Row(children: [
        Padding(
            padding: EdgeInsets.all(16.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
                child: Image.network(_model._schoolThumb))),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 16),
            Align(
              alignment: Alignment.center,
              child: Text(_model._schoolName,
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.w600,
                      fontSize: 18)),
            ),
            SizedBox(height: 12),
            Row(
              children: <Widget>[
                Icon(Icons.location_on, color: Colors.grey[700]),
                Container(width: 8),
                Text(_model._guides,
                    style: TextStyle(
                        fontSize: 14,
                        color: Colors.black,
                        fontWeight: FontWeight.w400)),
              ],
            ),
            SizedBox(height: 12),
            Row(
              children: <Widget>[
                Icon(Icons.attach_money, color: Colors.grey[700]),
                Container(width: 8),
                Text(_model._priceFrom,
                    style: TextStyle(
                        fontSize: 14,
                        color: Colors.black,
                        fontWeight: FontWeight.w400))
              ],
            )
           ],
         )
        ]),
        ),
       ),
     );
   }

As a result, I have three rows aligned to start.

How can I align the first Text() in the center? Giving properties to the text and wrapping in Expanded, Container, Stack didn't help, or I did it in the wrong way. Thanks in advance!

EDIT

Whole build() method attached

Answer 1

Problem:

By default, the width of the Column is set to the width of the widest child widget of Column.

Solution:

You need to wrap your Column with either Expanded or Flexible.

Like below.

Expanded(
  child: Column(
    children: <Widget>[
      ...
    ],
  ),
)

or

Flexible(
  child: Column(
    children: <Widget>[
      ...
    ],
  ),
)

And then need to use the Align or Center widget to set the alignment to your child widget in your case the Text widget.

Like below:

Align(
  alignment: Alignment.center,
  child: Text(
    "Test",
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
      fontSize: 18,
    ),
  ),
),

or

Center(
  child: Text(
    "Test",
    style: TextStyle(
      color: Colors.black,
      fontWeight: FontWeight.w600,
      fontSize: 18,
    ),
  ),
),