Flutter: ListView.builder displaying List items multiple times

Question

I created 3 list items to display using ListView.builder... but after coding the listView is displaying 1 item 3 times, then i added more items to the list making it a total of 5 items, then i discovered it started displaying each item 5 times before displaying the next item and i also noticed it is not scrollable

bellow is the code

import 'package:flutter/material.dart';
import './list_model.dart';

class Lists extends StatefulWidget {
  @override
  _ListsState createState() => _ListsState();
}

class _ListsState extends State<Lists> {
  List<ItemLists> itemsL = [
    ItemLists(
      title: 'Best Music of the Year',
      discription: 'Davido',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Album Cover design',
      discription: 'Brighter Press',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Vocalist',
      discription: 'Simi-Sola',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Danced',
      discription: 'Black Camaru',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Performance',
      discription: 'ShofeniWere',
      favorite: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
        children: itemsL.map((items) {
      return Container(
        child: ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: itemsL.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: ObjectKey(itemsL[index]),
              child: Card(
                  child: ListTile(
                leading: new IconButton(
                    icon: Icon(
                      Icons.star,
                      color: items.favorite ? Colors.green : Colors.grey,
                    ),
                    tooltip: 'Add to Favorite',
                    onPressed: () {
                      setState(() {
                        items.favorite = !items.favorite;
                      });
                    }),
                title: Text('${items.title}'),
                subtitle: Text('${items.discription}'),
                trailing: IconButton(
                    icon: Icon(Icons.calendar_today), onPressed: null),
              )),
            );
          },
        ),
      );
    }).toList());
  }
}

below is my list model

class ItemLists {
  String title;
  String discription;
  bool favorite;

  ItemLists({this.title, this.discription, this.favorite});
}

below is the screenshot

Answer 1

You were using map function to make multiple ListView.builders, this is the solution:

    class Lists extends StatefulWidget {
  @override
  _ListsState createState() => _ListsState();
}

class _ListsState extends State<Lists> {
  List<ItemLists> items = [
    ItemLists(
      title: 'Best Music of the Year',
      discription: 'Davido',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Album Cover design',
      discription: 'Brighter Press',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Vocalist',
      discription: 'Simi-Sola',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Danced',
      discription: 'Black Camaru',
      favorite: false,
    ),
    ItemLists(
      title: 'Best Performance',
      discription: 'ShofeniWere',
      favorite: false,
    ),
    
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: items.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: ObjectKey(items[index]),
            child: Card(
                child: ListTile(
              leading: new IconButton(
                  icon: Icon(
                    Icons.star,
                    color: items[index].favorite ? Colors.green : Colors.grey,
                  ),
                  tooltip: 'Add to Favorite',
                  onPressed: () {
                    setState(() {
                      items[index].favorite = !items[index].favorite;
                    });
                  }),
              title: Text('${items[index].title}'),
              subtitle: Text('${items[index].discription}'),
              trailing:
                  IconButton(icon: Icon(Icons.calendar_today), onPressed: null),
            )),
          );
        },
      ),
    );
  }
}