本篇文章记录我在使用Flutter开发中如何请求后端接口获取数据, 使用到的包有http
用来发送请求,async
提供Future
抽象类以及convert
用来将json数据转换为dart里面的对象。
首先使用flutter create xxx
命令或者 IDEA 新建一个Flutter项目,去掉示例代码,将需要的依赖引入
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
复制代码
根据接口返回数据定义好需要的数据类,例如接口返回的数据为一个数据列表
[
{
"mal_id": 199,
"rank": 4,
"url": "https://myanimelist.net/anime/199/Sen_to_Chihiro_no_Kamikakushi",
"image_url": "https://myanimelist.cdn-dena.com/r/100x140/images/anime/6/79597.jpg?s=63a85532fc52356a938354277201d43c",
"title": "Sen to Chihiro no Kamikakushi",
"type": "Movie",
"score": 8.91,
"members": 730646,
"airing_start": "Jul 2001",
"airing_end": "Jul 2001",
"episodes": 1
}
]
复制代码
根据需要的数据字段定义 Animate
类, Animate.fromJson
方法使用json数据生成一个Animate
实例
class Animate {
final int rank;
final String imgUrl;
final String title;
final double score;
final String url;
final String airingStart;
final String airingEnd;
Animate({
this.rank,
this.imgUrl,
this.title,
this.score,
this.url,
this.airingStart,
this.airingEnd,
});
factory Animate.fromJson(Map<String, dynamic> json) {
return Animate(
rank: json['rank'] as int,
imgUrl: json['image_url'] as String,
title: json['title'] as String,
score: json['score'] as double,
url: json['url'] as String,
airingStart: json['airing_start'] as String,
airingEnd: json['airing_end'] as String,
);
}
}
复制代码
之后使用http
发送请求,定义一个StatefulWidget
以及它的State
类,定义一个变量存储数据,定义获取数据的方法,然后重写类的initState
方法,在initState
方法里面调用请求数据的方法
StatelessWidget
类来作为列表中的每一项,这个类需要一个
Animate
类的实例来填充数据
最后使用
ListView.builder
方法生成ListView
完成效果如图