Right align elements in Flutter that are parts of different rows - flutter

Question

I am building a crypto portfolio app in Flutter.
My main page has a Scaffold that has one column which contains 4 rows. The first three rows are similar in design, each starts with the logo of the crypto, the name and then the amount I hold. The problem is the amount I hold, Since it can be a very big or very small number the value has a wide range and I cannot seem to find a way to align or right justify the values. I want all the numbers to be aligned to the right side of the screen.
This is my code:
return
Scaffold
(
appBar: AppBar(
title: Text('Portfolio'),
),
backgroundColor: Colors.white,
body: Column( children: <Widget>[
Row(
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/usdt_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('USDT',
style: TextStyle(fontSize: 15),
),
),
Container(
alignment: Alignment.topRight,
margin: EdgeInsets.all(30.0),
child: new Text("${data['usdt']}",
style: TextStyle(fontSize: 25),
),
),
],
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/bitcoin_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Bitcoin',
style: TextStyle(fontSize: 15),
),
),
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['btc']}",
style: TextStyle(fontSize: 25),
),
),
],
),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/ethereum_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Ethereum',
style: TextStyle(fontSize: 15),
),
),
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['eth']}",
style: TextStyle(fontSize: 25),
),
),
]
),
Row(// ROW 4
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.lightGreen, // background
onPrimary: Colors.white, // foreground
),
onPressed: ()
{
Navigator.pushNamed
(
context,
BuyPage.id,
);
},
child: Text('Buy'),
),ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {
Navigator.pushNamed
(
context,
SellPage.id,
);
},
child: Text('Sell'),
),
]
),
],
)
);
This is what it currently looks like:

Answer 1

You can try this also
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Row(
children: [
Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.all(10.0),
color: Colors.red,
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text(
'USDT',
style: TextStyle(fontSize: 15),
),
),
],
),
Expanded(
child: Container(
margin: EdgeInsets.all(30.0),
child: new Text(
"100.0",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 25),
),
),
)
],
),
Row(
children: [
Row(
children: [
Container(
height: 50,
width: 50,
margin: EdgeInsets.all(10.0),
color: Colors.green,
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text(
'Bitcoin',
style: TextStyle(fontSize: 15),
),
),
],
),
Expanded(
child: Container(
margin: EdgeInsets.all(30.0),
child: new Text(
"0.000000005",
textAlign: TextAlign.end,
style: TextStyle(fontSize: 25),
),
),
)
],
),
],
),
);
}
}

Answer 2

Add a Spacer between the last two Container of your Rows:
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(10.0),
child: new Image.asset(
'lib/assets/ethereum_logo.png',
height: 60.0,
fit: BoxFit.cover,
),
),
Container(
margin: EdgeInsets.all(10.0),
child: new Text('Ethereum',
style: TextStyle(fontSize: 15),
),
),
Spacer(),//Spacer here
Container(
margin: EdgeInsets.all(30.0),
alignment: Alignment.topRight,
child: new Text("${data['eth']}",
style: TextStyle(fontSize: 25),
),
),
]
),