Flutter筆記: 獲取網路資料及渲染列表

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