Open2ヶ月前にコメント追加1

[Flutter] API

Flutter

API

Dart

gonC

パッケージ導入

$ flutter pub add http
$ flutter pub add json_annotation
$ flutter pub add --dev json_serializable
$ flutter pub add --dev build_runner

リクエストオブジェクト

libフォルダの配下にdata.dartというファイルを追加し、以下のコードを記述

data.dart

import 'package:json_annotation/json_annotation.dart';

part 'data.g.dart';

@JsonSerializable(fieldRename: FieldRename.snake)
class Request{
  const Request({
    required this.appId,
    required this.sentence,
    this.outputType = 'hiragana',
});

  final String appId;
  final String sentence;
  final String outputType;

  Map<String,Object?> toJson() => _$RequestToJson(this);
}

@JsonSerializableアノテーションを付与することで、json_serializableパッケージがJSONのシリアライズ、デシリアライズのコードを生成する
FieldRename.snakeを指定することでJSONをシリアライズ、デシリアライズする際に、フィールド名をスネークケースに変換する
RequestクラスをMap形式に変換するためのtoJsonメソッドを定義する。メソッドの本体はjson_serializableパッケージが生成し、_$+クラス名+ToJsonという命名規則なる。このメソッドを参照するため、part命令文でdata.g.dartをインポートしている

$flutter packages pub run build_runner build

レスポンスオブジェクト

data.dart

@JsonSerializable(fieldRename: FieldRename.snake)
class Response{
  const Response({
    required this.converted,
});

  final String converted;

  factory Response.fromJson(Map<String,Object?> json) => _$ResponseFromJson(json);
}

ResponseクラスのインスタンスをJSONから生成するためのfactoryコンストラクタを定義

$flutter packages pub run build_runner build

実装例

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

// 省略

          ElevatedButton(
              onPressed: () async {
                final formState = _formKey.currentState!;
                if(!formState.validate()){
                  return;
                }
                final url = Uri.parse('https://labs.goo.ne.jp/api/hiragana');
                final headers = {'Content-Type': 'application/json'};
                final request = Request(
                  appId: const String.fromEnvironment('appId'),
                  sentence: _textEditingController.text,
                );

                final result = await http.post(
                  url,
                  headers: headers,
                  body: jsonEncode(request.toJson()),
                );

                final response = Response.fromJson(
                  jsonDecode(result.body) as Map<String,Object?>,
                );

                debugPrint('変換結果: ${response.converted}');
              },
              child: const Text(
                '変換'
              )
          )