本篇文章记录我在使用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

 

 



 

 

完成效果如图



 

 

github地址
<https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxrr2016%2Fflutter-get-data>


作者:轻剑快马
链接:https://juejin.im/post/5b7ac50d6fb9a01a0b318e71
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。