Flutter：未渲染子组件却触发Null check operator错误

你遇到的问题本质是Flutter组件构造时的参数求值逻辑导致的：当创建Loader实例时，child参数会被立即执行计算，不管后续Loader会不会渲染它。所以哪怕isLoading = true，Text(data!)这行代码已经在Example的build方法里运行了，此时data是null，自然触发空指针错误。

解决方法：用WidgetBuilder延迟创建子组件 #

核心思路是把直接传入子组件的方式，改成传入一个返回子组件的函数，让子组件的创建逻辑延迟到Loader真正需要渲染它的时候再执行。

1. 修改Loader组件代码

class Loader extends StatelessWidget {
  const Loader({
    Key? key,
    required this.isLoading,
    required this.builder, // 替换原child参数为WidgetBuilder类型
  }) : super(key: key);

  final bool isLoading;
  final WidgetBuilder builder; // 定义为WidgetBuilder（接收context返回Widget的函数）

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return const CircularProgressIndicator();
    } else {
      return builder(context); // 仅当isLoading=false时，才调用函数生成子组件
    }
  }
}

2. 修改Example中的使用方式

把原来直接传child: Text(data!)改成传入builder函数：

class Example extends StatelessWidget {
  const Example({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String? data = null; // 示例数据

    return Loader(
      isLoading: data == null,
      builder: (context) => Text(data!), // 只有isLoading=false时才会执行这行代码
    );
  }
}

额外优化（可选） #

如果需要自定义加载时的组件，可以给Loader添加可选参数：

class Loader extends StatelessWidget {
  const Loader({
    Key? key,
    required this.isLoading,
    required this.builder,
    this.loadingWidget = const CircularProgressIndicator(), // 可选自定义加载组件
  }) : super(key: key);

  final bool isLoading;
  final WidgetBuilder builder;
  final Widget loadingWidget;

  @override
  Widget build(BuildContext context) {
    return isLoading ? loadingWidget : builder(context);
  }
}

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