Align element independent in flutter Row/Column - flutter

Question

I am new to the flutter and recently wide coding I came to a scenario where I have to indecently align the elements in the row. I have 3 child elements lets call it A, B and C. My requirement is to to the A and B to the extreme left of the row and the element C to the extreme right.
Expectation:
My code:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Flexible(
child: Text('name', overflow: TextOverflow.ellipsis,),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
But the output is coming like this:
When I tried using Spacer() the output comes like this:
Anyone can please help me with this. Thanks in advance.

Answer 1

wrap your text with Expanded widget and set your textAlign of your text widget to TextAlign.start like below code:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Expanded(
child: Text(
'name',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),

Answer 2

Try this, it should work for you.
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(width: 10),
Expanded(
child: Text('name', align: TextAlign.start, overflow: TextOverflow.ellipsis),
),
SizedBox(width: 10),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text('Challenge', style: TextStyle(color: Colors.white, fontSize: 12)),
onPressed: () {},
)
)
)
]
)

Answer 3

You have to wrap your Text widget in an Expanded widget like the example below.
Try this, it works perfectly,
Check code below:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Expanded(
// wrap your text widget with an Expanded widget
child: Text(
'name',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
I hope this helps you.