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

Flutterの状態管理を学ぼう！StatefulWidgetの冒険 🎮

StatefulWidgetって何だろう？ 🤔

みなさん、ゲームで遊んだことありますよね？
ゲームには「スコア」や「ライフ」など、プレイ中に変わる値がありますよね。
Flutterでも同じように、アプリの中で変わる値を扱いたいことがあります。
そんなとき使うのが「StatefulWidget（ステートフルウィジェット）」です！

StatelessWidgetとの違い 📊

StatelessWidget（変わらない箱）

• 一度決めた値は変えられない
• 表示するだけの簡単な画面に使う
• 例：ただテキストを表示するだけの画面

StatefulWidget（変わる箱）

• 値を変更できる
• ユーザーの操作で変わる画面に使う
• 例：カウンターアプリ、ゲームの得点表示

魔法の箱を作ってみよう！ 🎁

Step 1: State（状態）クラスを作る 📝

まず、値を保存できる箱を作ります：

class RandomWordsState extends State<RandomWords> {
}

これは、「RandomWordsの状態を保存する箱」というような意味です。
まだ中身は空っぽですが、これから色々入れていきます！

Step 2: StatefulWidgetを作る 🏗

次に、その箱を使うためのウィジェットを作ります：

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => RandomWordsState();
}

これは「RandomWordsStateという箱を使うよ」と宣言しているようなものです。

Step 3: 画面の見た目を作る 🎨

状態を保存する箱に、画面の見た目を追加します：

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

これで、ランダムな英単語を表示する部分ができました！

Step 4: メインの画面で使う 🖼

最後に、作ったウィジェットをアプリで使えるようにします：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: RandomWords(),  // ここで使います！
        ),
      ),
    );
  }
}

どうして2つのクラスが必要なの？ 🤓

想像してみてください：

1. RandomWords（StatefulWidget）は「設計図」みたいなもの
2. RandomWordsStateは実際に値を保存する「箱」みたいなもの

両方あることで：

• 設計図（どんな機能が必要か）
• 実際の保存場所（値をどう保存するか）
  が分かれて、整理しやすくなります！

やってみよう！ 🌟

1. RandomWordsStateに新しい変数を追加してみよう

   final List<WordPair> words = [];  // 単語を保存するリスト
   

2. buildメソッドで使ってみよう

   words.add(WordPair.random());  // 新しい単語を追加
   

3. 保存した単語を表示してみよう

大切なポイント ⭐️

1. StatefulWidgetは値が変わる部分に使う
2. Stateクラスでその値を保存する
3. 2つのクラスが必要（設計図と保存箱）
4. buildメソッドで画面の見た目を作る

次は何ができる？ 🎯

• カウンターアプリを作る
• お気に入りリストを作る
• ゲームのスコアを表示する

StatefulWidgetを使えば、もっとインタラクティブな
アプリが作れるようになりますよ！

実験してみよう！ 🔬

1. 違う種類の値を保存してみる
2. ボタンを押したら値が変わるようにする
3. 保存した値を別の方法で表示してみる

さぁ、StatefulWidgetの世界で遊んでみましょう！
これであなたも状態管理の達人です！ 🎉