1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Flutter】小さいアプリの開発 ポケモン表示アプリ

Posted at

目的

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?