DartPadでAPIを呼んでレスポンスを表示してみた

DartPadがパッケージに対応したのでパッケージ「http」を利用してAPIを呼んでみました。
UIでAPIのリクエストパラメータを入力 → APIにリクエスト → UIに結果を表示
までやってみました。DartPadでここまで出来ると、Visual Studio Codeなどでアプリ開発をする前に結構活用できそうです!対応パッケージが増えるといいですね。

スポンサーリンク

DartPadで利用できるパッケージ

DartPadの画面右下にあるiアイコンをクリックすると利用できるパッケージが表示されます。

2021/12/12時点では「Directly importable packages」「Packages available transitively」の両方の合計で67種類に対応していました。

DartPadでパッケージ「http」を利用してAPIにリクエストする

Flutterで開発を計画しているアプリでAPIを呼びたいのでhttpパッケージについて学びたいと考えていました。ネットで情報を探していたところ、以下のサイトで紹介されているソースコードを活用させていただいて、DartPadでGoogle Book APIを呼んでみることにしました。

[Flutter]API経由でJSONを取得、パースする方法
https://zenn.dev/r0227n/articles/8ef8ad78265d6a


Google Book APIのデータを表示するDartPadはこちらになります!

「Run」をクリックするとFlutterのUIが表示されます。
テキストボックスに検索したいワードを入力して、ボタンをクリックするとGoogle Book APIのレスポンス結果の一部がテーブル形式で掲載されます。

ソースの解説(作成予定)

このソースは以下の4種類を実施しています。この記事への追記か、別記事を用意して解説していきますのでお待ちくださいmm

  • UIで検索ワードを入力してAPIのリクエストパラメータに設定
  • APIにリクエスト
  • APIのレスポンスを加工
  • UIを再描画
プロフィール
アラフィフでボルダリング、イラストなど挑戦中!
kakakuraをフォローする
アプリ開発
スポンサーリンク
       
kakakuraをフォローする
アラフィフガンバ
タイトルとURLをコピーしました