Flutter动态给ListView添加组件时实例成员无法在初始化器访问怎么解决

错误原因 #

Dart类中实例属性的初始化执行时机早于类实例创建完成的节点，不允许在初始化一个实例属性时引用同个类其他未完成初始化的实例成员。你代码里names列表初始化时用到的_localVideoRenderer属于同个类的实例成员，初始化阶段还无法被访问，因此抛出对应错误。

解决方案 #

方案1：用late关键字修饰names列表（适配Dart 2.12及以上版本，推荐） #

给names加上late声明，告知编译器你会在变量被使用前完成初始化，即可避开初始化阶段的访问限制：

RTCVideoRenderer _localVideoRenderer = RTCVideoRenderer();
  
var renders = [];

late final List<Widget> names = 
[
  Container(
    key: const Key("local"),
    margin: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
    decoration: const BoxDecoration(color: Colors.black),
    child: RTCVideoView(_localVideoRenderer),
  ),
];

方案2：在initState生命周期中初始化names列表 #

如果是StatefulWidget场景，把names的初始化逻辑放到initState中执行，此时类实例已经创建完成，可以正常访问所有实例成员：

RTCVideoRenderer _localVideoRenderer = RTCVideoRenderer();
var renders = [];
late List<Widget> names;

@override
void initState() {
  super.initState();
  // 先完成渲染器初始化
  _localVideoRenderer.initialize();
  // 再初始化Widget列表
  names = [
    Container(
      key: const Key("local"),
      margin: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
      decoration: const BoxDecoration(color: Colors.black),
      child: RTCVideoView(_localVideoRenderer),
    ),
  ];
}

动态更新列表注意事项 #

如果后续要修改列表内容触发UI更新，需要注意：

• 不要将names定义为final，否则无法修改列表内容
• 列表修改完成后调用setState(() {})触发UI重绘，参考新增组件的逻辑：

void addRemoteVideo(RTCVideoRenderer remoteRenderer) {
  setState(() {
    names.add(
      Container(
        key: Key(UniqueKey().toString()),
        margin: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
        decoration: const BoxDecoration(color: Colors.black),
        child: RTCVideoView(remoteRenderer),
      ),
    );
  });
}

内容的提问来源于stack exchange，提问作者Mahi