I have an integer and boolean setup like list within a list.

  List<List<int>> numberBoxes = [
    [1, 2, 3, 4, 5, 6, 7],
    [8, 9, 10, 11, 12, 13, 14],
    [1, 1, 2, 1, 1, 2, 2],
  ];

  List<List<bool>> pressButton = [];

I am creating a button for each numberBoxes:

Column(
  children: numberBoxes.map((List<int> data) {
    return Row(
      children: data.map((int datax) {
        return Expanded(
          child: Padding(
            padding:
                const EdgeInsets.fromLTRB(5.0, 1.0, 5.0, 2.0),
            child: RaisedButton(
              padding: EdgeInsets.all(1.0),
              child: Text(datax.toString()),
            ),
          ),
        );
      }).toList(),
    );
  }).toList(),
),

I wanted to change the color of the button if it was clicked by adding this under the RaisedButton but what will I put in the pressButton[][] to determine which current position am I in the list.

color: pressButton[][]
    ? Colors.grey
    : Colors.blue,
onPressed: () {
  setState(() {
    pressButton[][] =
        !pressButton[?][?];
  });
},


Solution 1: Huthaifa Muayyad

This was very interesting to overcome, spent a few hours on it haha, but here it goes. I used a listviewBuilder inside another ListvIewBuilder. What took two hours was dealing with renderflex restrains.

enter image description here

class Testing extends StatefulWidget {
  @override
  _TestingState createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  List<List<int>> numberBoxes = [
    [1, 2, 3, 4, 5, 6, 7],
    [8, 9, 10, 11, 12, 13, 14],
    [1, 1, 2, 1, 1, 2, 2],
  ];

  List<List<bool>> pressButton = [];
  @override
  void initState() {
    super.initState();
//this will map a false value for every item in the corresponding 
//'numberBoxes' list. I picked false, because when it starts, they 
//won't be clicked yet.
    pressButton = numberBoxes.map((e) => e.map((e1) => 
    false).toList()).toList();
    }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
           title: Text('StackOverFlow Puzzle'),
          ),
      body: Column(
        children: [
          SizedBox(
            child: ListView.builder(
                shrinkWrap: true,
                physics: ScrollPhysics(),
                itemCount: numberBoxes.length,
                itemBuilder: (BuildContext context, int index1) {
                  print(numberBoxes.length);
                  return Row(
                    children: [
                      Expanded(
                        child: SizedBox(
                          height: 50,
                          child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              shrinkWrap: true,
                              itemCount: numberBoxes[index1].length,
                              itemBuilder: (BuildContext context, int index2) {
                                return SizedBox(
                                  height: 50,
                                  width: 50,
                                  child: Padding(
                                    padding: const EdgeInsets.fromLTRB(5.0, 1.0, 5.0, 2.0),
                                    child: RaisedButton(
                                      color: pressButton[index1][index2] ? Colors.grey : Colors.blue,
                                      onPressed: () {
                                        setState(() {
                                          pressButton[index1][index2] = !pressButton[index1][index2];
                                        });
                                      },
                                      padding: EdgeInsets.all(1.0),
                                      child: Text(numberBoxes[index1][index2].toString()),
                                    ),
                                  ),
                                );
                              }),
                        ),
                      ),
                    ],
                  );
                }),
          ),
        ],
      ),
    );
  }
}


Solution 2: Ουιλιαμ Αρκευα

button_controller.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ButtonController extends GetxController{
  final int row, col;
  var color = Colors.blueGrey.obs;
  Expanded? button;

  void toggleColor() => color.value = color.value == Colors.blueGrey ? Colors.red : Colors.blueGrey;

  ButtonController({required String label, required this.row, required this.col}) {
    button = Expanded(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(5, 1, 5, 2),
        child: Obx(() => ElevatedButton(
            onPressed: () {
              print('Button [$row, $col] clicked...');
              toggleColor();
            }, 
            child: Text(label),
            style: ElevatedButton.styleFrom(
              padding: EdgeInsets.all(1),
              primary: color.value,
            ),
          ),
        ),
      ),
    );
  }
}

home_page.dart

import 'package:buttons_array/src/controllers/button_controller.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  /* ---------------------------------------------------------------------------- */
  const HomePage({Key? key}) : super(key: key);
  /* ---------------------------------------------------------------------------- */
  @override
  Widget build(BuildContext context) {
    final numberBoxes = [
      [1, 2, 3, 4, 5, 6, 7],
      [8, 9, 10, 11, 12, 13, 14],
      [1, 1, 2, 1, 1, 2, 2],
    ];
    // var pressButton = <List<bool>>[];

    return Scaffold(
      appBar: AppBar(
        title: Text('Hi!'),
        centerTitle: true,
      ),
      body: Column(
        children: List<Widget>.generate(numberBoxes.length, (r) => Row(
          children: List<Widget>.generate(numberBoxes[r].length, (c) => ButtonController(label: numberBoxes[r][c].toString(), row: r, col: c).button!),
        )),
      ),
    );
  }
}

Result

enter image description here