【Flutter】Http通信を行う

WebAPIが使用するために、Dartのhttpライブラリを使ってHttp通信が出来るようにします。

プラットフォームは全て網羅しているので、何も気にすることなく使用できるかと思います。

ライブラリのインストール

pubspec.yamlのdependenciesに今回使用するhttpライブラリを追記して保存するとインストールされます。

dependencies:
  flutter:
    sdk: flutter
  http: ^1.0.0

実装

flutter createしたばかりのソースにhttpライブラリとJsonを操作するためのconvertをインポートします。

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

WebAPIからJsonを取得するところを実装します。
WebAPIはなんでも良いですが、今回はSymbolのノードリストを取得してみましょう。
ただ、全て取得すると1000近くのノード情報が返ってくるので、limitパラメータで10件に絞って取得します。
https://symbol.services/nodes?limit=10

  Future<void> _getHttp() async {
    // https://symbol.services/nodes?limit=10
    var url = Uri.https('symbol.services', '/nodes', {'limit': '10'});
    debugPrint("URL: ${url.toString()}");

    var response = await http.get(url);
    if (response.statusCode == 200) {
      List<dynamic> jsonResponse = convert.jsonDecode(response.body);
      for (Map<String, dynamic> item in jsonResponse) {
        debugPrint("host: ${item['host']}");
      }
    } else {
      debugPrint('Request failed with status: ${response.statusCode}.');
    }
  }

main.dartのfloatingActionButtonを書き換えます。
onPressedの値を_getHttpにして、ボタンを押したらJsonに情報を受け取りにいくようにします。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getHttp,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );

これでボタンを押すとJsonを取得してコンソールにホスト名が表示されるようになります。