Flutter 如何在flatter中单独访问每个小部件？

我有一个自定义有状态小部件（单元）的NM矩形网格，用户通过单击与之交互，在用户选择所有需要的单元后-有一个背景NM数组（数组），同时更新，然后他单击一个按钮，然后根据N*M数组运行一些代码并逐个单元修改数组单元

现在我想在N*M网格小部件中输出逐单元转换

更具体地说，将有一个简单的迷宫网格，用户在他按下的每个单元格上放置一个障碍物，然后他点击findPath方法，在findPath方法中的每个步骤，我需要在迷宫网格中显示过渡

我完成了用户的输入，并使用findPath方法，但无法在迷宫网格上显示每个步骤的输出

代码：-

import 'package:flutter/material.dart';
import '2darray.dart';

int rowNum = 10;
int colNum = 10;
gridClass playArea ;
void main() {
  playArea = new gridClass(rowNum,colNum);
  runApp(MaterialApp(
  home: Scaffold(
   appBar: AppBar(
     title: Text(
       'this is title',
         style: TextStyle(
           backgroundColor: Colors.purple[600],
            fontSize: 20.0,
             fontWeight: FontWeight.bold,
              color: Colors.black,
         ),
       ),
        centerTitle: true,
        backgroundColor: Colors.purple[700],
      ),
   body: Center(
      child: new GridDisplay(), 
        ),
       ),
      ));
     }


   int currNodeValue = 0;

    class node extends StatefulWidget { // this is the cell stateful 
                               //custom widget
  int nodeRow , nodeCol;
  node({@required this.onPressed});
  GestureTapCallback onPressed;
    @override 
    _nodeState createState() => _nodeState();
     }

   class _nodeState extends State<node> {
     int cnt = 0;
     Color color = Colors.grey;

     change_color(){    
        setState(() {
        int r = widget.nodeRow , c = widget.nodeCol;
        print('$r $c');
        playArea.grid[r][c] +=1;
        playArea.grid[r][c]%=2;
       print(playArea.grid);
       color =  (color == Colors.grey ) ? Colors.black : Colors.grey;
         });
      } 
    @override
     Widget build(BuildContext context) {
      return Container(
        height: 20,
        width: 20,
        child: GestureDetector(
        onTap: () => change_color(),
        child: Container(
        color: color,
           ),
         ),
       );
      }
     }


  int totRow = 0;
  class listDisplay extends StatefulWidget {
  int rowNum;
  @override
  _listDisplayState createState() => _listDisplayState();
         }

    class _listDisplayState extends State<listDisplay> {
     @override
     double length = colNum.toDouble() * 20;
     double height =  20;
     Widget build(BuildContext context) {
     return Container(
          width: length,
         height: height,
         child: new ListView.builder(
         scrollDirection: Axis.horizontal,
         shrinkWrap: true,
         itemCount:colNum ,
         itemBuilder: (BuildContext ctxt , int Index){
         node curr = new node();
         curr.nodeRow =(currNodeValue/rowNum).toInt();
         curr.nodeCol = currNodeValue - (curr.nodeRow * rowNum);
         currNodeValue++;
         return curr;
            }
          ),
         );
        }
      }

   class GridDisplay extends StatefulWidget {
   @override
   _GridDisplayState createState() => _GridDisplayState();
      }

    class _GridDisplayState extends State<GridDisplay> {
    @override

    Widget build(BuildContext context) {
       return Container(
      child: new ListView.builder(
       itemCount: rowNum,
       scrollDirection: Axis.vertical,
       itemBuilder:(BuildContext ctxt , int Index){
        return Center(
          child: new listDisplay()
               );
              }
            ),
          );
         }
        }

导入“包装：颤振/材料.省道”；
导入“2darray.dart”；
int rowNum=10；
int colNum=10；
gridClass游戏区；
void main（）{
playArea=新的gridClass（rowNum、colNum）；
runApp（材料应用程序）(
家：脚手架(
appBar:appBar(
标题：正文(
“这是标题”，
样式：TextStyle(
背景颜色：颜色.紫色[600]，
字体大小：20.0，
fontWeight:fontWeight.bold，
颜色：颜色，黑色，
),
),
标题：对，
背景颜色：颜色.紫色[700]，
),
正文：中(
子项：新建GridDisplay（），
),
),
));
}
int currNodeValue=0；
类节点扩展StatefulWidget{//这是单元格stateful
//自定义小部件
int nodeRow、nodeCol；
节点（{@required this.onPressed}）；
按一下手势；
@凌驾
_nodeState createState（）=>\u nodeState（）；
}
类_nodeState扩展状态{
int-cnt=0；
颜色=颜色。灰色；
更改颜色（）{
设置状态（）{
int r=widget.nodeRow，c=widget.nodeCol；
印刷品（“$r$c”）；
playrea.grid[r][c]+=1；
游戏区网格[r][c]=2；
打印（playrea.grid）；
颜色=（颜色==颜色.灰色）？颜色.黑色：颜色.灰色；
});
} 
@凌驾
小部件构建（构建上下文）{
返回容器(
身高：20，
宽度：20，
儿童：手势检测器(
onTap:（）=>更改颜色（），
子：容器(
颜色：颜色，
),
),
);
}
}
int-totRow=0；
类listDisplay扩展了StatefulWidget{
int rowNum；
@凌驾
_listDisplayState createState（）=>\u listDisplayState（）；
}
类_listDisplayState扩展状态{
@凌驾
double length=colNum.toDouble（）*20；
双倍高度=20；
小部件构建（构建上下文）{
返回容器(
宽度：长度，
高度:高度,，
子项：新建ListView.builder(
滚动方向：轴水平，
收缩膜：对，
itemCount:colNum，
itemBuilder：（BuildContext ctxt，int Index）{
节点电流=新节点（）；
curr.nodeRow=（currNodeValue/rowNum.toInt（）；
curr.nodeCol=currNodeValue-（curr.nodeRow*rowNum）；
currenodevalue++；
返回货币；
}
),
);
}
}
类GridDisplay扩展了StatefulWidget{
@凌驾
_GridDisplayState createState（）=>\u GridDisplayState（）；
}
类GridDisplayState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回容器(
子项：新建ListView.builder(
itemCount:rowNum，
滚动方向：轴垂直，
itemBuilder：（BuildContext ctxt，int Index）{
返回中心(
子项：新建listDisplay（）
);
}
),
);
}
}

在主脚手架中，我将返回主体位置：GridDislay（） 在创建GridDisplay时，它将创建ListDisplays列表，对于每个ListDisplay的创建，它将创建节点列表。 创建每个节点时，2darray通过节点对象中的类数据成员进行映射-现在，如果用户在屏幕上按下一个节点小部件，然后使用类数据成员nodeRow和nodeCol-背景2darray也会更新。 现在我可以按相反的顺序控制小部件了吗？我可以将2d数组映射到小部件吗？

---

如果2d数组中的值得到更新，那么它应该立即反映在gridDisplay小部件（各个节点的）中。

请添加代码以便于理解。我已经添加了代码和详细解释。请帮助我。