Flutter Web中如何将邮箱与Checkbox布尔值存入Firebase同一条记录

核心问题分析 #

你的Checkbox状态封装在独立的MyStatefulWidget里，父组件没法直接获取它的勾选值，导致没法和邮箱一起提交到Firebase。下面是具体解决步骤：

1. 给Checkbox组件添加回调，让父组件能拿到状态 #

修改MyStatefulWidget，添加回调参数把勾选状态传递给父组件：

class MyStatefulWidget extends StatefulWidget {
  // 添加回调函数，父组件通过这个获取勾选状态
  final ValueChanged<bool>? onCheckedChanged;

  const MyStatefulWidget({Key? key, this.onCheckedChanged}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    Color getColor(Set<MaterialState> states) {
      const Set<MaterialState> interactiveStates = <MaterialState>{
        MaterialState.pressed,
        MaterialState.hovered,
        MaterialState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Color(0xFF0000CC);
      }
      return Colors.black;
    }

    return Checkbox(
      checkColor: Colors.white,
      fillColor: MaterialStateProperty.resolveWith(getColor),
      value: isChecked,
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
        // 触发回调，把最新状态传给父组件
        widget.onCheckedChanged?.call(isChecked);
      },
    );
  }
}

2. 父组件中保存Checkbox状态并提交数据到Firebase #

在父组件里定义变量保存勾选状态，通过_emailController获取邮箱值，点击提交时将两个值存入同一条Firebase记录：

// 父组件类中添加变量
bool _over18 = false;
final TextEditingController _emailController = TextEditingController();

// 在使用MyStatefulWidget的地方传入回调
Column(
  children: [
    Text('Please tick here'),
    MyStatefulWidget(
      onCheckedChanged: (bool value) {
        setState(() {
          _over18 = value;
        });
      },
    ),
    Text(' if over 18'),
  ],
),

// 添加提交按钮
ElevatedButton(
  onPressed: () async {
    // 验证邮箱格式
    final email = _emailController.text.trim();
    if (!EmailValidator.validate(email, true)) {
      print('请输入有效的邮箱地址');
      return;
    }

    // 组装要存入的数据
    final userData = {
      'email': email,
      'over_18': _over18,
      'created_at': DateTime.now() // 可选，添加时间戳
    };

    // 写入Firebase Firestore
    try {
      await FirebaseFirestore.instance.collection('users').add(userData);
      // 提交成功后的操作：清空输入、重置状态
      _emailController.clear();
      setState(() => _over18 = false);
      print('数据提交成功');
    } catch (e) {
      print('提交失败：$e');
    }
  },
  child: Text('提交'),
),

补充：如果用Firebase Realtime Database #

把写入代码替换为：

await FirebaseDatabase.instance.ref('users').push().set(userData);

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