CODEWITHSUNDEEP
fluttercontainerstext-alignment
user9918
user9918

Reputation: 121

Flutter: Texts in container are centered instead of left-aligned

I would like to display some rows of text in a Container. The texts are written as AutoSizedText so that they can be longer than one row. All texts should be left-aligned, so I use textAlign: TextAlign.left. But if in the container there are more than one AutoSizedText, the texts are displayed centered instead of left-aligned.

Does anybody know what my mistake is?

new Container(
            width: double.infinity,
            margin: const EdgeInsets.all(30.0),
            padding: const EdgeInsets.all(10.0),
            decoration: BoxDecoration(
              border: Border.all(width: 3),
              borderRadius: BorderRadius.all(Radius.circular(5.0)),),
            child: Column(
              children: <Widget>[
                AutoSizeText("Title", textAlign: TextAlign.left, overflow: TextOverflow.ellipsis, 
                   maxLines: 20,),
                AutoSizeText("Date: 01.01.2000", textAlign: TextAlign.left,
                   overflow: TextOverflow.ellipsis, maxLines: 20,),
                AutoSizeText("Author: John Doe", textAlign: TextAlign.left, 
                   overflow: TextOverflow.ellipsis, maxLines: 20,),
                AutoSizeText("This is the message which should be displayed.",
                   textAlign: TextAlign.left, overflow: TextOverflow.ellipsis, maxLines: 20,),
            ]))

enter image description here

Upvotes: 1

Views: 909

Answers (1)

Ravinder Kumar
Ravinder Kumar

Reputation: 7990

This is happening because of crossAxisAlignment property of Column, which is Center by default

read this in offcial docs

To fix this write below code inside Column,

Column(
crossAxisAlignment = CrossAxisAlignment.start
...
)

Find your complete solution here gist

output:

enter image description here

Upvotes: 4

Related Questions