Why TextAlign.left not work in widget Text?

Question

android studio 3

  return new Container(
        height: 64.0,
        child: new Row(children: [
          new Expanded(child: new Container(color: Colors.cyanAccent,
              child: new Column(children: [
            new Text("Today",
                style: new TextStyle(
                    fontSize: 19.0,
                    color: Colors.black),
                textAlign: TextAlign.left),
            new Text("Thuersday, 26 March")
          ]))),
          new Align(alignment: Alignment.centerRight, child: new Image(image: AssetImage('assets/images/ic_profile.png')))
        ]));

as you can see to align text Today I use textAlign: TextAlign.left. But it not work.

Here result:

Do you want the date to also be on the left? – Josteve Mar 27 '20 at 11:09 — Josteve, Mar 27 '20 at 11:09
@JosteveAdekanbi yes, date must be also in left – Alexei Mar 27 '20 at 11:37 — Alexei, Mar 27 '20 at 11:37

Sam · Accepted Answer · 2020-03-27T11:17:52.773

Text Align will only work if the space occupied by the text is bigger than the text itself.

Wrap your text in an Align widget to solve your issue.

return Container(
      height: 64.0,
      child: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.cyanAccent,
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text("Today",
                        style: TextStyle(fontSize: 19.0, color: Colors.black),
                        textAlign: TextAlign.left),
                  ),
                  Text("Thuersday, 26 March")
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Image(
              image: AssetImage('assets/images/ic_profile.png'),
            ),
          ),
        ],
      ),
    );

Please refer to this answer for more information.

what do you mean by text occupied space is bigger than text? i am confused in this sentence. — Viren V Varasadiya, Mar 27 '20 at 11:21
@VirenVVarasadiya Please refer to the previous question i linked in my answer for a further explanation. — Sam, Mar 27 '20 at 11:26
I checked over their, but didn't get any idea. in that answer i found the same sentence not more than that. — Viren V Varasadiya, Mar 27 '20 at 11:32

score 0 · Answer 2 · answered Mar 27 '20 at 11:30

You have to set the crossAxisAlignment of the Column parent of your text. The width of that Column is equal to her widest child and by default crossAxisAlignment is set to CrossAxiAlignment.center.

 return Container(
        height: 64.0,
        child: Row(children: [
          Expanded(child: Container(color: Colors.cyanAccent,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
            Text("Today",
                style: new TextStyle(
                    fontSize: 19.0,
                    color: Colors.black),
                textAlign: TextAlign.left),
            Text("Thuersday, 26 March")
          ]))),
          Align(alignment: Alignment.centerRight, child: new Image(image: AssetImage('assets/images/ic_profile.png')))
        ]));

Little tip -> you can avoid to type for every Widget the key word new.

Why TextAlign.left not work in widget Text?

2 Answers2