使用Dio包获取用户数据无法在Flutter界面显示求助

核心问题与修复点： #

1. 数据未同步到组件State

fetchData原是外部函数，内部创建的users是局部变量，既没有赋值给State类的users列表，也未调用setState触发组件重建。

修改：将fetchData移到State类内部并更新状态

Future<void> fetchData() async {
  try {
    final response = await DioClient().apiCall(
      url: 'users?page=2',
      requestType: RequestType.GET,
    );

    // Reqres接口返回的用户列表在data字段下
    List<dynamic> listUser = response.data['data'];
    setState(() {
      users = listUser.map((e) => User.fromJson(e)).toList();
    });
  } catch (e) {
    print('请求失败：$e');
  }
}

2. API响应字段解析错误

Reqres的用户列表接口返回结构中，用户数据存于data字段而非result，原代码Response.data['result']会导致空指针异常。

3. DioClient的baseUrl配置错误

原baseUrl设置为完整请求地址https://reqres.in/api/users?page=2，调用时又传入完整url，会导致请求地址重复拼接。应改为基础路径：

static Dio createDio() {
  var dio = Dio(BaseOptions(
    baseUrl: "https://reqres.in/api/", // 仅保留基础接口路径
    receiveTimeout: 20000,
    connectTimeout: 20000,
    sendTimeout: 20000,
  ));
  return dio;
}

4. ListView.builder缺少布局约束

在Column中直接使用ListView会触发无限高度错误，需用Expanded包裹以约束高度：

Expanded(
  child: ListView.builder(
    itemCount: users.length,
    itemBuilder: (context, index) {
      final user = users[index];
      return ListTile(
        title: Text('${user.firstName ?? ''} ${user.lastName ?? ''}'),
        subtitle: Text(user.email ?? ''),
        leading: user.avatar != null 
            ? CircleAvatar(backgroundImage: NetworkImage(user.avatar!)) 
            : const CircleAvatar(),
      );
    },
  ),
)

5. 缺失异常处理

原代码无try-catch块，无法捕获网络异常、解析错误等问题，添加后可在控制台查看错误信息，快速排查问题。

完整修改后的home_screen.dart #

import 'package:flutter/material.dart';
import 'package:latihan_dio/src/features/home/domain/user.dart';
import '../../../../dio_client.dart';

class MyHomepage extends StatefulWidget {
  const MyHomepage({Key? key}) : super(key: key);

  @override
  State<MyHomepage> createState() => _MyHomepageState();
}

class _MyHomepageState extends State<MyHomepage> {
  List<User> users = [];

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

  Future<void> fetchData() async {
    try {
      final response = await DioClient().apiCall(
        url: 'users?page=2',
        requestType: RequestType.GET,
      );

      List<dynamic> listUser = response.data['data'];
      setState(() {
        users = listUser.map((e) => User.fromJson(e)).toList();
      });
    } catch (e) {
      print('请求失败：$e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return ListTile(
                  title: Text('${user.firstName ?? ''} ${user.lastName ?? ''}'),
                  subtitle: Text(user.email ?? ''),
                  leading: user.avatar != null 
                      ? CircleAvatar(backgroundImage: NetworkImage(user.avatar!)) 
                      : const CircleAvatar(),
                );
              },
            ),
          ),
          TextButton(
            onPressed: fetchData,
            child: const Text('GET', style: TextStyle(fontSize: 20)),
          ),
        ],
      ),
    );
  }
}

补充规范说明 #

• 类名改为MyHomepage，符合Dart大驼峰命名规范
• 展示用户信息时，避免直接打印User对象，应取出具体字段展示，否则会输出对象的toString默认结果

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