如何在 Flutter 的 ListView onPressed 中使图标不可见？

Question

I have a listView that displays a horizontal list of elements. I have positioned an icon on each box. When the user selects or presses that particular icon (add button), it should make the icon invisible so that the user cannot press it again.

The problem I have is that ALL the icons then become invisible, for all elements of that listView.

How can I fix this?

I figured out that the solution will be related to some key value or keys.. so I added a key to the Visible parent widget, but it has made no difference.

Here is the code

             Container(
            margin: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
            height: MediaQuery.of(context).size.height*0.4,
            width: MediaQuery.of(context).size.width,
            child: 
            ListView.builder(
              primary: false,
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              itemCount: mylist.length,
              itemBuilder: (context, listItemIndicator)
              {

                     // Card details here


                      Positioned(bottom: 0, right: 0,
                        child: Visibility(key: UniqueKey(),
                            visible: isVisible == true ? true : false,
                            maintainSize: true,
                            maintainAnimation: true,
                            maintainState: true,
                          child: IconButton(

                              icon: Icon(Icons.add_box), iconSize: 40, 
                              onPressed: ()
                                {
                                    isVisible = false; //now all elements disappear, not just the one I pressed.

                                }

                            }
                          ),
                        ),
                      ),

The cards display with a + icon them. But as I mentioned, when I press the + icon, ALL the elements have their icons made invisible - not just the one I pressed.

Answer 1

All icons disappear because isVisible is same for every item.

You can create map of "visibilities"

Map<int, bool> visibilities = Map.fromIterable(
  mylist,
  key: (k) => mylist.indexOf(k),
  value: (_) => true,
);

and then

Visibility(
  visible: visibilities[listItemIndicator],
  maintainSize: true,
  maintainAnimation: true,
  maintainState: true,
  child: IconButton(
    icon: Icon(Icons.add_box),
    iconSize: 40,
    onPressed: () {
      visibilities[listItemIndicator] = false;
    },
  ),
)

OR you can create stateful widget for that button

class CustomButton extends StatefulWidget {
  @override
  _CustomButtonState createState() => _CustomButtonState();
}

class _CustomButtonState extends State<CustomButton> {
  bool visible = true;

  @override
  Widget build(BuildContext context) {
    return Visibility(
      visible: visible,
      maintainSize: true,
      maintainAnimation: true,
      maintainState: true,
      child: IconButton(
        icon: Icon(Icons.add_box),
        iconSize: 40,
        onPressed: () {
          setState(() {
            visible = false;
          });
        },
      ),
    );
  }
}