How to manipulate only one element of ListView.builder

Question

I am using Animated Container to have a closing animation by manipulating the _height character of the animated container. I am using ListView.builder to create cards , with each having text that is a value in a list (the user can manipulate the list by adding and deleting items). The integrated GestureDetector looks for a double tap and removes an item of the list and manipulates the height. However , the problem is that , all the cards have their height manipulated and disapper. How do we have the animated height manipulation occur only for the card the user double taps?

The listview.builder code is as follows :

ListView.builder(
        padding: EdgeInsets.fromLTRB(0, 0, 0, 100),
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        itemCount: items.length,
        itemBuilder: (context, index) {
          return AnimatedContainer(
            duration: Duration(seconds: 2),
            alignment: Alignment.center,
            decoration: new BoxDecoration(
              color: Color(0xFF324467),
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(100.0)),
            ),
            margin: EdgeInsets.fromLTRB(22, 15, 50, 9),
            height: _height ? 80 : 0,
            child: Stack(
              children: <Widget>[
                GestureDetector(
                  onDoubleTap: () {
                    setState(() {
                      _height = !_height;
                    });
                    setState(() {
                      items.removeAt(index);
                    });
                  },
                  child: Card(
                    color: Color(0xFF324467),
                    elevation: 0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 30,
                          width: 63,
                          child: RaisedButton(
                            onPressed: () {
                              setState(() {
                                _height = !_height;
                              });
                              setState(() {
                                items.removeAt(index);
                              });
                            },
                            elevation: 0,
                            color: Colors.transparent,
                            shape: CircleBorder(
                              side: BorderSide(
                                width: 2.3,
                                color: Colors.blue,
                              ),
                            ),
                          ),
                        ),
                        Padding(padding: EdgeInsets.fromLTRB(0, 0, 7, 0)),
                        Flexible(
                          child: Container(
                            child: Text(
                              items[index],
                              overflow: TextOverflow.fade,
                              style: TextStyle(
                                fontSize: 21,
                                fontWeight: FontWeight.w400,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),

Answer 1

The problem is with height: _height ? 80 : 0, this line. _height is a variable which is being checked against all the list item. if you set _height = false all your item list will be gone.

Use AnimatedList for remove/add animation in the list. The page has reference code lab, which uses an AnimatedList to create an effect when items are removed or added to the list.

If you want solution in your current approach, then store the _height value against every list item. You can use Map<objectId,bool> or add a bool variable in your current model. then check the item status. Hope you will get the idea ;-)