Flutter布局层级异常：自定义图表覆盖弹窗问题求助

问题场景 #

布局内包含2个基于RenderBox自定义实现的图表组件，点击底部按钮触发showDialog弹出AlertDialog时，弹窗被下方图表的部分内容、完整的上方图表以及其他界面元素覆盖。

推测问题原因是：图表执行void paint(PaintingContext context, Offset offset)方法进行重绘的过程中，弹窗在图表绘制完成前就已经显示，导致层级被覆盖。

相关代码 #

onTap: () {
  showDialog<void>(
    context: _context,
    builder: (BuildContext context) {
      /*
      Additional code
      */
      return StatefulBuilder(
        builder: (context, setState) {
          return AlertDialog(
            title: const Text('Title'),
            content: MyDateField(
              value: selectedDate,
              minDate: minDate,
              maxDate: maxDate,
              onChanged: (DateTime? newValue) {
                setState(() {
                  if (newValue != null) {
                    selectedDate = DateTime.utc(newValue.year, newValue.month, newValue.day);
                  }
                });
              }
            ),
            actions: <Widget>[
              TextButton(
                style: TextButton.styleFrom(
                  textStyle: Theme.of(context).textTheme.labelLarge,
                ),
                child: const Text('Abbrechen'),
                onPressed: () {
                  context.pop();
                }
              ),
              TextButton(
                style: TextButton.styleFrom(
                  textStyle: Theme.of(context).textTheme.labelLarge,
                ),
                child: const Text('OK'),
                onPressed: () {
                  /*
                  Additional code
                  */
                }
              )
            ]
          );
        }
      );
    }
  );
}

解决过程 #

最初尝试寻找延迟弹窗构建、等待后台重绘完成后再显示的方案，后来确认该问题是Flutter的已知Bug，将Flutter版本升级至3.27.2后，弹窗被覆盖的问题彻底解决。

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