Flutter dio で jsonリクエスト方法と使い方

2019/12/25 2020/8/26 書き溜め

Flutterでアプリ開発をする際に、サーバーサイドのAPIにアクセスするために
Dioってライブラリを使うのがいい。
dioはリクエストをとても扱いやすくしてくれる。

サーバーへのリクエストではJSON形式のHTTPリクエストが多いので
基本的な使い方を書き溜め。

概要

Dio HTTP GET

HTTP GETをするのは簡単。
dio.get(url)でいい。
Headerを付与したりする場合もOption指定が楽。

import 'package:dio/dio.dart';

final dio = new Dio();
final url = "https://omohikane.com"
final auth_token = "hogehoge";

var data = await dio.get(
    url,
    options: Options(
      headers: {
        "Content-Type": "application/json",
        "Authorization": " Bearer $auth_token",
      },
    ),
  ).then((response) {
    print(response.data);
    return response.data;
  }).catchError((err){
    print(err);
     return null;
});

import 'package:dio/dio.dart';

final dio = new Dio();

final url = "https://omohikane.com"

final auth_token = "hogehoge";

var data = await dio.get(

url,

options: Options(

headers: {

"Content-Type": "application/json",

"Authorization": " Bearer $auth_token",

).then((response) {

print(response.data);

return response.data;

}).catchError((err){

print(err);

return null;

});

response.dataでオブジェクトが取れるので
あとはFutureBuilderに投げたりすきにできる。

Dio HTTP POST

POSTも簡単。dio.post(url, data)でいける。
FormDataを利用できる。

import 'package:dio/dio.dart';

final dio = new Dio();
final url = "https://omohikane.com"

var payload = {
  "title": "タイトル",
  "content": "内容",
};
var data = await dio.post(
      url,
      data: new FormData.fromMap(
          payload
      ),
      options: Options(
        headers: {
        },
      ),
    ).then((response) {
      print(response.data);
      return response.data;
    }).catchError((err){
      print(err);
      return null;
   });

import 'package:dio/dio.dart';

final dio = new Dio();

final url = "https://omohikane.com"

var payload = {

"title": "タイトル",

"content": "内容",

};

var data = await dio.post(

url,

data: new FormData.fromMap(

payload