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.
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)
],
)
],
),
)
],
),
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)),
),
],
),
)
],
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With