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