Chapter 01

はじめに

JboyHashimoto
JboyHashimoto
2022.10.12に更新

FlutterでHTTP通信をやってみる

こんちには、皆さんZennの記事を書いているJboyです。
今日は、最近のWebの勉強のOUTPUTを兼ねてReactでやっていた自作したAPIからデータを取得するのをFlutterでやってみたいと思います。
Firebaseばかり使っていて、REST APIを使ったことなかったので、自作したAPIを表示できるのか自信がなかったものでやってみました!

といってもやることは単純で、自分のパソコンにモックサーバーを作って、そこからデータをインターネットに送信して、FlutterでHTTPリクエストを送ってデータを取得するだけです。
以前やってみたときは全然うまくいかなかった???

開発環境

  • MacOS Monterey
  • Flutter 3.3.1
  • Dart 2.18.0
  • flutter_riverpod: ^1.0.4
  • http: ^0.13.5
  • Node.js: v16.17.1

こちらが完成したプロジェクト

Flutterとmock-serverのサンプルコードを公開しております。
https://github.com/sakurakotubaki/FlutterMockerServer

今回は、HTTPのGETメソッドを使って、ローカル環境に構築したmock-serverからデータを習得するのですが、HTTPのGETがわからないという方はこちらを参考にしてください。
とてもわかりやすいです。
https://wa3.i-3-i.info/word1495.html

それでは、次のページから学習を進めていきましょう。