Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter text left alignment

I'm trying to align all the text to left. However, it's in the middle always as you can see the image below. I've tried using Align widget and setting textAlign property on Text widget to TextAlign.left but no luck.

enter image description here

card.dart

Row(
  children: <Widget>[
    Card(
      elevation: 2,
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(4)),
        child: Image.network('https://loremflickr.com/100/100'),
      ),
    ),
    Padding(
      padding: const EdgeInsets.only(left: 8),
      child: Column(
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: Text(
              'Marry Jane',
              textAlign: TextAlign.left,
              style: TextStyle(fontSize: 16),
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Text(
              'Make-up Artist',
              textAlign: TextAlign.left,
              style: TextStyle(fontSize: 14, color: Color(0xff666666)),
            ),
          ),
          Row(
            children: <Widget>[
              Text(
                '3.5',
                textAlign: TextAlign.left,
                style: TextStyle(fontSize: 18, color: Color(0xff666666)),
              ),
              Icon(FontAwesomeIcons.starHalf)
            ],
          )
        ],
      ),
    )
  ],
),
like image 536
Burak Avatar asked Jan 28 '20 00:01

Burak


1 Answers

Have you tried giving the Column CrossAxisAlignment.start?

    Row(
      children: <Widget>[
        Card(
          elevation: 2,
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(4)),
            child: Image.network('https://loremflickr.com/100/100'),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 8),
          child: Column(
            /// Add this
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Marry Jane',
                style: TextStyle(fontSize: 16),
              ),
              Text(
                'Make-up Artist',
                style: TextStyle(fontSize: 14, color: Color(0xff666666)),
              ),
              Text(
                '3.5',
                style: TextStyle(fontSize: 18, color: Color(0xff666666)),
              ),
            ],
          ),
        )
      ],
    )
like image 132
Federick Jonathan Avatar answered Oct 08 '22 00:10

Federick Jonathan