Flutter调用length属性报空安全及类型错误如何解决？

问题根因 #

• 逻辑判断写反：你在snapshot.data != null的分支返回空提示，反而在snapshot.data == null的else分支访问.length，触发空安全报错
• FutureBuilder未指定泛型，且getuser方法未声明返回值类型，Dart无法推断snapshot.data是List类型，默认识别为Object，因此找不到length属性
• 缺少dart:convert库导入，jsonDecode方法无法正常使用

修复方案 #

直接替换为如下代码即可：

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

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

  @override
  _ApiPageState createState() => _ApiPageState();
}

class _ApiPageState extends State<ApiPage> {
  // 明确声明返回值类型为Future<List<UserModel>>
  Future<List<UserModel>> getuser() async {
    var users = <UserModel>[];
    var response =
        await http.get(Uri.https('jsonplaceholder.typicode.com', 'users'));
    var jsonData = jsonDecode(response.body);

    for (var i in jsonData) {
      UserModel user = UserModel(i['name'], i['username'], i['email']);
      users.add(user);
    }
    return users;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 给FutureBuilder指定泛型<List<UserModel>>
      body: FutureBuilder<List<UserModel>>(
          future: getuser(),
          builder: (context, snapshot) {
            // 先判断加载状态
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            }
            // 判断是否有加载错误
            if (snapshot.hasError) {
              return Center(child: Text('加载失败：${snapshot.error}'));
            }
            // 空数据判断：snapshot.data为空或者数组长度为0时显示空提示
            if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return const Center(child: Text("Nothing in API"));
            }
            // 有数据时渲染列表
            return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text(snapshot.data![i].name),
                  );
                });
          }),
    );
  }
}

class UserModel {
  final String name;
  final String username;
  final String email;

  UserModel(this.name, this.username, this.email);
}

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