How do I place ToggleButtons inside a GridView

Question

I've created a GridView that has ToggleButtons. I was able to select a single ToggleButton at one time but I needed to place the ToggleButtons in Rows of 3 so there are 9 ToggleButtons in total. To do this I placed them inside a GridView but it's come back with an error saying 'children.length == isSelected.length': is not true.' as seen below.

Here is the code below with the GridView together with the ToggleButtons:

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) {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget> [
        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/image6.png'),
        Image.asset('images/image7.png'),
        Image.asset('images/image8.png'),
        Image.asset('images/image9.png')
        ].asMap().entries.map((widget) {
    Container(
    height: 100,
    width: 107,
    child: ToggleButtons(
    children: [widget.value],
    onPressed: (int index) {
    setState(() {
    for (int i = 0; i < isSelected.length; i++) {
    isSelected[i] = i == index;
    }
    });
    },
    isSelected: (isSelected),
    selectedBorderColor: Color(0xff2244C7),
    borderWidth: 3,
    borderRadius: BorderRadius.all(Radius.circular(8)
    ),
    ),
    );
    }).toList(),
    );
  }
}

I've attached a picture of the solution.

Answer 1

You should put 9 widgets in children of ToggleButtons. The children of Toggle buttons should have equal number of widget as isSelected lenght. Another problem is when you use GridView with this code It generate 81 Toggle buttons and each 9 buttons are top of themselves. I offer you try this code:

class Backgrounds extends StatefulWidget {
  @override
  _BackgroundsState createState() => _BackgroundsState();
}

class _BackgroundsState extends State<Backgrounds> {
  List<String> imagePath = [
    'images/image1.png',
    'images/image2.png',
    'images/image3.png',
    'images/image4.png',
    'images/image5.png',
    'images/image6.png',
    'images/image7.png',
    'images/image8.png',
    'images/image9.png'
  ];
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      scrollDirection: Axis.vertical,
      crossAxisCount: 3,
      children: List.generate(
        9,
        (index) => index == 0
            ? ToggleButtonWidget(
                isFirst: true,
                imagePath: imagePath[index],
              )
            : ToggleButtonWidget(
                imagePath: imagePath[index],
              ),
      ),
    );
  }
}

class ToggleButtonWidget extends StatefulWidget {
  final bool isFirst;
  final String imagePath;
  ToggleButtonWidget({this.isFirst = false, this.imagePath});
  @override
  _ToggleButtonWidgetState createState() => _ToggleButtonWidgetState();
}

class _ToggleButtonWidgetState extends State<ToggleButtonWidget> {
  List<bool> _isSelected;
  @override
  void initState() {
    _isSelected = [widget.isFirst ? true : false];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 107,
      child: ToggleButtons(
        children: [
          Image.asset(widget.imagePath),
        ],
        isSelected: _isSelected,
        onPressed: (int index) {
          setState(() {
            _isSelected[0] = !_isSelected[0];
          });
        },
        selectedBorderColor: Color(0xff2244C7),
        borderWidth: 3,
        borderRadius: BorderRadius.all(Radius.circular(8)),
      ),
    );
  }
}