Flutter - How to change the visibility of a single widget in a widget list?

Question

I pull some variables in Firebase and I create a widget list with these variables. I want to control widget visibility when I click a widget. When I use the Visibility widget and set "visible: widgetVisibility" value, all widgets are changed at the same time. I only want the widget I clicked to change. How can I do that?

body: StreamBuilder<QuerySnapshot>(
        stream: _keyService.getKeys(),
        builder: (context, snapshot) {
          return !snapshot.hasData
              ? const Center(child: CircularProgressIndicator())
              : ListView.builder(
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) {
                    DocumentSnapshot mypost = snapshot.data!.docs[index];

                    return Padding(
                      padding: EdgeInsets.all(size * 0.3),
                      child: InkWell(
                        onTap: () {
                          valueVisible = !valueVisible;
                        },
                  
                        child: Container(
                          decoration: BoxDecoration(
                              color: ColorItems.mainColor,
                              border: Border.all(width: 5, color: Colors.grey),
                              borderRadius: BorderRadius.all(Radius.circular(20))),
                          child: Padding(
                            padding: EdgeInsets.all(size),
                            child: Container(
                              child: Row(
                                children: [
                                  Expanded(
                                    child: Text(
                                      "${mypost['key']}",
                                      style: const TextStyle(
                                          color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                  const Text(
                                    ": ",
                                    style:
                                        TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
                                  ),
                                  const SizedBox(
                                    width: 20,
                                  ),
                                  Expanded(
                                      child: Visibility(
                                    visible: valueVisible,
                                    child: Text(
                                      "${mypost['value']}",
                                      style: const TextStyle(
                                          color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
                                    ),
                                  ))
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    );
                  },
                );
        })

Additionally, screenshots is here..

Answer 1

This might not be the optimal solution, but I always create a List for that purpose:

instead of one valueVisible bool I create a List and add a bool for each item in the list.

...itemBuilder: (context, index) { valueVisibleList.add(true)...

and in the button I then use the current item index to change only the corresponding bool

 onTap: () { setState(({ 
               valueVisibleList[index] = !valueVisibleList[index];
               })
             },