Flutter中如何添加关联Firebase下拉框的多StreamBuilder？

我有三个从Firebase获取数据的下拉框，需求是选择地址后自动匹配对应的用户名和密码。已经编写三个StreamBuilder代码，但将它们放入children: <Widget>[]后，数据在应用中无法显示。附上Firebase数据库截图，求帮忙解决。

现有代码 #

StreamBuilder 1（地址下拉框） #

StreamBuilder<QuerySnapshot>(
   stream: FirebaseFirestore.instance.collection('servers').snapshots(includeMetadataChanges: true),
   builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.hasError) {
         return Text('Something went wrong');
      }
      if (snapshot.connectionState == ConnectionState.waiting) {
         return Text("Loading");
      }
      return Container(
         child: DropdownSearch<String>(
            items: snapshot.data!.docs.map((DocumentSnapshot document) {
               Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
               return data["address"];
            })
            .toList()
            .cast<String>(),
         onChanged: print,
         ),
      );
   },
),

StreamBuilder 2（用户名下拉框） #

StreamBuilder<QuerySnapshot>(
   stream: FirebaseFirestore.instance.collection('servers').snapshots(includeMetadataChanges: true),
   builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.hasError) {
         return Text('Something went wrong');
      }
      if (snapshot.connectionState == ConnectionState.waiting) {
         return Text("Loading");
      }
      return Container(
         child: DropdownSearch<String>(
            items: snapshot.data!.docs.map((DocumentSnapshot document) {
               Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
               return data["username"];
            })
            .toList()
            .cast<String>(),
         onChanged: print,
         ),
      );
   },
),

StreamBuilder 3（密码下拉框） #

StreamBuilder<QuerySnapshot>(
   stream: FirebaseFirestore.instance.collection('servers').snapshots(includeMetadataChanges: true),
   builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.hasError) {
         return Text('Something went wrong');
      }
      if (snapshot.connectionState == ConnectionState.waiting) {
         return Text("Loading");
      }
      return Container(
         child: DropdownSearch<String>(
            items: snapshot.data!.docs.map((DocumentSnapshot document) {
               Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
               return data["password"];
            })
            .toList()
            .cast<String>(),
         onChanged: print,
         ),
      );
   },
),

Firebase数据库截图 #

解决方案 #

问题根源 #

1. 重复监听流：三个StreamBuilder各自监听同一个Firestore集合，浪费资源且没必要
2. 无联动逻辑：当前下拉框完全独立，没实现“选地址自动匹配用户名密码”的关联
3. 布局约束可能缺失：如果父Widget没给下拉框足够空间（比如Row里没套Expanded），会导致控件无法显示
4. 空值处理不足：字段为空时会产生空条目，影响显示

修复步骤 #

1. 统一管理数据，减少重复请求

用单个StreamBuilder获取所有服务器数据，内部构建三个下拉框，同时实现联动逻辑：

// 定义服务器数据模型（规范数据处理）
class Server {
  final String address;
  final String username;
  final String password;

  Server({required this.address, required this.username, required this.password});

  factory Server.fromMap(Map<String, dynamic> map) {
    return Server(
      address: map["address"] ?? "",
      username: map["username"] ?? "",
      password: map["password"] ?? "",
    );
  }
}

// 单个StreamBuilder实现所有下拉框及联动
StreamBuilder<QuerySnapshot>(
  stream: FirebaseFirestore.instance.collection('servers').snapshots(),
  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return const Text('加载出错');
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Text('加载中...');
    }

    // 转换为Server列表
    final List<Server> servers = snapshot.data!.docs
        .map((doc) => Server.fromMap(doc.data() as Map<String, dynamic>))
        .toList();

    // 用StatefulBuilder管理选中状态（如果在StatelessWidget中，也可使用Provider等状态管理）
    return StatefulBuilder(
      builder: (context, setState) {
        String? selectedAddress;
        Server? selectedServer;

        return Column(
          children: [
            // 地址下拉框
            DropdownSearch<String>(
              items: servers.map((server) => server.address).toList(),
              onChanged: (value) {
                setState(() {
                  selectedAddress = value;
                  // 根据选中地址匹配对应服务器数据
                  selectedServer = servers.firstWhere(
                    (server) => server.address == value,
                    orElse: () => Server(address: "", username: "", password: ""),
                  );
                });
              },
              selectedItem: selectedAddress,
              dropdownDecoratorProps: const DropDownDecoratorProps(
                dropdownSearchDecoration: InputDecoration(labelText: "选择地址"),
              ),
            ),
            // 用户名下拉框（自动匹配，禁用手动选择）
            DropdownSearch<String>(
              items: servers.map((server) => server.username).toList(),
              selectedItem: selectedServer?.username,
              enabled: false,
              dropdownDecoratorProps: const DropDownDecoratorProps(
                dropdownSearchDecoration: InputDecoration(labelText: "用户名"),
              ),
            ),
            // 密码下拉框（自动匹配，禁用手动选择）
            DropdownSearch<String>(
              items: servers.map((server) => server.password).toList(),
              selectedItem: selectedServer?.password,
              enabled: false,
              dropdownDecoratorProps: const DropDownDecoratorProps(
                dropdownSearchDecoration: InputDecoration(labelText: "密码"),
              ),
            ),
          ],
        );
      },
    );
  },
),

2. 检查布局约束

如果下拉框放在Row中，必须给每个下拉框套Expanded以分配空间：

Row(
  children: [
    Expanded(child: // 地址下拉框),
    Expanded(child: // 用户名下拉框),
    Expanded(child: // 密码下拉框),
  ],
)

3. 验证Firestore权限

确保Firestore安全规则允许读取servers集合，开发阶段可临时设置：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /servers/{document=**} {
      allow read, write: if true;
    }
  }
}

（生产环境需改为严格权限规则）

4. 完善空值处理

在转换数据时给字段设置默认值，避免空条目出现，比如map["address"] ?? ""。

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