Flutter下拉按钮空值处理：无可用连接时如何显示提示文本？

问题场景 #

通过Flutter包查询SQL获取允许的服务器连接列表时，若用户无可用连接，接口会返回：

[{ServerName: null, ServerIP: null, DBName: null, PortNum: null, Status: null}]

此时下拉按钮的Text(value['ServerName'])会触发type 'Null' is not a subtype of type 'String'报错，需处理该场景，让下拉按钮始终显示「选择服务器」提示文本，且逻辑需在页面初始化、用户修改用户名时多次触发生效。

原代码问题 #

直接将接口返回的列表赋值给serverList，未处理全null的无效条目，导致DropdownMenuItem的Text控件接收null值报错；同时异步获取数据后未调用setState更新UI，可能导致界面不刷新。

修改方案 #

1. 过滤无效服务器条目 #

在异步获取服务器列表后，过滤掉ServerName为null的无效条目：

void initialize() async {
  List<Map<String, dynamic>> fetchedList = await db.getServerList(username: userController.text);
  // 过滤ServerName为null的无效条目
  serverList = fetchedList.where((item) => item['ServerName'] != null).toList();
  setState(() {}); // 通知UI更新
}

2. 给Text控件添加兜底值 #

为避免仍有null值漏网，给ServerName设置默认兜底值，确保Text控件始终接收String类型：

DropdownButton<String>(
  value: selectedServer,
  hint: const Text('选择服务器'),
  items: serverList.map((value) {
    // 若ServerName为null，用「未知服务器」兜底
    String serverName = value['ServerName'] ?? '未知服务器';
    return DropdownMenuItem<String>(
      value: serverName,
      child: Text(serverName),
    );
  }).toList(),
  onChanged: serverList.isEmpty ? null : onServerChanged, // 无服务器时禁用选择
  style: const TextStyle(color: Colors.black, fontSize: 20),
  isExpanded: true,
)

3. 处理用户名修改触发场景 #

当用户修改用户名时，重新调用initialize方法，确保每次用户名变更都能重新获取并处理服务器列表：

// 示例：用户名输入框的onChanged回调
onUsernameChanged(String value) {
  userController.text = value;
  initialize();
}

效果说明 #

• 无可用服务器时，serverList被过滤为空，下拉按钮显示「选择服务器」提示，且自动禁用选择功能
• 有可用服务器时，正常渲染服务器选项
• 异步获取数据后通过setState更新UI，确保页面及时响应数据变化

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