HTTPにリクエストする
HTTP に情報をリクエストして表示します。
プラグインのインストール
pubspec.yaml
の dependencies
ブロックの中に、
http: ^0.11.3
を記述します。
例えば、
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.0
http: ^0.11.3
のようになります。
http
の 0.11.3
はプラグインのバージョンです。
こちら に最新のバージョンが載っていますので確認してください。
そして、ターミナルを開き、
$ flutter packages get
とします。これでインストールは完了です。
使い方
まず、 .dart
ファイルの一番上の方に、
import 'package:http/http.dart' as http;
import 'dart:convert';
と書き、HTTPにリクエストするためのライブラリ http
を使えるようにします。
そして、State
の中に、プロパティ
List<String> _data;
を定義します。最後に、 URL 指定をして、タイトルを更新するようなロジックを書いて完了です。
void fetchPosts() async {
const url = 'https://jsonplaceholder.typicode.com/posts';
http.get(url)
.then((response) {
print("Response status: ${response.statusCode}");
print("Response body: ${response.body}");
setState(() {
List list = json.decode(response.body);
_data = list.map<String>((value) {
return value['title'];
}).toList();
});
});
}
@override
void initState() {
_data = [];
fetchPosts();
super.initState();
}
今回は、 title
のみを文字列として取り出す例を書いてみました。
実際使うときは、 json_serializable
を使うと、もっとスマートに書けます。
詳しくは、 こちら を参照してください。
コードの例
例えば、コードは以下のようになります。
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'わかりやすい'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _data;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
itemCount: _data.length,
itemBuilder: (context, int index) {
return Padding(
padding: EdgeInsets.all(8.0),
child: Text(
_data[index],
));
},
),
);
}
void fetchPosts() async {
const url = 'https://jsonplaceholder.typicode.com/posts';
http.get(url)
.then((response) {
print("Response status: ${response.statusCode}");
print("Response body: ${response.body}");
setState(() {
List list = json.decode(response.body);
_data = list.map<String>((value) {
return value['title'];
}).toList();
});
});
}
@override
void initState() {
_data = [];
fetchPosts();
super.initState();
}
}
スクリーンショット
https://jsonplaceholder.typicode.com/posts の内容のうち、
title
のみ表示されていることを確認できます。