Flutterのマテリアル構造とレイアウト ~Statefulウィジェット~

Statefulウィジェット

スクリプトが実行される流れ

1. RandomWords ウィジェットが作成されます
2. RandomWords の createState() メソッドが呼び出されます
3. createState() メソッド内で、new RandomWordsState() によって RandomWordsState のインスタンスが生成され、返されます
4. 生成された RandomWordsState オブジェクトが RandomWords ウィジェットに関連付けられます
5. RandomWordsState の build() メソッドが呼び出され、WordPair.random() でランダムな単語ペアが生成され、テキストウィジェットとして表示されます

より簡単に書いた流れ

RandomWords() を呼び出すと RandomWords ウィジェットが返され、そのウィジェットが内部で RandomWordsState を生成し、RandomWordsState の build メソッドが Text ウィジェットを返す。

class RandomWordsState extends State<RandomWords> { ... } は、確かにクラスの定義構文ですが、Flutterの文脈においては、単なるクラス定義以上の意味を持ちます。
<RandomWords> というジェネリクス型パラメータを使用することで、RandomWordsState クラスが RandomWords ウィジェットの状態を管理することを明示的に示しています。
(State<RandomWords> の <RandomWords> の部分は、特定のウィジェットに特化した状態管理クラスを作るための指示だと考えた)
つまり、RandomWordsStateクラスはRandomWordsウィジットの状態を管理するクラスということ

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) { 
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(appBar: AppBar(
        title: RandomWords(),
      ),
      body: Center(
        // RandomWordsクラス(Widget)を呼び出す
        child: RandomWords(),
      ),
      )
    );
  }
}

// StatefulWidgetを継承するRandomWordsクラス(Widget)を作成
class RandomWords extends StatefulWidget {
  @override
  // RandomWordsStateクラスのインスタンスを返す
  RandomWordsState createState() => RandomWordsState();
}

// createState()で返されるRandomWordsStateクラスを定義する
class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    // Textクラスのインスタンスを返す
    // 引数はランダムな英単語を生成するWordPairクラスのasPascalCaseプロパティ
    return Text(wordPair.asPascalCase);
  }
}