LoginSignup
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@k-keita(K K)

【Flutter】HTTP通信の基本（GET / POST）- http / dio パッケージを比較 -

Last updated at Posted at 2024-10-09

1. はじめに

アプリケーション開発において、HTTP通信は非常に重要な要素です。HTTP（Hypertext Transfer Protocol）は、クライアント（アプリ）とサーバー間でデータを送受信するためのプロトコルです。例えば、ニュースアプリがWebAPIを通して最新のニュースを取得したり、ユーザーが入力した情報をサーバーに送信してデータベースに登録する際に、HTTP通信が使用されます。

この記事では、代表的なHTTP通信パッケージであるhttpとdioを比較し、さらにhttpbinという登録不要のWebAPIに対して、GET / POSTリクエストを実装・動作確認する方法を解説します。

2. パッケージの比較

FlutterでHTTP通信を行う際に使われる主なライブラリとして、httpパッケージとdioパッケージがあります。それぞれの特徴を以下の丸バツ表で比較してみます。

機能/特徴 http dio
シンプルなGET/POST ○ ○
ヘッダーやクエリパラメータの設定 ○ ○
非同期処理（async/await）対応 ○ ○
タイムアウト設定 ○ ○
JSONの自動変換 △（手動実装） ○
ファイルのダウンロード/アップロード × ○
複雑なリクエスト（フォームデータやマルチパート） △（手動実装） ○
WebSocketのサポート × ×
学習コスト ○（低い） △（やや高い）
プロジェクトの規模 小〜中規模 中〜大規模

解説

  • httpパッケージ: シンプルで軽量なHTTPクライアントです。基本的なGETおよびPOSTリクエストを簡単に行うことができ、小規模なプロジェクトや基本的な機能を必要とするアプリケーションに最適です。学習コストも低く、導入が容易です。

  • dioパッケージ: より高度な機能を提供します。大規模なプロジェクトや複雑なHTTP通信が必要な場合に特に有利です。学習コストは少し高めですが、その分柔軟性があります。

3. httpbinの紹介

httpbinは、登録不要で簡単にHTTP通信を試すことができるWebサービスです。これにより、HTTP通信のテストを気軽に行うことができます。

http://httpbin.orgというURLの後ろに決められたパラメータを付与することで、様々なテストが行えます。今回は、以下の機能を使用します。

機能 エンドポイント
GETリクエストのテスト http://httpbin.org/get
POSTリクエストのテスト http://httpbin.org/post

4. httpパッケージでの実装

httpパッケージのインストール

httpパッケージをプロジェクトに追加します。

flutter pub add http

Flutterコード内でhttpをインポートします。

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

GETリクエストの実装

以下のコードは、httpbinのAPIを使ってGETリクエストを送信し、サーバーからデータを取得する例です。

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://httpbin.org/get'));

  if (response.statusCode == 200) {
    var data = json.decode(response.body);
    print(data); // 取得したデータを表示
  } else {
    print('Failed to load data');
  }
}

POSTリクエストの実装

次に、POSTリクエストを送信する例です。

Future<void> postData() async {
  final response = await http.post(
    Uri.parse('https://httpbin.org/post'),
    headers: {'Content-Type': 'application/json'},
    body: json.encode({'key1': 'value1', 'key2': 'value2'}),
  );

  if (response.statusCode == 200) {
    var data = json.decode(response.body);
    print(data); // 取得したデータを表示
  } else {
    print('Failed to post data');
  }
}

動作確認

