備忘録
Fluuterを扱うにあたり、API通信ってどうやるのか調べていた時に下記の記事を見つけた。
下記の記事の参考に自分も作成してみる。
FlutterでREST APIを叩いて取得したデータを表示してみた
https://dev.classmethod.jp/articles/flutter-rest-api/
APIはGoogleBooksAPIを利用する
https://developers.google.com/books
完成イメージ
環境情報
項目 | 環境 |
OS | macOS Monterey 12.6 |
Xcode | 14.0(14A309) |
AndroidStudio | Dolphin |
Flutter | 3.3.2 |
Dart | 2.18.1 |
コード一覧
lib/main.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Sample',
home: MyHomePage(title: 'Flutter Sample'),
);
}
}
//StatefluWidgetを使って描画タイミングを管理
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List items = [];
//GoogleBoooksAPI取得 非同期処理
Future<void> getData() async {
var response = await http.get(Uri.https(
'www.googleapis.com',
'/books/v1/volumes',
{'q': '{Flutter}', 'maxResults': '40', 'langRestrict': 'ja'}));
var jsonResponse = jsonDecode(response.body);
//stateにセット
setState(() {
items = jsonResponse['items'];
});
}
@override
void initState() {
super.initState();
//API呼び出したら描画 (データ更新・再描画)
getData();
}
//ListViewでAPIから取得した値を表示
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Sample'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
ListTile(
leading: Image.network(
items[index]['volumeInfo']['imageLinks']['thumbnail'],
),
title: Text(items[index]['volumeInfo']['title']),
subtitle: Text(items[index]['volumeInfo']['publishedDate']),
),
],
),
);
},
),
);
}
}
解説
API通信
- 下記のパッケージを利用する
- パッケージは、ターミナルで下記コマンドを叩く
- 利用したいファイル(今回はmain.dart)の先頭でimportが必要
flutter pub add http
//GoogleBoooksAPI取得 非同期処理
Future<void> getData() async {
var response = await http.get(Uri.https(
'www.googleapis.com',
'/books/v1/volumes',
{'q': '{Flutter}', 'maxResults': '40', 'langRestrict': 'ja'}));
var jsonResponse = jsonDecode(response.body);
//stateにセット
setState(() {
items = jsonResponse['items'];
});
}
API通信した後の描画方法
@override
void initState() {
super.initState();
//API呼び出したら描画 (データ更新・再描画)
getData();
}
Androidでビルドする時の注意
- AndroidでBuildする際にエラーが起きたので下記の記事を元に修正
https://qiita.com/iseruuuuu/items/6527667d677ebfe9d1e1