Flutter 如何根据日历选的生日判断年龄，隐藏未满18岁的指定组件

1. 封装无误差的年龄计算逻辑 #

不要直接用当前年份减出生年份做判断，需要校验当年生日是否已过，避免出现未到生日就误判为成年的问题，可直接在页面State中添加这个方法：

int _calculateAge(DateTime birthday) {
  final now = DateTime.now();
  int age = now.year - birthday.year;
  // 校验当年生日是否已过
  final isBirthdayPassed = now.month > birthday.month ||
      (now.month == birthday.month && now.day >= birthday.day);
  if (!isBirthdayPassed) age -= 1;
  return age;
}

2. 调整生日变更的回调，清理无效的护照残留数据 #

用户选完生日后，如果计算出来年龄未满18，需要主动清空之前存储的护照号值，避免组件隐藏后内存里残留的无效护照数据被提交到后端。修改后的生日组件调用代码如下：

Widget buildBirthday() => BirthdayWidget(
  birthday: user.dateOfBirth,
  onChangedBirthday: (dateOfBirth) {
    final age = _calculateAge(dateOfBirth);
    // 未成年时清空原有护照号，避免脏数据
    final updatedPassport = age >= 18 ? user.passportNumber : null;
    setState(() {
      user = user.copy(
        dateOfBirth: dateOfBirth,
        passportNumber: updatedPassport,
      );
    });
  },
);

3. 按年龄条件渲染护照输入组件 #

在页面build的对应位置，增加年龄判断逻辑：只有计算年龄满18岁时，才挂载护照输入组件，未成年时直接跳过组件渲染，既不会占用布局空间，也不会触发该组件的表单校验逻辑。

// 先计算当前用户年龄，未填写生日时默认判定为未成年
final userAge = user.dateOfBirth == null ? 0 : _calculateAge(user.dateOfBirth!);

// 表单组件拼接逻辑示例
Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    // 原有其他组件（包括上面封装的生日选择组件）
    buildBirthday(),
    const SizedBox(height: 16),
    // 仅成年时渲染护照输入组件
    if (userAge >= 18)
      CustomTextFormField(
        onChanged: (passNo) => setState(
          () => user = user.copy(passportNumber: passNo),
        ),
        userValue: user.passportNumber,
        userFLName: 'Passport Number',
        keyBoardType: TextInputType.number,
      ),
  ],
)

注意：不推荐使用Visibility(visible: false)这类方式隐藏组件，这类方式会保留组件在组件树中，依然会触发对应的表单校验逻辑，出现看不见的组件导致表单提交失败的问题，直接条件渲染是最稳妥的实现方式。

内容的提问来源于stack exchange，提问作者Mahmoud Al-Haroon