【Flutterで画面の連携機能を作る】サーバにhttpリクエストをする方法とは？

Flutterで始めるモバイルアプリ開発 第22回

httpパッケージの利用方法

　dartでhttp通信を利用するには、一般的にはhttpパッケージを利用します。httpパッケージを利用する場合には、以下のようにpubspec.yamlにhttpパッケージを追加します。

［リスト2］httpパッケージの導入（pubspec.yamlの抜粋）

dependencies:
  : （省略）
  http: ^0.13.4

httpパッケージを使ったGETリクエスト

　httpパッケージを使ってGETリクエストをする場合の実装例がリスト3です。このような使い方がもっとも簡単な利用方法です。

［リスト3］GETリクエストの利用例（lib/controller/HttpLoginController.dartの抜粋）

// （1） httpパッケージのインポート処理
import 'package:http/http.dart' as http;
// : （省略）
class HttpLoginController extends ILoginController{

  Map _config = {};

  @override
  Future config() async{
    // （2） リクエストするURLの作成
    var url = Uri.parse("http://hostname/config.php");

    // （3） GETリクエスト
    var response = await http.get(url);

    // （4） ステータスコード
    if(response.statusCode == 200){
      //  （5） 日本語が文字化けしてしまう
      // _config = jsonDecode(response.body) as Map;
      //  （6） 日本語が含まれている場合
      _config = jsonDecode(utf8.decode(response.bodyBytes)) as Map;
      return Future.value(true);
    }
    else{
      return Future.value(false);
    }
  }
  // : （省略）
}

　httpパッケージを利用するには、（1）のように名前をつけてインポートします。続いて、リクエストするURLは（2）のようにUriクラスのインスタンスを作成します。UriクラスはGETパラメータなどがある場合にはより簡単にリクエストURLの文字列が作成できるようになります。

　そして、（3）でGETリクエストを送信します。また、レスポンスコードは（4）のようにstatusCodeで取得可能です。また、（5）のようにレスポンスデータの文字列はbodyで取得できます。今回のレスポンスデータはJSONデータであるため、取得したデータを（5）のようにjsonDecodeを使ってMap形式に変換します。

　しかし、レスポンスデータには日本語が含まれているために、この処理では文字化けしてしまうので、bodyプロパティではなく、（6）のようにレスポンスデータのバイトデータを保持するbodyBytesを使います。このデータをutf8でデコードした文字列を使って処理するようにします。

POST処理をする

　続いて、POST処理をする場合にはリスト4のように処理します。

［リスト4］POSTリクエストの利用例（lib/controller/HttpLoginController.dartの抜粋）

class HttpLoginController extends ILoginController{

　// （省略）

  Future loginForm(String loginId, String password) async {
    var url = Uri.parse("http://hostname/login/form.php");

    // （1） POST処理をする
    var response = await http.post(url, body : {
      'login_id' : loginId,
      'password' : password
    },headers: {
      'X-Chat-App-Key' : 'api_key'
    });

    // : （省略）
  }
}

　（1）のようにPOSTするデータはbodyに設定し、追加のヘッダがある場合には、headersに設定します。headersはGETリクエストでも利用できます。また、bodyにMap形式を使えば、自動的にリクエストするデータはapplication/x-www-form-urlencoded形式になります。

　しかし、POSTデータをJSON形式、つまり、application/json形式でリクエストしたい場合に自動的に変換されるのは困ります。その場合には、リスト5のようにします。

［リスト5］POSTリクエスト（JSON形式）の利用例（lib/controller/HttpLoginController.dartの抜粋）

class HttpLoginController extends ILoginController{

　// （省略）

  Future loginJson(String loginId, String password) async{
    var url = Uri.parse("http://hostname/login/json.php");
    // （1） Content-Typeを設定する
    var headers = {
      'Content-Type': 'application/json',
      'X-Chat-App-Key' : 'api_key'
    };
    var body = {
      'login_id' : loginId,
      'password' : password
    };

    // （2） bodyにJSONエンコードし設定
    var response = await http.post(url, body : jsonEncode(body),headers: headers);
    // : （省略）
  }
}

　Content-Typeのヘッダ情報は（1）のように設定します。ただし、この設定処理はヘッダ情報を変更しているだけです。つまり、実装に送信するデータは（2）のように実際にjsonEncode関数を使ってエンコードしbodyに設定します。

　今回はGET／POST処理だけを紹介していますが、他のメソッドも同様なので、詳しくはこちらを参照してください。