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 のみ表示されていることを確認できます。

参考リンク