You Can used **Flexible or Expanded Widget** You should try to below code :
Card(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(15.0),
),
margin: EdgeInsets.all(16.0),
child: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.centerLeft,
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.directions_car),
SizedBox(
width: 10,
),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Text 1"),
SizedBox(
height: 4,
),
Text('TEXT 2'),
],
),
),
SizedBox(
width: 27,
),
Flexible(
child: Container(
child: Column(
children: [
Text(
'1 World Way, Los Angeles, CA 90045, USA',
textAlign: TextAlign.left,
),
SizedBox(
height: 4,
),
Text(
'FLIGHT 3231',
textAlign: TextAlign.left,
),
],
),
),
),
],
),
],
),
),
),
Your Screen Like this :
[![Screen Like this][1]][1]
[1]: https://i.stack.imgur.com/sPD8W.png
The answer: **Row widget can't use different crossAxisAlignment types for its children.**
But I found another solution for my layout, with `Stack` widget in root. Here is working code:
```(Dart)
class ItemWidget extends StatelessWidget {
final ItemViewModel model;
const ItemWidget({Key key, @required this.model}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(children: [
Positioned.fill(
child: Container(
padding: EdgeInsets.only(left: 16),
alignment: Alignment.centerLeft,
child: Text(model.typeLabel),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(width: 24),
Expanded(
flex: 6,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: 4),
Text(
'Volume:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.volume,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
Text(
'Filled:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.filled,
textAlign: TextAlign.end,
),
SizedBox(height: 4)
],
),
),
SizedBox(width: 16),
Expanded(
flex: 6,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: 4),
Text(
'Price:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.price,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
Text(
'Total:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.total,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
Text(
'Fee:',
textAlign: TextAlign.end,
),
SizedBox(height: 2),
Text(
model.fee,
textAlign: TextAlign.end,
),
SizedBox(height: 4),
],
)),
SizedBox(width: 16),
],
)
]);
}
}
```
The result is:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/8aAEm.jpg