小さいアプリの開発 ポケモン表示グリッドビュー

目的

画像表示
画像のグリッドビュー
「更に読み込む」ボタンによる段階的データ取得

実験したこと

AI駆動開発
実行したことが定義上の「AI駆動開発」だったのか多少疑問の余地

ソースコード

リポジトリ名が勘違いでリストビューってなってますがグリッドビューです

過程

参考サイト（【Flutter】Gridviewを使ってみる #Qiita - Qiita）
を見つつグリッドビュー表示に成功。

「更に読み込む」ボタンが欲しかったのでcursorくんに聞いてみる。

「更に読み込む」ボタン（いわゆる「Load More」ボタン）を実装するには、

現在表示しているポケモン数を状態として管理し、ボタンが押されたときにその数を増やすのが一般的です。

### 実装手順

1. 表示するポケモン数を状態として管理する変数を用意

2. GridViewのitemCountにその変数を使う

3. 「更に読み込む」ボタンを画面下部などに配置し、押されたら数を増やしてsetStateする

---

class _MyHomePageState extends State<MyHomePage> {
  int _displayCount = 10; // 最初に表示する数

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          Expanded(
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: _displayCount,
              itemBuilder: (context, index) {
                return Image.network(
                  "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${index + 1}.png",
                  height: 50,
                  width: 50,
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                _displayCount += 10; // 10匹ずつ追加
              });
            },
            child: const Text('更に読み込む'),
          ),
        ],
      ),
    );
  }
}

あっ意外と簡単に実装できるんだな…ありがとうcursorくん…
（コードがいけてねえのは私のせいです）

反省点

小さいアプリをサクッと作ることを目的にしているのでAPI直書きなのですが、流石にソレは宜しくなかろうと感じ始めてきています。
頑張ってpokeAPIの仕様読解してMVCモデルにリファクタしてみるか…

参考サイト

• 【Flutter】Gridviewを使ってみる #Qiita - Qiita
  pokeAPI関係はまずここを頼る…↓
• Step3: メイン画面とサブ画面を移動しよう｜ポケモンから学ぶFlutter