Flutter如何通过POST请求获取接口数据并在ListView中展示

你的代码存在两个核心错误，修改后即可正常渲染列表：

1. 修复fetchData方法缺少返回值的问题 #

你定义的fetchData方法声明返回Future<List<dynamic>>，但当前方法仅打印了接口数据，没有将解析好的data列表返回，导致FutureBuilder无法拿到数据，始终停留在加载状态。
在fetchData方法末尾添加return data;即可。

2. 修复JSON字段名大小写不匹配的问题 #

接口返回的医生字段是首字母大写的DoctorId、EncDoctorId，你编写的取值代码用了小写开头的doctorId、encDoctorId，无法匹配到对应字段，会取不到值导致报错。
修改_docId和_encDid方法里的字段名为正确的大写开头格式。

修正后的完整代码 #

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Http request"),
        ),
        body: const Server(),
      ),
    );
  }
}

class Server extends StatefulWidget {
  const Server({super.key});

  _ServerState createState() => _ServerState();
}

class _ServerState extends State<Server> {
  Future<List<dynamic>> fetchData() async {
    // 如果使用新版http库，需要将url包裹在Uri.parse中，如下：
    // final response = await http.post(Uri.parse("http://medbo.digitalicon.in/api/medboapi/alldoctor"));
    final response = await http.post("http://medbo.digitalicon.in/api/medboapi/alldoctor");
    Map<String, dynamic> map = json.decode(response.body);
    List<dynamic> data = map["Data"];
    print(data[0]["DoctorId"]);
    print(data[0]["EncDoctorId"]);
    print(data[0]["DoctorName"]);
    // 添加返回值
    return data;
  }

  String _docId(dynamic doc) {
    // 修正字段名大小写
    return doc['DoctorId'];
  }

  String _encDid(dynamic doc) {
    // 修正字段名大小写
    return doc['EncDoctorId'];
  }

  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
      future: fetchData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        // 新增错误处理逻辑，避免崩溃
        if (snapshot.hasError) {
          return Center(child: Text("加载出错：${snapshot.error}"));
        }
        if (snapshot.hasData) {
          return ListView.builder(
              padding: const EdgeInsets.all(8.0),
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  child: Column(
                    children: <Widget>[
                      ListTile(
                        title: Text(_docId(snapshot.data[index])),
                        subtitle: Text(_encDid(snapshot.data[index])),
                      )
                    ],
                  ),
                );
              });
        }
        return const CircularProgressIndicator();
      },
    );
  }
}

额外优化建议 #

• 可以新增Doctor实体类，将Map数据转为实体类对象，避免手写字段名出现大小写、拼写错误
• 增加接口请求状态判断，判断response.statusCode是否为200再解析数据，处理接口请求失败的场景

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