Flutterで、通信処理を行う

前回の記事で、Flutterで、JSONを処理するを記事にしたのですが、それをベースに通信処理を行いたいと思います。

JSONサーバーの準備

My JSON Serverを使用します。
こちらは、自分のGithubにjsonを用意することで、jsonのレスポンスを取得出来るサービスです。
特にサーバを用意することなくJSONのレスポンスを受け取れるので、非常に便利です。

まず、自分のGithubにpublicなリポジトリを用意します。
そこにdb.jsonファイルを作成します。Github上では、[Add file -> Create new file]で作成出来ます。

db.json

{
  "gets": [
    {
        "userId": 1,
        "id": 1,
        "title": "user 1",
        "completed": false,
        "_type": null
    },
    {
        "userId": 2,
        "id": 2,
        "title": "user 2",
        "completed": true,
        "_type": "type"
    }  
  ],
  "posts": [
    { "id": 1, "title": "Post 1" },
    { "id": 2, "title": "Post 2" },
    { "id": 3, "title": "Post 3" }
  ]
}

GETやPOSTで取得出来るjsonを定義します。
Postmanなどで試せます。
取得方法は、下記をベースに取得します。

https://my-json-server.typicode.com/[ユーザ名]/[リポジトリ名]

GETの場合、下記のURLで取得できます。

https://my-json-server.typicode.com/[ユーザ名]/リポジトリ名/gets/1

Flutterの実装

通信プラグインは、dioを使用します。

pubspec.yaml

dependencies:
  json_annotation: ^4.1.0
  dio: ^4.0.0

class Network {
  final Dio _dio = Dio();

  Network() {
    _dio.interceptors
        .add(LogInterceptor(requestBody: true, responseBody: true));
  }

  Future<User?> getUser() async {
    try {
      Response response = await _dio
          .get("https://my-json-server.typicode.com/you-shimizu/test/gets/1");
      return User.fromJson(response.data);
    } catch (error) {
      print(error);
    }
    return null;
  }
}

Androidの場合、下記も忘れずに

AndroidManifest.xml

    <uses-permission android:name="android.permission.INTERNET" />