Flutter可复用Body Widget开发：复用时null报错问题与正确实现

你遇到的空值错误来自于对Dart类初始化逻辑的误解，之前为Body组件设置的默认值根本没有生效：

• 你在Body类内部给字段写的Widget ofUser = const SizedBox();这类初始化代码，本意是当调用方不传对应参数时，自动用空组件填充。但实际上，当你在构造函数里用this.xxx的形式声明命名参数时，Dart会在你不传值的时候直接把对应字段赋值为null，完全覆盖掉你在类字段上写的默认初始化值。
• 这也解释了为什么首页调用时没有报错：因为你在首页把四个参数全部显式传值了，字段根本不会被赋为null。换了页面只传必填参数时，没传值的ofUser、ofSearchField就变成了null，直接传入Column的children列表，触发了Flutter的空值检查。
• 报错提示的“null值在索引2的位置”也完全对应这个逻辑：Column的children列表顺序为[高度20的占位SizedBox（索引0）、ofWelcome（索引1）、ofUser（索引2）]，刚好是没传值变成null的第一个子节点位置。

按照Flutter和Dart的通用开发规范，可选命名参数的默认值必须直接写在构造函数的参数声明处，不能依赖类成员字段的初始化逻辑。修正后的完整代码如下：

import 'package:flutter/material.dart';

class Body extends StatelessWidget {
  // 只声明非空字段，不再在字段上写无效的初始化赋值
  final Widget ofWelcome;
  final Widget ofUser;
  final Widget ofSearchField;
  final Widget ofContent;

  Body({
    super.key,
    required this.ofWelcome,
    required this.ofContent,
    // 直接在构造函数参数上给可选参数设置默认空组件
    this.ofUser = const SizedBox(),
    this.ofSearchField = const SizedBox(),
  });

  @override
  Widget build(BuildContext context) {
    final Size _size = MediaQuery.of(context).size;
    return SizedBox(
      width: _size.width,
      height: _size.height,
      child: SingleChildScrollView(
        child: RefreshIndicator(
          onRefresh: () => Future.delayed(const Duration(seconds: 2)),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 20),
              ofWelcome,
              ofUser,
              ofSearchField,
              ofContent,
            ],
          ),
        ),
      ),
    );
  }
}

开发注意事项 #

• 这个写法是Dart空安全规范下的标准实现：非空的Widget字段要么标记为required强制传值，要么给可选参数提供非空的默认值，从语法层面杜绝null传入Column的children列表
• 之前用到的@required注解是空安全普及前的旧写法，现在直接用Dart内置的required关键字即可，配合可选参数的默认值，既保留了组件的灵活性（不需要可选模块时可以省略不传），又不会出现空值报错
• 这种结构的组件完全满足复用需求：不同页面调用时，只需要传自己需要展示的模块，不需要的模块会自动渲染成不占空间的空组件，不需要每个页面都手动传占位的SizedBox

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