在 ListView.separated 中分隔在 flutter 中不起作用

Question

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,
        ),
      ));
    },
  ));
}

Image as what I try to do:

Any one knows what the error in my code how can I solve this problem? thank you.

Answer 1

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