如何在Flutter注册页从Firebase Database加载地区到下拉菜单

步骤1：初始化Firebase并获取地区数据 #

首先在页面的State类中声明必要变量，然后在初始化阶段从Firebase拉取数据：

List<String> _addressLocation = [];
String? selectedType;
// 指向Firebase中的address_lookup节点
DatabaseReference addressRef = FirebaseDatabase.instance.ref('address_lookup');

@override
void initState() {
  super.initState();
  // 一次性拉取数据，若需要实时同步可改用onValue监听
  addressRef.once().then((DatabaseEvent event) {
    DataSnapshot snapshot = event.snapshot;
    if (snapshot.value != null) {
      Map<dynamic, dynamic> regionData = snapshot.value as Map<dynamic, dynamic>;
      // 根据数据库结构提取地区名称：
      // 若地区名是节点key，用keys转换；若存于节点的region_name字段，改用data.values.map((e) => e['region_name'].toString())
      _addressLocation = regionData.keys.map((key) => key.toString()).toList();
      setState(() {});
    }
  });
}

步骤2：修正下拉菜单代码 #

你的现有代码存在赋值错误，同时优化类型约束让代码更严谨：

@override
Widget build(BuildContext context) {
  return Container(
    child: DropdownButton<String>(
      value: selectedType,
      isExpanded: true, // 可选，让下拉菜单适配父容器宽度
      hint: const Text(
        "Select Region ex. Region IV-A (CALABARZON)",
      ),
      icon: const Icon(Icons.arrow_downward),
      elevation: 10,
      items: _addressLocation
          .map((String region) => DropdownMenuItem<String>(
                value: region,
                child: Text(
                  region,
                  style: const TextStyle(fontWeight: FontWeight.bold),
                ),
              ))
          .toList(),
      onChanged: (newValue) {
        setState(() {
          selectedType = newValue; // 修正原有赋值错误，将选中值赋值给selectedType
        });
      },
    ),
  );
}

关键注意事项 #

• 确保Firebase数据库规则允许读取address_lookup节点，否则会无法获取数据
• 若地区数据存于节点的子字段（如每个地区节点包含region_name字段），需调整数据提取逻辑
• 可添加加载状态提示，比如在数据未拉取完成时显示CircularProgressIndicator

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