【Flutter】データの取得と表示

chatGPT に立ててもらったスケジュールに準じてFlutterの状態管理を勉強。

• Day 8: データの取得と表示
  • REST APIからデータを取得する方法を学ぶ
  • 取得したデータを表示する方法を学ぶ

APIを使う準備

httpパッケージを使う

pub.devからpubsec.yamlで使う部分をコピーする。
執筆時点ではhttp: ^1.1.2。

dependencies:
  http: ^1.1.2

依存関係として追加

ターミナルで以下を実行

$ flutter pub add http

REST APIからデータを取得

List<dynamic> _posts = []; // List<dynamic>は動的なリスト

@override
void initState() {
  super.initState(); //ウィジェットの状態を初期化
  fetchPosts(); // キャッシュさせるために変数にしておく
}

Future<void> fetchPosts() async { // Future は 非同期処理で Widget を生成したいときに使う
  final response = await http.get(Uri.parse('https://qiita.com/api/v2/items'));
  if (response.statusCode == 200) {
    final List<dynamic> data = jsonDecode(response.body);
    setState(() {
      _posts = data;
    });
  } else {
    throw Exception('Failed to load data');
  }
}

取得したデータを表示

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Qiita API で記事取得'),
        ),
        body: ListView.builder(
          itemCount: _posts.length,
          itemBuilder: (context, index) {
            final post = _posts[index];
            return ListTile(
              leading: Image.network(post['user']['profile_image_url']),
              title: Text(post['title']),
              subtitle: Text('by: ${post['user']['name']}'),
            );
          },
        ),
      ),
    );
  }

サンプルソース

サンプル

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<dynamic> _posts = []; // List<dynamic>は動的なリスト

  @override
  void initState() {
    super.initState(); //ウィジェットの状態を初期化
    fetchPosts(); // キャッシュさせるために変数にしておく
  }

  Future<void> fetchPosts() async { // Future は 非同期処理で Widget を生成したいときに使う
    final response = await http.get(Uri.parse('https://qiita.com/api/v2/items'));
    if (response.statusCode == 200) {
      final List<dynamic> data = jsonDecode(response.body);
      setState(() {
        _posts = data;
      });
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Qiita API で記事取得'),
        ),
        body: ListView.builder(
          itemCount: _posts.length,
          itemBuilder: (context, index) {
            final post = _posts[index];
            return ListTile(
              leading: Image.network(post['user']['profile_image_url']),
              title: Text(post['title']),
              subtitle: Text('by: ${post['user']['name']}'),
            );
          },
        ),
      ),
    );
  }
}

参考