如何在使用 map() 时使用 listTile 在 Flutter 中制作分隔符？

Question

I am creating a listView using a.map(), and I want to put a divider between the lines. I want to use either the Divider() method or listTiles.divideTiles(), but I don't know how to implement it well. I don't know if this isn't possible or if I don't really understand the method(which it may be because I am fairly new to Flutter), but I think my app would look a lot better with the dividers. Here is the build method I want to create them in:

  Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(title: Text("Grocery Lists")),
  drawer: AppDrawer(),
  body: ListView(
    children: groceryListNames.map(
          (data) => ListTile(
            trailing: const Icon(Icons.arrow_forward_ios),
            title: Text(
              data,
              style: GoogleFonts.biryani(fontSize: 24),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => GroceryListPage(
                          listTitle: "$data Grocery List",
                        )),
              );
            },
          ),
        )
        .toList(),
  ),
);

}

Answer 1

While working with dynamically-generated List Views you should use ListView.separated() (similar to ListView.builder() ), which gives a better performance due to on-the-go rendering:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Grocery Lists")),
    drawer: AppDrawer(),
    body: ListView.separated(
      itemCount: groceryListNames.length,
      separatorBuilder: (_, __) => const Divider(),
      builder: (context, index) {
          final data = groceryListNames[index];
          return ListTile(
              trailing: const Icon(Icons.arrow_forward_ios),
              title: Text(
                data,
                style: GoogleFonts.biryani(fontSize: 24),
              ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => GroceryListPage(
                            listTitle: "$data Grocery List",
                          )),
                );
              },
            ),
          ),},
    ),
  );
}