Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

Flutterラボの

プレミアム会員になる

【Flutter】GETメソッドでAPIリクエストを行う

2020.10.03

Flutter初心者がアプリ開発学習で挫折しないために、基本的なWidgetやDartの文法についての記事を毎日更新しています。
Flutterのオンライン講座のリンクも載せていますので、ぜひそちらもご覧ください。

プログラミングで副業!アプリ開発学習 | ONthe UMEDA 企業のファン獲得から個人の生活品質向上まで、ますます需要の高まる"アプリ"の開発を、ご自身のペースで学べる教材・学習サポー onthe.osaka

本日は、GETメソッドでAPIリクエストについて紹介したいと思います。

まずは、Flutterプロジェクトからhttpアクセスを可能にするために、pubspec.yaml を編集して、『http』パッケージを取得します。

dependencies:
 flutter:
   sdk: flutter

 cupertino_icons: ^0.1.3
 http: 0.12.2 #この行を追加

編集したら、『Pub get』でパッケージを取得しましょう。

これで準備は完了です。
後は、GETメソッドを使って、APIリクエストを送るだけです。

今回使用するのは、郵便番号から住所を検索するAPIです。
大阪の梅田にあるハッチアウトスクールの所在地の郵便番号(530-0057)を試しに検索してみたいと思います。

var result = await get('https://zipcloud.ibsnet.co.jp/api/search?zipcode=5300057');
print(result.body);

printした情報を以下のようになります。

{
   "message": null,
   "results": [
       {
           "address1": "大阪府",
           "address2": "大阪市北区",
           "address3": "曽根崎",
           "kana1": "オオサカフ",
           "kana2": "オオサカシキタク",
           "kana3": "ソネザキ",
           "prefcode": "27",
           "zipcode": "5300057"
       }
   ],
   "status": 200
}

"address3"を print してみます。

print('${jsonDecode(result.body)['results'][0]['address3']}'); // 曽根崎

これで、APIリクエストして情報を取得するところまで完成です。

もし要望があれば、このAPIを使って住所入力を補完するコードも紹介したいと思います。

リンク

郵便番号検索API - zipcloud 日本郵便が公開している郵便番号データを検索する機能をRESTで提供しています。 zipcloud.ibsnet.co.jp
ハッチアウトスクール A new Flutter application.ハッチアウトスクールの公式サイトです hatchout.net