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

投稿日: 2022-04-20 2022-10-07
タグ: Flutter

序章

アプリケーションは頻繁に実行する必要があります 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 コードエディタで、次のプラグインを追加します。

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 関数：

lib / http_service.dart

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. それ以外の場合は、エラーメッセージがスローされます。

注： HTTPステータスコードは、リクエストが成功したか失敗したかを判断するために使用されます。のステータスコード 200 成功したHTTPリクエストを表します。

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

lib / post_model.dart

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.

注：本番アプリケーションでは、 json_serializable のようなパッケージを使用して、シリアル化を自動的に処理できます。

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

ステップ3—表示 `Posts`

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

lib / posts.dart

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:

lib / main.dart

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のリストを確認する必要があります。

注：タイトルは、プレースホルダーテキストとして頻繁に使用される LoremIpsumからの抜粋です。

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

ステップ4—表示 `PostDetail`

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

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

lib / post_detail.dart

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:

lib / posts.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) 方法：

lib / http_service.dart

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. アイコンを押すと、関連する投稿が削除されます。

lib / post_detail.dart

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に削除アイコンボタンが表示されます。ボタンを押すと、コンソールにメッセージが出力されます。

Outputflutter: DELETED

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

結論

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

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

getdocs

13036

序章

前提条件

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

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

ステップ3—表示 Posts

ステップ4—表示 PostDetail

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

結論

getdocs

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

ステップ3—表示 `Posts`

ステップ4—表示 `PostDetail`

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