what I try to do. I try to make separated in ListView.separated to data I get it from database but that not work I don't know why. I have a table this table have many column in database like Name and Age and location..etc.
Now I want to show one row from this table to the user in ListView.separated so I want to make between this data separated like between( Name separated Age separated Location separated..etc)like that.
I know if I'm bringing multiple set of row data from the database, there's going to be a split between each row, but now I'm trying to show one row then bring all data of column of this row and then be a split between each column data.
I need to make it automatic not by add one by one divider() after each line.
Table:
+---------+--------------+---------------------+
| user_id | Name | Age | Lcation |
+---------+--------------+-----------+---------+
| 1 | Irene | 22 | A |
+---------+--------------+---------------------+
Code:
Container(
child:
FutureBuilder(
future: ApiService().TopOne(ID),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return Divider(
thickness: 1,
);
},
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return Container(
child: Column(
children: [
Text("${snapshot.data[index]['Name']}"),
Text("${snapshot.data[index]['Age']}"),
Text("${snapshot.data[index]['Location']}"),
Text("${snapshot.data[index]['Others']}"),
],
));
},
);
} else if (snapshot.hasError) {
return Center(
child: Image.asset(
'assets/nodata.png',
fit: BoxFit.contain,
width: 180,
height: 180,
));
}
return Center(
child: SizedBox(
height: MediaQuery.of(context).size.height / 1.3,
child: Image.asset(
'assets/no_dataa.png',
fit: BoxFit.contain,
width: 180,
height: 180,
),
));
},
));
}
Any one knows what the error in my code how can I solve this problem? thank you.
You can include Divider
inside Column
widget.
return Container(
child: Column(
children: [
Text("${snapshot.data[index]['Name']}"),
Divider(),
Text("${snapshot.data[index]['Age']}"),
Divider(),
Text("${snapshot.data[index]['Location']}"),
Divider(),
Text("${snapshot.data[index]['Others']}"),
Divider(),
],
),
);
If you dont want to have divider end of the Column, you can use just .builder
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.