2.要求ネットワーク

3.応答情報をCustom Dartオブジェクトに変換する

3-1. クラスの作成

JSONからPostを生成するファクトリジェネレータを含む

3-2. http.応答をInfoに変換

サーバがステータスコード200の「OK」応答を返すと、工場メソッドfromjson()を使用してJSON MapをPostに変換する

4.データのインポート

initState()またはdidChangeDependencies()メソッドでfetchメソッドを呼び出す
InitState()メソッドは1回のみ実行され、絶対に実行されません.
InheritedWidgetの変更に対する応答として、APIを再ロードしたい場合はdidChangeDependencies()メソッドに呼び出しを追加します.

5.データの表示

画面にデータを表示するには、FutureBuilderコンポーネントを使用します.FutureBuilderコンポーネントは、Flatterのデフォルトコンポーネントであり、非同期データ処理を簡略化できます.

5-1. 欲しいフューチャーを入れるここでは,fetchInfo()関数に戻りfutureを加える.

5-2. Futureのステータス(ロード、成功、エラー)に基づいて、builder関数を追加し、Flutterに何をロードすべきかを伝えます。

なぜinitState()からfetchPost()を呼び出すのですか?
Flutterは変更するたびにbuild()メソッドを呼び出します.この呼び出しは驚くほど頻繁に発生します.ネットワークリクエストコードをbuild()メソッドに保持すると、不要なAPIリクエストが大量に発生し、アプリケーションが遅くなる可能性があります.

完全なコード

<script>
 
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

Future<Info> fetchInfo() async {
var url = 'https://api.mockaroo.com/api/5ee43e50?count=1&key=6213f2b0';
final response = await http.get(Uri.parse(url));

if (response.statusCode == 200) {
  //만약 서버가 ok응답을 반환하면, json을 파싱합니다
  print('응답했다');
  print(json.decode(response.body));
  return Info.fromJson(json.decode(response.body));
} else {
  //만약 응답이 ok가 아니면 에러를 던집니다.
  throw Exception('계좌정보를 불러오는데 실패했습니다');
}
}

class Info {
final int id;
final String userName;
final int account;
final int balance;

Info(
    {required this.id,
    required this.userName,
    required this.account,
    required this.balance});

factory Info.fromJson(Map<String, dynamic> json) {
  return Info(
    id: json["id"],
    userName: json["userName"],
    account: json["account"],
    balance: json["balance"],
  );
}

}

class InfoPage extends StatefulWidget {
const InfoPage({Key? key}) : super(key: key);

@override
State<InfoPage> createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
Future<Info>? info;

@override
void initState() {
  super.initState();
  info = fetchInfo();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text('info', style: TextStyle(color: Colors.white)),
        centerTitle: true,
      ),
      body: Center(
        child: FutureBuilder<Info>(
          //통신데이터 가져오기
          future: info,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return buildColumn(snapshot);
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}에러!!");
            }
            return CircularProgressIndicator();
          },
        ),
      ));
}

Widget buildColumn(snapshot) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text('고객번호:' + snapshot.data!.id.toString(),
          style: TextStyle(fontSize: 20)),
      Text('고객명:' + snapshot.data!.userName.toString(),
          style: TextStyle(fontSize: 20)),
      Text('계좌 아이디:' + snapshot.data!.account.toString(),
          style: TextStyle(fontSize: 20)),
      Text('잔액:' + snapshot.data!.balance.toString() + '원',
          style: TextStyle(fontSize: 20)),
    ],
  );
}
}

</script>

結果画面