FlutterでHTTPリクエストを使用する方法

序章

アプリケーションは頻繁に実行する必要があります POST と GET およびその他のHTTPリクエスト。

Flutterは、HTTPリクエストの作成をサポートするhttpパッケージを提供します。

この記事では、を使用するFlutterアプリの例を作成します http プレースホルダー情報を表示するためのHTTPリクエストを実行するパッケージ。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Flutterをダウンロードしてインストールします。
• Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
• コードエディタ用のプラグインをインストールすることをお勧めします。
  • AndroidStudio用にインストールされたFlutterおよびDartプラグイン。
  • VisualStudioCode用にインストールされたFlutter拡張機能。

このチュートリアルは、Flutter v1.22.2、Android SDK v30.0.2、およびAndroidStudiov4.1で検証されました。

ステップ1—プロジェクトの設定

セットアップを実行するために、Flutterアプリの例を作成します。

Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。

flutter create flutter_http_example

新しいプロジェクトディレクトリに移動します。

cd flutter_http_example

使用する flutter create ボタンがクリックされた回数を表示するデモアプリケーションを作成します。

開ける pubspec.yaml コードエディタで、次のプラグインを追加します。

dependencies:
  flutter:
    sdk: flutter

  http: ^0.12.0+2

これはdart.devによって公開された公式のFlutterプラグインであり、 100 % he althスコアを持っているため、このプラグインの信頼性を信頼できます。

ステップ2—処理 GET リクエスト

最初のタスクは、APIとの対話に使用できるクラスを作成することです。

コードエディタを開いて、 http_service.dart のファイル lib ディレクトリ。 ここでは、新しいものを開発します HttpService クラスを追加し、 getPosts 関数：

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

class HttpService {
  final String postsURL = "https://jsonplaceholder.typicode.com/posts";

  Future<List<Post>> getPosts() async {
    Response res = await get(postsURL);

    if (res.statusCode == 200) {
      List<dynamic> body = jsonDecode(res.body);

      List<Post> posts = body
        .map(
          (dynamic item) => Post.fromJson(item),
        )
        .toList();

      return posts;
    } else {
      throw "Unable to retrieve posts.";
    }
  }
}

この例では、JSONプレースホルダーに接続します。 このコードは http パッケージの get に postsURL ストリング。

そのリクエストが成功した場合、このコードは List<Post> を使用して Post.fromJson. それ以外の場合は、エラーメッセージがスローされます。

次に、コードエディタを使用して post_model.dart のファイル lib ディレクトリ。 ここでは、新しいものを開発します Post クラス：

import 'package:flutter/foundation.dart';

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({
    @required this.userId,
    @required this.id,
    @required this.title,
    @required this.body,
  });

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

JSONプレースホルダーからの応答をシリアル化するために、このコードは新しい Post とともに fromJson JSONに基づくメソッド Map.

A Post JSONによって返されるプレースホルダーは、 userId, id, title、 と body.

ステップ3—表示 Posts

次に、コードエディタを使用して posts.dart のファイル lib ディレクトリ。 ここでは、を作成します PostsPage を表示するクラス Posts HTTPリクエストからJSONプレースホルダーに返されるもの：

import 'package:flutter/material.dart';
import 'http_service.dart';
import 'post_model.dart';

class PostsPage extends StatelessWidget {
  final HttpService httpService = HttpService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Posts"),
      ),
      body: FutureBuilder(
        future: httpService.getPosts(),
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          if (snapshot.hasData) {
            List<Post> posts = snapshot.data;
            return ListView(
              children: posts
                  .map(
                    (Post post) => ListTile(
                      title: Text(post.title),
                      subtitle: Text("${post.userId}"),
                    ),
                  )
                  .toList(),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

このコードは FutureBuilder と対話するウィジェット getPosts() 関数。 これにより、コードはいつ List<Post> 準備ができており、それに応じて行動します。

の場合 snapshot.hasData は false、 そうして CircularProgressIndicator 表示されています。 それ以外の場合は、 ListTile 投稿情報付きが表示されます。

これまでに持っているものを観察するには、次のコードを置き換える必要があります main.dart.

開ける lib/main.dart コードエディタで使用するように変更します PostsPage:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HTTP',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: PostsPage(),
    );
  }
}

