目的
API接続
画像表示
想定
ランダム変数を取得
API+ランダム値でポケモンの画像を取得
更新ボタンで画像をランダム変更
ソースコード
利用したAPI
pokeAPI
https://pokeapi.co
詰まる
イメージの取得はいけたが、名前の取得(json経由)が出来ない
そういやpokeAPIって海外製だからポケモンの英語名しか取得できないんだったことに気づく
更新ボタンを追加して仮完成
名前出したかった…
更新ボタン
APIを使用しているので、画面の更新は再描画が必要
そのため更新ボタンは
onPressed: () {
setState(() {});
},
),
ではなく
onPressed: () {
setState(() {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (BuildContext context) => super.widget));
});
},
),
で画面自身を呼び出す必要がある。
これでもブラウザの更新ボタン押すより早いからキチンと機能実装することの大事さが分かる
反省点
APIの理解が浅かった
参考にしたサイトがProviderを使用しているため、データ伝達の方法の理解が浅かった。
その他感想
やっぱ最近のポケモンは解像度高いなーと思うなど
参考リンク
はじめに|ポケモンから学ぶFlutter
Flutter初回起動画面から簡単なAPIを叩くまで | ramble - ランブル -
Flutterで画面を再描画する方法 #Flutter - Qiita