Заметки 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

Готовый эффект показан на рисунке

гитхаб-адрес