コードをコンパイルして、エミュレーターで実行します。

JSONプレースホルダーによって返される投稿のタイトルとユーザーIDのリストを確認する必要があります。

次のステップは、ユーザーが投稿のタイトルをクリックしたときに、投稿に関する詳細情報を含む詳細ページを作成することです。

ステップ4—表示 PostDetail

ユーザーが投稿をタップした場合、アプリはユーザーを次の場所に移動する必要があります PostDetail ページ。

コードエディタを使用して、 post_detail.dart のファイル lib ディレクトリ。 ここでは、を作成します PostDetail 個人を表示するクラス Post:

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

class PostDetail extends StatelessWidget {
  final Post post;

  PostDetail({@required this.post});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(post.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            children: <Widget>[
              Card(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    ListTile(
                      title: Text("Title"),
                      subtitle: Text(post.title),
                    ),
                    ListTile(
                      title: Text("ID"),
                      subtitle: Text("${post.id}"),
                    ),
                    ListTile(
                      title: Text("Body"),
                      subtitle: Text(post.body),
                    ),
                    ListTile(
                      title: Text("User ID"),
                      subtitle: Text("${post.userId}"),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

このコードは、 title, id, body、 と userId.

これまでに持っているものを観察するには、変更する必要があります posts.dart サポートする post_detail.dart:

import 'package:flutter/material.dart';
import 'http_service.dart';
import 'post_detail.dart';
import 'post_model.dart';

class PostsPage extends StatelessWidget {
  final HttpService httpService = HttpService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Posts"),
      ),
      body: FutureBuilder(
        future: httpService.getPosts(),
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          if (snapshot.hasData) {
            List<Post> posts = snapshot.data;
            return ListView(
              children: posts
                  .map(
                    (Post post) => ListTile(
                      title: Text(post.title),
                      subtitle: Text("${post.userId}"),
                      onTap: () => Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => PostDetail(
                            post: post,
                          ),
                        ),
                      ),
                    ),
                  )
                  .toList(),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

コードをコンパイルして、エミュレーターで実行します。

次のステップは、投稿を削除して削除する機能を追加することです。

ステップ5—処理 DELETE リクエスト

HTTPリクエストの別の例は、 DELETE 方法。

再訪 http_service.dart コードエディタで、 deletePost(int id) 方法：

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

class HttpService {
  final String postsURL = "https://jsonplaceholder.typicode.com/posts";

  // ...

  Future<void> deletePost(int id) async {
    Response res = await delete("$postsURL/$id");

    if (res.statusCode == 200) {
      print("DELETED");
    } else {
      throw "Unable to delete post.";
    }
  }
}

再訪 post_detail.dart コードエディタで、 IconButton に actions 内の配列 AppBar. アイコンを押すと、関連する投稿が削除されます。

import 'package:flutter/material.dart';
import 'http_service.dart';
import 'post_model.dart';

class PostDetail extends StatelessWidget {
  final HttpService httpService = HttpService();
  final Post post;

  PostDetail({@required this.post});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(post.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () async {
              await httpService.deletePost(post.id);
              Navigator.of(context).pop();
            },
          )
        ],
      ),
      // ...
    );
  }
}

コードをコンパイルして、エミュレーターで実行します。

投稿の詳細ページにアクセスすると、AppBarに削除アイコンボタンが表示されます。 ボタンを押すと、コンソールにメッセージが出力されます。

Output
flutter: DELETED

これは削除リクエストを表します。 JSONプレースホルダーとこのサンプルアプリケーションの制限により、投稿は実際には削除されません。

結論

この記事では、Flutterを操作する方法を学びました http パッケージ。 これにより、 GET 投稿のリストと DELETE 個々の投稿。

などの同様の操作 post, put, patch、などもご利用いただけます。 詳細については、公式ドキュメントを参照してください。