以下のコードでは、GETボタンを押すとGETリクエスト、POSTボタンを押すとPOSTリクエストが実行され、レスポンスの内容が表示されます。

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: 'HTTP Requests Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // GETリクエストを送信
  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://httpbin.org/get'));

    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      print(data); // 取得したデータを表示
    } else {
      print('Failed to load data');
    }
  }


  // POSTリクエストを送信
  Future<void> postData() async {
    final response = await http.post(
      Uri.parse('https://httpbin.org/post'),
      headers: {'Content-Type': 'application/json'},
      body: json.encode({'key1': 'value1', 'key2': 'value2'}),      
    );

    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      print(data); // 取得したデータを表示
    } else {
      print('Failed to post data');
    }
  } 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HTTP Requests Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Send GET Request'),
            ),
            ElevatedButton(
              onPressed: postData,
              child: Text('Send POST Request'),
            ),
          ],
        ),
      ),
    );
  }
}

説明

  1. GETリクエスト

    • http.get()でhttpbin.org/getにGETリクエストを送信。
    • レスポンスが200 OKであれば、レスポンスボディを画面に表示します。

  2. POSTリクエスト

    • http.post()でhttpbin.org/postにPOSTリクエストを送信。bodyにはJSON形式のデータを送信します。
    • 同様にレスポンスが成功すれば、結果を表示します。

実行方法

アプリを実行し、GETまたはPOSTボタンを押すとリクエストを送信し、その結果が画面に表示されます。

5. dioパッケージでの実装

dioパッケージのインストール

dioパッケージをプロジェクトに追加します。

flutter pub add dio

Flutterコード内でdioをインポートします。

import 'package:dio/dio.dart';

GETリクエストの実装

dioを使ったGETリクエストの例です。

Future<void> fetchData() async {
  final dio = Dio();
  try {
    final response = await dio.get('https://httpbin.org/get');
    print(response.data); // 取得したデータを表示
  } catch (e) {
    print('Error: $e');
  }
}

POSTリクエストの実装

次に、POSTリクエストの例です。

Future<void> postData() async {
  final dio = Dio();
  try {
    final response = await dio.post('https://httpbin.org/post',data: {'key1': 'value1', 'key2': 'value2'});
    print(response.data); // 取得したデータを表示
  } catch (e) {
    print('Error: $e');
  }
}

動作確認

以下のコードでは、GETボタンを押すとGETリクエスト、POSTボタンを押すとPOSTリクエストが実行され、レスポンスの内容が表示されます。

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dio HTTP Requests Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final _dio = Dio();

  // GETリクエストを送信
  Future<void> fetchData() async {
    try {
      final response = await _dio.get('https://httpbin.org/get');
      print(response.data);
    } catch (e) {
      print('Error: $e');
    }
  }

  // POSTリクエストを送信
  Future<void> postData() async {
    try {
      final response = await _dio.post('https://httpbin.org/post', data: {'key1': 'value1', 'key2': 'value2'});
      print(response.data);
    } catch (e) {
      print('Error: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dio HTTP Requests Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ElevatedButton(
              onPressed: fetchData,
              child: Text('Send GET Request'),
            ),
            ElevatedButton(
              onPressed: postData,
              child: Text('Send POST Request'),
            ),
          ],
        ),
      ),
    );
  }
}

説明

  1. GETリクエスト

    • Dio().get()を使用して、https://httpbin.org/getにGETリクエストを送信。
    • レスポンスが成功すれば、レスポンスデータを画面に表示します。

  2. POSTリクエスト

    • Dio().post()を使用して、https://httpbin.org/postにPOSTリクエストを送信。送信するデータとして{'key1': 'value1', 'key2': 'value2'}を含めています。
    • 同様にレスポンスが成功すれば、結果を表示します。

実行方法

アプリを実行し、GETまたはPOSTボタンを押すとリクエストを送信し、その結果が画面に表示されます。

6. おわりに

FlutterでのHTTP通信は非常にシンプルで、httpパッケージとdioパッケージを使うことで簡単に実装できます。httpは軽量で基本的な通信に適しており、dioはより多機能で大規模なプロジェクトに向いています。httpbinを利用することで、HTTP通信のテストやデバッグも容易に行えます。

これらの知識を活用し、Flutterでのアプリ開発をさらに進めていきましょう！

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?