Flutter中ModalBarrier导致进度加载器显示异常的原因及修复方法

问题根因 #

1. ModalBarrier导致加载器无法展示的原因 #

ModalBarrier组件默认会尝试占满父级容器的所有可用空间，你当前代码中外层Stack默认的fit属性为StackFit.loose，如果ProgressHUD的父容器没有提供明确的满屏约束，会导致包裹ModalBarrier和CircularProgressIndicator的modal层尺寸计算异常，最终两个组件都无法正常渲染。
另外你代码中定义的valueColor参数没有传递给CircularProgressIndicator，如果ModalBarrier的颜色和当前主题下进度条的默认颜色相近，也会出现进度条被遮盖完全看不到的情况。

2. 删除ModalBarrier后进度条仍无法显示的原因 #

删除ModalBarrier后，modal层的Stack失去了会撑满父级的子组件，Stack的尺寸会收缩到和CircularProgressIndicator自身尺寸一致，包裹进度条的Center组件失去了居中的参照容器，再加上外层Stack的loose适配规则，会导致进度条位置异常甚至完全超出可视区域。

修复方案 #

直接使用优化后的ProgressHUD代码即可，修改点如下：

• 给外层Stack新增fit: StackFit.expand属性，强制组件占满父级约束空间，解决modal层尺寸计算异常问题
• 给CircularProgressIndicator绑定valueColor参数，默认适配当前主题主色，避免和遮罩层撞色
• 新增透明Material包裹进度条，解决部分场景下缺少Material上下文导致的渲染异常
• 优化空安全语法，适配Flutter 2.0+版本规范

import 'package:flutter/material.dart';

class ProgressHUD extends StatelessWidget {
  final Widget child;
  final bool inAsyncCall;
  final double opacity;
  final Color color;
  final Animation<Color>? valueColor;

  const ProgressHUD({
    super.key,
    required this.child,
    required this.inAsyncCall,
    this.opacity = 0.3,
    this.color = Colors.grey,
    this.valueColor,
  });

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = [child];
    if (inAsyncCall) {
      final modal = Stack(
        children: [
          Opacity(
            opacity: opacity,
            child: ModalBarrier(dismissible: false, color: color),
          ),
          Center(
            child: Material(
              color: Colors.transparent,
              child: CircularProgressIndicator(
                valueColor: valueColor ?? AlwaysStoppedAnimation<Color>(Theme.of(context).primaryColor),
              ),
            ),
          ),
        ],
      );
      widgetList.add(modal);
    }
    return Stack(
      fit: StackFit.expand,
      children: widgetList,
    );
  }
}

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