準備
FlutterでHttp通信を実現するための一番簡単な方法は、ライブラリを使用することです。
今回は、以下のライブラリを使用します。
このライブラリを使用して作成したアプリを公開する際は、
ライセンスをよく読んでから使用してください。
ライブラリのインストール
インストールは簡単で、Flutterプロジェクトを開いているAndroidStudioのターミナルで
以下のコマンドを実行するだけです。
flutter pub add http実行が出来たら、「pubspec.yaml」に「http」が追加されます。
Http通信の実装
準備は完了したので、さっそく実装していきます。
まずは、main.dartをきれいにしてボタンだけ追加しておきます。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ElevatedButton(
child: const Text('HTTP START'),
onPressed: () {
// ここでhttp通信をする
}
),
),
);
}
}GET送信
まずはGET送信からです。
onPressedプロパティの中に処理を書くと長くなってしまう場合があるので、
関数を作って、その関数をonPressedプロパティの中で呼び出すようにします。
（関数名のセンスが無くてすみません。。）
Future<void> getTest() async {
// Uriの設定(第1引数はサーバー、第2引数はエンドポイント)
Uri uri = Uri.http('localhost:3000', '/');
// レスポンスを受けとる
var response = await http.get(uri);
// レスポンスの処理(必要に応じてエラーハンドリングも)
print(response.body);
}POST送信
次は一番使用頻度の高いPOST送信のサンプルコードです。
Future<void> postTest() async {
// Uriの設定(第1引数はサーバー、第2引数はエンドポイント)
Uri uri = Uri.http('localhost:3000', '/postTest');
// 送信するリクエスト情報
Map<String, String> sendData = {
'name': '工場長',
'age': '28',
};
// レスポンスの受け取り（bodyにリクエスト情報を格納する）
var response = await http.post(uri, body: sendData);
// レスポンスの処理
print(response.body);
}headerの追加
次は、headerの設定方法です。
認証情報などをヘッダーに格納したい場合は、以下のように設定することができます。
Future<void> postTestWithHeader() async {
// Uriの設定(第1引数はサーバー、第2引数はエンドポイント)
Uri uri = Uri.http('localhost:3000', '/postTest');
// 送信するリクエスト情報
Map<String, String> data = {
'name': '工場長',
'age': '28',
};
// json形式に変換する
var jsonData = json.encode(data);
// ヘッダー情報
Map<String, String> headers = {
'Authorization': '資格情報', // token等をヘッダーに格納したい場合は設定可能
'Content-Type': 'application/json', // 送信するデータの形式に応じて適切なContent-Typeを設定
};
// レスポンスの受け取り（bodyにリクエスト情報を格納する）
var response = await http.post(uri, headers: headers, body: jsonData);
// レスポンスの処理
print(response.body);
}最後に
ここまで読んでいただきありがとうございます。
Httpは、Flutterに限らずどこでも使用できるので覚えていて損はありません。
ただ、用語がたくさんあるので、すべてを把握するのは難しいと思います。
徐々に覚えていくと良いと思います。
コメント