Flutter接入Random User接口展示用户信息异常求助

问题根源 #

1. 未实现正确的getUser()网络请求函数，导致返回值为布尔值true，而非接口返回的用户数据
2. 错误匹配了randomuser.me接口的字段：接口返回的用户头像字段是picture.thumbnail，用户名是name.first+name.last，而非代码中的avatar和name
3. 代码存在语法不完整问题，缺少多个闭合括号

修复步骤及完整代码 #

1. 先在pubspec.yaml中添加http依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0 # 可替换为最新版本

2. 完整代码实现：

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

// 定义用户数据模型
class User {
  final String name;
  final String email;
  final String avatarUrl;

  User({required this.name, required this.email, required this.avatarUrl});

  // 从JSON数据创建User实例
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: '${json['name']['first']} ${json['name']['last']}',
      email: json['email'],
      avatarUrl: json['picture']['thumbnail'],
    );
  }
}

// 获取用户数据的异步函数
Future<List<User>> getUser() async {
  final response = await http.get(Uri.parse('https://randomuser.me/api/?results=20'));
  
  if (response.statusCode == 200) {
    // 解析JSON数据，提取results数组
    List<dynamic> userList = json.decode(response.body)['results'];
    // 转换为User对象列表
    return userList.map((user) => User.fromJson(user)).toList();
  } else {
    throw Exception('Failed to load users');
  }
}

class UserListPage extends StatelessWidget {
  const UserListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('User List')),
      body: FutureBuilder<List<User>>(
        future: getUser(),
        builder: (BuildContext context, AsyncSnapshot<List<User>> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: Text('waiting'));
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('No users found'));
          } else {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (BuildContext context, int index) {
                User user = snapshot.data![index];
                return ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(user.avatarUrl),
                  ),
                  title: Text(user.name),
                  subtitle: Text(user.email),
                  onTap: () {},
                );
              },
            );
          }
        },
      ),
    );
  }
}

关键说明 #

• 使用http包发起网络请求，Android端无需额外配置（接口为HTTPS，符合Android 9+的网络安全要求）
• 通过自定义User模型解析接口返回的JSON结构，避免字段调用错误
• FutureBuilder指定泛型List<User>，让类型更安全，避免类型转换问题
• 完善了错误处理逻辑，覆盖无数据、请求失败等场景

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