I want to update the number of items in a AnimatedList in Flutter

Question

In the above image i have one horizontal list view. by selecting any one of the numbers from the listview i want to update the items of AnimatedList view according to the number is selected from the horizontal listview.

when i am taping any one of the number

 onTap: () {
                      setState(() {
                        selectedIndex = index;
                        print(selectedIndex);
                      });
                    },

Code for my AnimatedList

Expanded(
            child: AnimatedList(
              key: key,
              initialItemCount: selectedIndex + 1,
              itemBuilder: (context, index, animation) =>
                  buildItem(items[index], index, animation),
            ),
          ),

           Widget buildItem(item, int index, Animation<double> animation) =>
      ExerciseItemWidget(
          item: item, animation: animation, onClicked: () => removeItem(index));

In my ExerciseItemWidget

        class ExerciseItemWidget extends StatelessWidget {
final ExerciseItem item;
final Animation animation;
final VoidCallback onClicked;

const ExerciseItemWidget({
  @required this.item,
  @required this.animation,
  @required this.onClicked,
  Key key,
}) : super(key: key);

@override
Widget build(BuildContext context) => ScaleTransition(
      scale: animation,
      child:
      Container(
        margin: EdgeInsets.only(left: 30, right: 10, top: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: Colors.transparent,
        ),


        child:  Row(
          children: [
            Container(
              width: 40,
              child:
              IconButton(
                padding: EdgeInsets.only(right: 10),
                icon: Icon(Icons.check_box_outlined, color: Colors.yellow, size: 32),
                onPressed: onClicked,
              ),),
            Expanded(
                child: Container(
                  margin:
                  EdgeInsets.only(right: 10),
                  height: 40,
                  child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        '',
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                            fontFamily: "Kanit"),
                        textAlign: TextAlign.center,
                      )),
                  decoration: BoxDecoration(
                    color: Colors.black,
                  ),
                )),
            Expanded(
                child: Container(
                  margin:
                  EdgeInsets.only(right: 10),
                  height: 40,
                  child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "",
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                            fontFamily: "Kanit"),
                        textAlign: TextAlign.center,
                      )),
                  decoration: BoxDecoration(
                    color: Colors.black,
                  ),
                )),
            Expanded(
                child: Container(
                  margin:
                  EdgeInsets.only(right: 10),
                  height: 40,
                  child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "",
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            color: Colors.black,
                            fontFamily: "Kanit"),
                        textAlign: TextAlign.center,
                      )),
                  decoration: BoxDecoration(
                    color: Colors.black,
                  ),
                )),
            Container(
              width: 40,
                child:
IconButton(
  padding: EdgeInsets.only(right: 10),
    icon: Icon(Icons.delete_rounded, color: Colors.yellow, size: 32),
    onPressed: onClicked,
  ),),
          ],
        ),

      ),
    );
}

Answer 1

initialItemCount property must to set items.lenght you have to resize items list. I dont recommend clear the list: items = [] instead use this method:

void resizeList(int newLenght){
    if(items.length > newLenght){
      //TODO: remove since (newLenght) index.
    }else if(items.length < newLenght){
      //TODO: add (newLenght - items.length) items
    }
  }

on number selected:

onTap: () {
        setState(() {
            resizeList(index+1);
        });
},

sorry, my english is basic:P