How to change the value automatically onTap event in Flutter

Question

I have one Pageview widget and GestureDetector, i want to change the backgound of the Gridview inside the Pageview when the onTab event is triggered in the GestureDetector.

I have achieved 80% of what is required, below i have attached what i have achieved .

with reference to below image i want to change the background color of the Listview which is wrapped inside the GestureDetector. By using the onTap event i am passing the value to the Gridview. The problem is that when i have selected the blue color and its not automatically changing the background color of selected grid.

Below is my code.

ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: colors.length,
                      itemBuilder: (BuildContext context, int index) {
                        if(bgColor == colors[index]) {
                          print(colors[index]);
                          selectedIndex = index;
                        }
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              bgColor = colors[index];
                              selectedIndex = index;
                              colorSelected = bgColor;
                              print('bgColor: $bgColor');
                            });
                          },
                          child: Padding(
                            padding: const EdgeInsets.all(5),
                            child: Container(
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                color: Color(colors[index]), // inner circle color
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: selectedIndex == index
                                    ? SvgPicture.asset(
                                        'assets/svg/categoryTick.svg',
                                        color: Colors.black,
                                      )
                                    : null,
                              ),
                              width: 35.0,
                            ),
                          ),
                        );
                      })

My pageView widget

PageView(
   controller: controller,
   children: [
     MyPage1Widget(selectedColor: bgColor),
     MyPage2Widget(),
     MyPage3Widget(),
   ],
),


class MyPage1Widget extends StatefulWidget {
  final int selectedColor;

  const MyPage1Widget({Key? key, required this.selectedColor}) : super(key: key);

  @override
  State<MyPage1Widget> createState() => _MyPage1WidgetState();
}

List<String> categoryList = [
  "assets/images/Gift.png",
  "assets/images/Grocery.png",
  "assets/images/Education.png",
  "assets/images/heart.png",
  "assets/images/Fuel.png",
  "assets/images/Savings.png",
];

var categoryIndex = [];

class _MyPage1WidgetState extends State<MyPage1Widget> {
  int selectedCard = 0;
  int newBgColor = 0;

  @override
  void initState() {
    super.initState();
    newBgColor = widget.selectedColor;
    print('newBgColor: $newBgColor');
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      itemCount: categoryList.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 10,
        mainAxisSpacing: 30,
      ),
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () {
            selectedCard = index;
            setState(() {
              newBgColor = widget.selectedColor;
            });
          },
          child: Container(
            height: 120,
            width: 120,
            decoration: BoxDecoration(
              color: selectedCard == index ? Color(newBgColor) : Colors.white,
              shape: BoxShape.circle,
            ),
            child: Image.asset(categoryList[index]),
          ),
        );
      },
    );
  }
}

Please help me to resolve this issue, Thanks in advance

Answer 1

try the selectedCard = index inside the setState. Why changing the color in BoxDecoration depends on changing the state of the selectedCard variable.

GestureDetector(
  onTap: () {
     setState(() {
       selectedCard = index;
       newBgColor = widget.selectedColor;
     });
  },
  child: Container(
    height: 120,
    width: 120,
    decoration: BoxDecoration(
       color: selectedCard == index ? Color(newBgColor) : Colors.white,
        shape: BoxShape.circle,
     ),
    child: Image.asset(categoryList[index]),
  ),
);