11

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)
            ],
          )
        ],
      ),
    )
  ],
),

1 Answer 1

40

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)),
              ),
            ],
          ),
        )
      ],
    )
2
  • 1
    It worked but I don't understand why its center default. I'm used to Android Layout, just having difficult times sometimes, thanks.
    – Burak
    Commented Jan 28, 2020 at 0:51
  • 1
    Also you could clean all the Alignment and textAlign. I have edited the answer Commented Jan 28, 2020 at 0:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.