Toggle Button not toggling in Flutter

Question

I've created a GridList with ToggleButtons in but when I try and Toggle the buttons between each other nothing happens. Any ideas? I have a list isSelected and I've called this in the setState. The Layout is good but as soon as I use the GridView it seems to change the setState.

class Backgrounds extends StatefulWidget {

  @override
  _BackgroundsState createState() => _BackgroundsState();
}

class _BackgroundsState extends State<Backgrounds> {

  List<bool> isSelected;

  void initState() {
    isSelected = [true, false, false, false, false, false, false, false, false];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var counter = 0;
    return GridView.count(
        padding: EdgeInsets.all(12),
        crossAxisCount: 3,
        mainAxisSpacing: 0,
        crossAxisSpacing: 0,
        children: [
          Image.asset('images/image1.png'),
          Image.asset('images/image2.png'),
          Image.asset('images/image3.png'),
          Image.asset('images/image4.png'),
          Image.asset('images/image5.png'),
          Image.asset('images/image5.png'),
          Image.asset('images/image6.png'),
          Image.asset('images/image7.png'),
          Image.asset('images/image8.png')
          ].asMap().entries.map((widget) {
          final index = ++counter - 1;
          return ToggleButtons(
    onPressed: (int index) {
      print('selected');
    setState(() {
      // isSelected[index] = !isSelected[index];
    for (int i = 1; i < isSelected.length; i++) {
    isSelected[i] = i == index;
    }
    });
    },
     isSelected: [isSelected[index]],
            // isSelected: (isSelected),
    selectedBorderColor: Color(0xff2244C7),
            borderColor: Colors.transparent,
    borderWidth: 3,
    borderRadius: BorderRadius.all(Radius.circular(8),
    ),
    children: [widget.value],
    );
    }).toList());
}
}

Answer 1

The problem lies in the 'onPressed()' function of Toggle Buttons. Since the List for Grid view is generated by a map, each time the children of Toggle Buttons children list size as 1, the index argument in 'OnPressed()' will always give value 0. I would recommend to use 'widget.key' within map as that would give correct index of the child widget. Hence Grid View code should be

return GridView.count(
    padding: EdgeInsets.all(12),
    crossAxisCount: 3,
    mainAxisSpacing: 0,
    crossAxisSpacing: 0,
    children: [
      Image.asset('images/image1.png'),
      Image.asset('images/image2.png'),
      Image.asset('images/image3.png'),
      Image.asset('images/image4.png'),
      Image.asset('images/image5.png'),
      Image.asset('images/image5.png'),
      Image.asset('images/image6.png'),
      Image.asset('images/image7.png'),
      Image.asset('images/image8.png')
      ].asMap().entries.map((widget) {
      final index = ++counter - 1;
      return ToggleButtons(
onPressed: (_) {
  print('selected');
setState(() {
for (int i = 0; i < isSelected.length; i++) {
// isSelected[index] = !isSelected[index];
isSelected[i] = i == widget.key;
}
});
},
 isSelected: [isSelected[widget.key]],
        // isSelected: (isSelected),
selectedBorderColor: Color(0xff2244C7),
        borderColor: Colors.transparent,
borderWidth: 3,
borderRadius: BorderRadius.all(Radius.circular(8),
),
children: [widget.value],
);
}).toList());