Flutter无Model调用REST API遇空值类型错误求解决方案

核心问题 #

你代码里的关键错误是JSON字段名拼写错误：RandomUser API返回的用户列表字段是results（复数），但你写的是result（单数）。这导致json['result']返回null，而你把null赋值给了类型为List<dynamic>的users变量，触发了类型不匹配的错误。

修复后的完整代码 #

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<dynamic> users = [];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rest API Call'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: fetchUsers,
        child: const Icon(Icons.refresh),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          final user = users[index];
          // 增加空值保护，避免字段缺失导致崩溃
          final firstName = user['name']?['first'] ?? 'Unknown';
          final email = user['email'] ?? 'No email';

          return ListTile(
            leading: CircleAvatar(
              // 修复字符串拼接错误，正确显示序号
              child: Text('${index + 1}'),
            ),
            title: Text(firstName),
            subtitle: Text(email),
          );
        },
      ),
    );
  }

  void fetchUsers() async {
    print('fetchUsers called');
    const url = "https://randomuser.me/api/?results=10";
    final uri = Uri.parse(url);
    final response = await http.get(uri);
    
    // 增加HTTP状态码判断，处理请求失败的情况
    if (response.statusCode == 200) {
      final body = response.body;
      final json = jsonDecode(body);
      setState(() {
        // 修正字段名：result → results
        users = json['results'] ?? [];
      });
      print('fetchUser completed, loaded ${users.length} users');
    } else {
      print('Request failed with status: ${response.statusCode}');
      // 可以在这里添加弹窗提示用户请求失败
      setState(() {
        users = [];
      });
    }
  }
}

关键修改点 #

• 修正JSON字段名：将json['result']改为json['results']，匹配API返回的结构
• 增加空值保护：使用??运算符处理可能缺失的字段（比如user['name']?['first'] ?? 'Unknown'），避免因API返回字段缺失导致崩溃
• 修复序号显示：把'$index+1'改为'${index + 1}'，正确显示用户序号（1、2、3...而不是0+1、1+1...）
• HTTP错误处理：判断response.statusCode，处理请求失败的情况，避免解析错误的JSON导致崩溃

额外说明 #

如果想确认API返回的结构，可以直接在浏览器打开接口地址查看，返回的JSON结构大致如下：

{
  "results": [
    {"name": {"first": "...", "last": "..."}, "email": "...", ...},
    ...
  ],
  "info": {...}
}

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