how to display a another of container on GridView item selected on Long press

Question

I want to Select GridView Item using GestureDetector() onLongPress I want to show/display Another Layer/container upon the Existing GridView Item.I tried it Using bool Variable in GestureDectector() to make boolean Variable set to True . But The problem is ,I am getting All of Items of GridView Selected on onLongPressed on any of the GridView Item .

        GridView.builder(

                  shrinkWrap: false,
                  scrollDirection: Axis.vertical,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                   
                      crossAxisCount: 2),
                  itemCount: budgetList.length,
                  itemBuilder: (BuildContext context, int index) {

                    int xNumber= int.parse(bList[index].xNumber);
                    print('Icon Number is here $xNumber');
                    return GestureDetector(
                      onLongPress: (){
                        print('On Long Pressed Detected');
                        setState(() {
                          pressed=true;


                        });
                      },
                      child: Column(
                        children: [
                          IntrinsicHeight(
                            child: (pressed==false)?Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,

                              children: <Widget>[
                                Container(
                                  margin: EdgeInsets.only(left: 20.0,top: 15.0,bottom: 15.0),
                                  child: Column(
                                    children: <Widget>[
                                      Icon(xList[xNumber],size: 35.0,color: Color(0xffE44663),),
                                      SizedBox(height: 10.0,),
                                      Text('${bList[index].categoryName}',style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 16.0,
                                          fontWeight: FontWeight.w600,
                                          fontFamily: 'Rajdhani'),)
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(left: 20.0,top: 15.0,bottom: 15.0),
                                  child: Column(
                                    children: <Widget>[
                                      Text("${bList[index].spentB}",style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 25.0,
                                          fontWeight: FontWeight.bold,
                                          fontFamily: 'Rajdhani'),),
                                      SizedBox(height: 10.0,),
                                      Text('${budgetList[index].totalBudget}',style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 15.0,
                                          fontWeight: FontWeight.w900,
                                          fontFamily: 'Rajdhani'),)
                                    ],

                                  ),
                                ),

                                VerticalDivider(width: 0.7,color: Colors.white60,indent: 0.0,),

                              ],

                            ):Container(
                              color:Color(0xffE44663) ,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,

                                children: <Widget>[
                                  IconButton(icon: Icon(Icons.edit,size: 32.0,color: Colors.white,), onPressed: (){
                                    editCategory(bList[index].id);
                                  }),
                                  IconButton(icon: Icon(Icons.delete,size: 32.0,color: Colors.white,), onPressed: (){
                                    deleteBudget(bList[index].id);
                                  }),
                                ],
                              ),
                            ),
                          ),

                          Divider(height: 0.7,color: Colors.white60,indent: 0.0,)
                        ],
                      ),
                    );

                  }),

Answer 1

Try to separate the grid item in a Stateful Widget and move the logic of the bool value you have mentioned in that widget...