Search code examples
fluttercontainerstext-alignment

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


Solution

  • 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