I’m displaying a big grid of TextFormFields but the performance is really poor slowing down the transition.

This is the UI:

And this is the code:

Widget cell({int rowIndex = 0, int columnIndex = 0, bool realIndex = false}) {
    return GestureDetector(
      onTap: () {
        if (practising) return;
        setState(() {
          selected['row'] = rowIndex;
          selected['column'] = columnIndex;
        });
      },
      child: Container(
        padding: EdgeInsets.all(realIndex || !practising ? 8 : 5.5),
        decoration: BoxDecoration(
          borderRadius: realIndex
              ? const BorderRadius.only(
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                )
              : columnIndex == 9
                  ? const BorderRadius.only(
                      bottomLeft: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    )
                  : null,
          color: selected['column'] == columnIndex
              ? Helpers.hexToColor(colors[rowIndex])
              : null,
        ),
        child: Center(
          child: !realIndex && practising
              ? SizedBox(
                  height: 25,
                  child: TextFormField(
                    controller: textControllers[rowIndex][columnIndex],
                    keyboardType: TextInputType.number,
                    showCursor: false,
                    decoration: InputDecoration(
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 0, vertical: 0),
                      fillColor: showColors
                          ? true
                              ? Colors.green
                              : Colors.red
                          : null,
                      filled: showColors,
                      border: const OutlineInputBorder(),
                      enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          width: 2,
                          color: showColors
                              ? true
                                  ? Colors.green[800]!
                                  : Colors.red[800]!
                              : Colors.grey,
                        ),
                      ),
                    ),
                    textAlign: TextAlign.center,
                  ),
                )
              : Text(
                  ((rowIndex + 1) * (columnIndex + 1)).toString() +
                      (realIndex ? 'x' : ''),
                  style: TextStyle(
                    fontWeight: realIndex ? FontWeight.bold : null,
                    color:
                        selected['column'] == columnIndex ? Colors.white : null,
                  ),
                ),
        ),
      ),
    );
  }

First time, since it just displays Texts, it loads much faster, but when clicking Practise, then displays the TextFormFields after taking 2 seconds.

Logic is not affecting performance. Returning just a simple TextFormField(); does the same thing.

I have read this issue, but it was closed without a solution.

How could I improve this performance?