I am trying to build an app which retrieves all the table data and display it on the screen.I have made it using a list builder widget .I wanted to add a header to each of the rows retrieved .I tried adding a row widget which contains the header.But it is not getting displayed .
Here is what the out List looks like
I wanted add did dname and age Header by making a row ..but its not visible
Here is what my code looks like
// build list view & its tile
ListView _buildPosts(BuildContext context, List<Post> posts) {
print('Hi');
Row(//This row is not getting displayed
children: [
Container(
child: const Text('Did',
style: TextStyle(
color: Colors.white,
),
),
),
Container(
child: const Text('Dname',style: TextStyle(
color: Colors.white,
),),
),
Container(
child: const Text('Age',style: TextStyle(
color: Colors.white,
),),
),
],
);
return ListView.builder(
itemCount: posts.length,
padding: const EdgeInsets.all(20),
itemBuilder: (context, index) {
return Card(
shadowColor: Colors.white,
color:const Color(0xFF303030),
elevation: 1,
child: IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(posts[index].Did,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
Text(posts[index].Dname,style: const TextStyle(fontWeight: FontWeight.bold,
color:Colors.white,),),
Text(posts[index].Age,style: const TextStyle(fontWeight: FontWeight.bold,color:Colors.white,),
),
],
),
),
);
},
);
}
}
class HttpService {
Future<List<Post>> getPosts() async {
Response res = await get(
Uri.parse('http://localhost/localconnect/driver_change.php'));
print(res.body);
if (res.statusCode == 200) {
List<dynamic> body = jsonDecode(res.body);
List<Post> posts = body.map(
(dynamic item) => Post.fromJson(item),
).toList();
return posts;
} else {
throw "Unable to retrieve posts.";
}
}
}
3
Answers
It can’t be displayed because it isn’t used anywhere! Your _buildPosts() only returns Listview.builder().
Wrap your List view.builder() inside a Column, then move your Row() inside that Column() above Listview.builder().
The best and optimal solution for your case is use
DataTable.It makes table data visualization so simple and it is very easy to useyou can render a list into
rowlike thisI know my answer is far away from your asking question but this is the best approach to handle data table in flutter
The problem is that the row isn’t used anywhere. So instead of using this so called _buildPosts you can simply return a listView.builder. Checkout the code below:
I have added 2 sets of solutions below:
This is the most simplest approach but as per your answer there is another complex approach: