Flutterのチュートリアルを学んでみた(5)

Flutterで無限スクロールを作ろう！ 📱

今日は何を作るの？ 🎯

SNSアプリのように、下にスクロールすると次々と新しい内容が表示される画面を作ります！
これを「無限スクロール」と呼びます。

引用:https://flutter.ctrnost.com/tutorial/tutorial06/

準備しよう！ 🚀

Step 1: 単語を保存する箱を作る 📦

まず、たくさんの単語を保存できる箱と、文字の大きさを決める設定を作ります：

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];              // 単語を保存する箱
  final _biggerFont = const TextStyle(fontSize: 18.0);  // 文字の大きさ設定
}

💡 豆知識: 変数名の前の_（アンダースコア）は「内緒の変数」という意味です。
この変数は、このクラスの中でだけ使える特別な変数になります！

Step 2: リストを作る魔法 ✨

次に、スクロールできるリストを作る魔法（メソッド）を作ります：

Widget _buildSuggestions() {
  return ListView.builder(
    padding: const EdgeInsets.all(16.0),
    itemBuilder: (context, i) {
      // リストの項目を作る魔法！
      if (i.isOdd) return Divider();    // 奇数番目には線を引く
      
      final index = i ~/ 2;   // 実際の単語の番号を計算
      
      // もし単語が足りなくなったら
      if (index >= _suggestions.length) {
        // 新しい単語を10個追加！
        _suggestions.addAll(generateWordPairs().take(10));
      }
      
      // 単語を表示用に整形
      return _buildRow(_suggestions[index]);
    }
  );
}

どうやって動いているの？ 🤔

想像してみてください：

1. スクロールするたびにitemBuilderが呼ばれます
2. 偶数番目（0, 2, 4...）には単語を表示
3. 奇数番目（1, 3, 5...）には線を引く
4. 単語が足りなくなったら、新しい単語を追加！

これは、まるで魔法の本のように、ページをめくるたびに新しい内容が現れるようなものです！

Step 3: 単語を見やすく表示する 👀

各単語をきれいに表示するための方法を作ります：

Widget _buildRow(WordPair pair) {
  return ListTile(
    title: Text(
      pair.asPascalCase,    // 単語をきれいな形式で表示
      style: _biggerFont,   // 大きな文字で表示
    ),
  );
}

Step 4: 画面全体を組み立てる 🏗

now、全体を組み立てましょう：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('面白い単語ジェネレーター'),  // 上のバーのタイトル
    ),
    body: _buildSuggestions(),  // リストを表示
  );
}

Step 5: メインの画面を設定 🎨

最後に、アプリのメイン画面を設定します：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '面白い単語ジェネレーター',
      home: RandomWords()
    );
  }
}

動かしてみよう！ 🎮

1. コードを保存する
2. ホットリロードが実行されるのを待つ
3. 画面を下にスクロール
4. どんどん新しい単語が表示されるよ！

やってみよう！ 🌟

1. 文字の大きさを変えてみる
2. 線の代わりに別の区切りを入れてみる
3. 表示する単語の数を変えてみる

困ったときは？ 🆘

• リストが表示されない
  → buildメソッドの中身を確認しよう
• スクロールできない
  → ListViewがちゃんと設定されているか確認しよう
• 新しい単語が追加されない
  → if文の条件を確認しよう

大切なポイント ⭐️

1. ListView.builderは必要なときだけ項目を作る賢い仕組み
2. スクロールに応じて自動的に新しい内容を表示
3. Dividerで見やすく区切りを入れる
4. privateな変数は_（アンダースコア）をつける

チャレンジしてみよう！ 🚀

1. 表示する単語の色をランダムに変える
2. 奇数番目と偶数番目で背景色を変える
3. タップしたらアラートを表示する

さぁ、あなただけの無限スクロールを作ってみましょう！ 💪