How can I align texts? - flutter

Question

I'm trying to create a leaderBoard. But I can't get the texts in the same alignment. How can I put the texts in the same line? As I understand it, I cannot put the texts in line because I use mainAxisAlignment: MainAxisAlignment.spaceBetween in the row section. Is there any other way to line up the texts?
return Container(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Sıralama",style: TextStyle(fontSize: 20), ),
Text("İsim Soyisim",style: TextStyle(fontSize: 20) ),
Text("Doğru cevap",style: TextStyle(fontSize: 20) ),
],
),
Divider(thickness: 2,color: Colors.grey,),
Expanded(
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (index == 0)
Container(
width: 50,
height: 50,
child: Image.asset(
"assets/images/gold.png"))
else if (index == 1)
Container(
color: Colors.red,
width: 50,
height: 50,
child: Image.asset(
"assets/images/silver.png"))
else if (index == 2)
Container(
width: 50,
height: 50,
child: Image.asset(
"assets/images/bronze.png"))
else if (index > 2)
Text('${index + 1}',
style: TextStyle(fontSize: 20)),
Align(
child: Text(
'${snapshot.data[index].name}',
style: TextStyle(fontSize: 20)),
alignment: Alignment.centerLeft,),
Text(
'${snapshot.data[index].dogruCevap.toString()}',
style: TextStyle(fontSize: 20))
],
),
);
}),
),
],
));

Answer 1

You can use the DataTable for better UI and easy to render the table.
List<String> images = [
"assets/images/gold.png",
"assets/images/silver.png",
"assets/images/bronze.png"
];
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('DataTable'),
),
body: Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(
label: Text("Sıralama", style: TextStyle(fontSize: 20))),
DataColumn(
label:
Text("İsim Soyisim", style: TextStyle(fontSize: 20))),
DataColumn(
label: Text("Doğru cevap", style: TextStyle(fontSize: 20))),
],
rows: snapshot.data.asMap().entries.map<DataRow>((e) {
return DataRow(cells: [
DataCell(Image.asset(images[e.key])),
DataCell(Text(
'${e.value.name}',
style: TextStyle(fontSize: 20))),
DataCell(Text(
'${e.value.dogruCevap.toString()}',
style: TextStyle(fontSize: 20))),
]);
}).toList(),
),
),
),
),
);
}

Answer 2

Using a Table will simplify your widget:
import 'package:flutter/material.dart';
class Score {
final String name;
final int score;
Score(this.name, this.score);
static Widget getSymbol(int position) {
switch (position) {
case 0:
return Icon(Icons.directions_boat);
case 1:
return Icon(Icons.directions_train);
case 2:
return Icon(Icons.directions_bike);
default:
return Text((position + 1).toString(),
style: TextStyle(fontSize: 24.0));
}
}
}
List<Score> scores = [
Score('Azerty', 3),
Score('Qwertyuiop', 9),
Score('Wxcvbn', 0),
Score('Qsd', 7),
];
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Table(
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
columnWidths: {
0: FlexColumnWidth(2),
1: FlexColumnWidth(3),
2: FlexColumnWidth(3),
},
children: [
TableRow(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(width: 2.0)),
),
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Sıralama"),
),
Text("İsim Soyisim"),
Text("Doğru cevap"),
],
),
...scores
.asMap()
.entries
.map(
(entry) => TableRow(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Score.getSymbol(entry.key),
),
),
Text(
'${entry.value.name}',
),
Text(
'${entry.value.score.toString()}',
),
],
),
)
.toList(),
],
),
),
),
);
}