Flutter：'List<dynamic>' 不是'String' 类型的子类型答案

【问题标题】：Flutter: 'List<dynamic>' is not a subtype of type 'String'Flutter：'List<dynamic>' 不是'String' 类型的子类型
【发布时间】：2021-09-30 11:57:10
【问题描述】：

我目前正在构建一个应用程序来通过 api 读取数据，并且我正在尝试从 JSON Placeholder 解析 JSON api。

未处理的异常：类型列表

这是http类

class HttpService {
  final url = "https://jsonplaceholder.typicode.com/albums";
  late Dio _dio;

  HttpService(){
    _dio = Dio();
  }
  
  Future<UserModel> fetchData() async {
    var response = await _dio.get(url);

      return UserModel.fromJson(jsonDecode(response.data));
    
  }
}

这是一个模型类

class UserModel {
  UserModel({
    required this.userId,
    required this.id,
    required this.title,
  });

  int userId;
  int id;
  String title;

  factory UserModel.fromJson(Map<String, dynamic> json) => UserModel(
        userId: json["userId"],
        id: json["id"],
        title: json["title"],
      );
}

这是一个主屏幕

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

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

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Http Requests"),
      ),
      body: FutureBuilder<UserModel>(
        future: HttpService().fetchData(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          } else {
            return Text(snapshot.data!.title);
          }
        },
      ),
    );
  }
}

我得到的错误是

未处理的异常：类型列表

【问题讨论】：

response.data 的值是什么？
我们从 http 获得的数据
可以显示json响应吗？
[{userId: 1, id: 1, title: quidem molestiae enim}, {userId: 1, id: 2, title: sunt qui excepturi placeat culpa}, {userId: 1, id: 3，标题：omnis laborum odio}，{userId：2，id：15，标题：ut pariatur rerum ipsum natus repellendus praesentium}，{userId：2，id：16，标题：voluptatem aut maximeinventre autem magnam atque repellat}]
jsonplaceholder.typicode.com/albums

标签： json flutter rest dio

【解决方案1】：

您的响应数据是一个列表。您不能将其作为对象返回。

正确的方法应该是

Future<List<UserModel>> fetchData() async {
    var response = await _dio.get(url);
    Iterable l = json.decode(response.body);
    return  List<UserModel>.from(l.map((model)=> 
    UserModel.fromJson(model)));  
  }

FutureBuilder 的更改相同。

FutureBuilder<List<UserModel>>

您可以使用ListView 小部件来显示它。

【讨论】：