はじめに

FlutterでAPIからデータ取得して、リスト表示するサンプルを作成しました。
FlutterでAPIをコールしてデータを表示して見た
この記事見て、自分もFlutterで同様のやつを作成したかったので、
いろいろ調べた結果をQiitaにのっけときます。

今回つくるもの

初心者向けに（自分もflutter初心者なので）段階を追ってかきたい。

つくろう

1.必要モジュールのインポート

main.dart

import 'package:flutter/material.dart'; //google提供のUIデザイン
import 'package:http/http.dart' as http; //httpリクエスト用
import 'dart:async'; //非同期処理用
import 'dart:convert'; //httpレスポンスをJSON形式に変換用

モジュールについて

material.dart
Google公式のデザインパッケージ。flutterプロジェクト基本いれる。
http.dart
HTTPリクエスト用.公式ドキュメントでも as httpとして使用してい。
async
JavaScriptのPromise。SwiftのSwiftTask。非同期処理
convert
Jsonのエンコーダー、デコーダー。

2.メイン関数のとアプリのひな型を作る

void main() { // main.dartは基本これだけを呼ぶ
  runApp(MaterialApp( // runAppにはStatelessWidget or StatefullWidgetを継承したものを渡す
    home: HomePage(),  //homeで、ルーティング情報ここにかいてく。
  ));
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(); //Scaffold() アプリの中身（appbar+title構造）を簡単につくれる
  }
}

メイン関数とその後の動きについて

run main.dart
-> main()　-> runApp()　-> home:
-> (state情報みる)HomePage -> （state継承した）_HomePageState()
-> build() (Widgetはbuild()をもっている)
Dartの状態遷移は以下の記事参照
Flutterアプリの基本/Flutterの状態遷移について
Dartのstatefull,statelessについては以下参照
statefull,statelessについて(日本語)/statefull,statelessについて(英語)
状態変化に応じて変わるor変わらないこと。
上記のふるまいがアプリ起動時の基本形でありひな型部分。
Widget build()の内部にゴリゴリとデザインとアクションを書き込んでいくこと。
Scaffold()が簡単に書くために用意されてるのでつかう。

3.タイトルバーと背景色つける

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("あああああ"),
        backgroundColor: Colors.green,
      ),
    );
  }

Scaffold,appBarについて

Scaffold_class
Scaffold_samples
class:Implements the basic material design visual layout structure.
description:A typical AppBar with a title, actions, and an overflow dropdown menu.
scaffold()は、バー、タイトル、中身、アクション、ボトムの典型的なアプリ構造を簡単にできる仕組みらしい。詳しくはSamplesリンクをみるとわかります。
appBar

タイトル、ボタンとかをおく。ボタンには（画像みたいに）アクションとか置いてくのが典型的な仕組み。
今回は置かないで、テキストと背景色をつけるだけ。

3.2ここまででできるやつ

4.APIデータを用意する

どこでもいいですが、サンプルページREQ | RESにある、
以下のデータをつかわせていただく。

{
    "page": 2,
    "per_page": 3,
    "total": 12,
    "total_pages": 4,
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
        }
    ]
}

使用するurlは以下です。

url_for_request

https://reqres.in/api/users?page=2

5.非同期操作とか

//class _HomePageState extends State<HomePage> {

  Future getData() async{ //Future xxx async{} という記法
    http.Responsde response = await http.get("https://reqres.in/api/users?page=2");
  }  
  // 非同期処理は、デフォルトでは呼び出し元は処理の完了を待ちませんが、
  // await キーワードをつけると完了を待つことができる。
  @override
  void initState() {
    super.initState();
    getData();
  }

async_公式/async_日本語
非同期処理:処理が呼び出されつつも、呼び出し元では完了を待たずにその先に処理が進んでいくこと。
initState_method/widget lifecycle events
initStateは、viewのライフライクル的に言えば、Stateオブジェクトがつくられてから"一度"呼ばれるらしい。
呼ばれるタイミングと頻度は重要。ライフサイクルは要復習。

6.データ変換:JSON->Map and List

//class _HomePageState extends State<HomePage> {

  Map data;
  List useData;

//  Future getData() async{
//    http.Responsde response = await http.get("");
    data = json.decode(response.body); //json->Mapオブジェクトに格納
    setState(() { //状態が変化した場合によばれる
      userData = data["data"]; //Map->Listに必要な情報だけ格納
    });
  }

Flutterアプリの基本/FlutterのStateについて
変数を用意して、取得したデータを順次処理していく段階。
json->Map->List。

7.1 画面に表示させる-プロフィール画像

//      appBar: AppBar(
//        title: Text("あああああああ"),
//        backgroundColor: Colors.green,
//      ),
      body: ListView.builder( //スクロール可能な可変リストを作る
          itemCount: userData == null ? 0 : userData.length, //受け取る数の定義
          itemBuilder: (BuildContext context, int index) { //ここに表示したい内容をindexに応じて
            return Card( //cardデザインを定義:material_design
              child: Row(
                children: <Widget>[
                  CircleAvatar( //ユーザプロフィール画像に使う用のクラス
                    backgroundImage: NetworkImage(userData[index]["avator"]),
                    //NetworkImage()はHTTPで画像をとってくる。これはプロフィール画像。
                  )
                ],
              ),
            );
          },
      )

ListView.builder_const/リストを表示する
ListView.builder:countとbuilderで、値の数だけ柔軟に生成できるリスト構造
Flutterでよくつかう共通Widget
/Card_class
card:以下のような、よく使われる共通デザインのこと。

CircleAvator_class/githubアプリ
CircleAvator->NetworkImageというプロフィール画像を表示するテンプレの実装

7.2 画面に表示させる-テキスト

//                   CircleAvatar(
//                      backgroundImage: NetworkImage(userData[index]["avator"]),
//                    ),
                    Text("${userData[index]["first_name"]} ${userData[index]["last_name"]}")

あとはpaddingとかをちょうせつしたら完成します！

あとがき

flutterは公式ドキュメントがかなり充実しているので大助かり。
あと、英語力がないと積むのだけ注意。

【初心者】Flutter:APIでデータ取得して、一覧表示させるサンプルアプリ