Flutter下拉框无法显示API数据问题排查与实现求助

尝试将API返回的包含国家、宗教等选项的列表数据展示在Flutter下拉框中，用于实现用户数据更新功能，但下拉框未显示任何数据，需要解决该问题。

API请求代码 #

Future<UserBiodata> getBiodata() async {
    String url = Constant.baseURL;
    String token = await UtilSharedPreferences.getToken();
    final response = await http.get(
      Uri.parse(
        '$url/auth/mhs_siakad/biodata',
      ),
      headers: {
        'Authorization': 'Bearer $token',
      },
    );

    print(response.statusCode);
    print(response.body);
    if (response.statusCode == 200) {
      return UserBiodata.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Token Expired!');
    }
  }

下拉框Widget代码 #

String? _mySelection;

List<Agama> agama = [];

@override
void initState() {
  super.initState();
  BiodataProvider().getBiodata();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: PreferredSize(
      preferredSize: const Size.fromHeight(kToolbarHeight),
      child: CustomAppbar(
        title: 'Edit Biodata',
      ),
    ),
    body: Padding(
      padding: const EdgeInsets.all(18),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: const EdgeInsets.only(left: 12, right: 8),
            width: double.infinity,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.2),
                  spreadRadius: 1,
                  blurRadius: 9,
                  offset: const Offset(
                    1,
                    2,
                  ),
                ),
              ],
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                items: agama.map((item) {
                  return DropdownMenuItem<String>(
                    value: item.nmAgama,
                    child: Text(item.nmAgama),
                  );
                }).toList(),
                onChanged: (newVal) {
                  setState(() {
                    _mySelection = newVal!;
                  });
                },
                value: _mySelection,
              ),
            ),
          ),

问题原因及解决方法 #

1. 未正确处理异步数据与UI刷新 #

调用BiodataProvider().getBiodata()后，没有将返回结果中的宗教列表赋值给agama变量，也未触发UI刷新。同时异步方法需要用async/await等待结果返回。

修改initState及添加数据获取方法：

@override
void initState() {
  super.initState();
  _loadAgamaData();
}

Future<void> _loadAgamaData() async {
  try {
    UserBiodata biodata = await BiodataProvider().getBiodata();
    setState(() {
      // 假设UserBiodata类中包含宗教列表属性agamaList，需根据实际字段名调整
      agama = biodata.agamaList;
      // 可选：设置默认选中第一项
      _mySelection = agama.isNotEmpty ? agama.first.nmAgama : null;
    });
  } catch (e) {
    print('加载数据失败：$e');
  }
}

2. 空列表状态处理 #

当下拉框items为空时，不会显示任何选项，可添加提示文本：

DropdownButton<String>(
  hint: const Text('请选择宗教'),
  // 其他原有属性保持不变
)

3. 数据模型解析检查 #

确认UserBiodata.fromJson方法正确解析了返回的JSON数据，确保宗教列表字段被正确映射为List<Agama>类型，且Agama类中的nmAgama字段不为空。

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