FlutterでHTTPリクエストを使用する方法
序章
アプリケーションは頻繁に実行する必要があります POST
と GET
およびその他のHTTPリクエスト。
Flutterは、HTTPリクエストの作成をサポートするhttpパッケージを提供します。
この記事では、を使用するFlutterアプリの例を作成します http
プレースホルダー情報を表示するためのHTTPリクエストを実行するパッケージ。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Flutterをダウンロードしてインストールします。
- Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
- コードエディタ用のプラグインをインストールすることをお勧めします。
このチュートリアルは、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
. それ以外の場合は、エラーメッセージがスローされます。
注: HTTPステータスコードは、リクエストが成功したか失敗したかを判断するために使用されます。 のステータスコード 200
成功したHTTPリクエストを表します。
次に、コードエディタを使用して 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({
this.userId,
this.id,
this.title,
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プレースホルダーに返されるもの:
import 'package:flutter/material.dart';
import 'http_service.dart';
import 'post_model.dart';
class PostsPage extends StatelessWidget {
final HttpService httpService = HttpService();
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 {
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
:
import 'package:flutter/material.dart';
import 'post_model.dart';
class PostDetail extends StatelessWidget {
final Post post;
PostDetail({ this.post});
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();
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({ this.post});
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
、などもご利用いただけます。 詳細については、公式ドキュメントを参照してください。