flutterアプリを作ってみたい4-1

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// (11)home内はRandomWordsStatesに任せることにしたので、そのように修正します。
    return new MaterialApp(
      title: '名前ジェネレーター',
      home: new RandomWords(),
    );
  }
}

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

class RandomWordsState extends State<RandomWords> {
  /// (1) ランダムで生成されたペア文字を保持しておくための配列を宣言
  /// MEMO 変数の先頭に"_"をつけると、Dartではprivateとなります。
  final _suggestions = <WordPair>[];
  /// (2) フォントサイズも大きくしたいので指定しておきます。
  final _biggerFont = const TextStyle(fontSize: 18.0);
  
  @override
  Widget build(BuildContext context) {
    /// (10) 直接ライブラリを呼ぶのではなく、_buildSuggestionsメソッドを使って更新するようにします。
    /// ついでにScaffoldクラスやAppBarクラスのインスタンス生成もここでやってしまいましょう。
    /// これにより、RandomWordsStateクラスによって管理されるようになり、ページ遷移を考えたときにtitleとかも変えやすくなります。
    // final wordPair = new WordPair.random();
    // return new Text(wordPair.asPascalCase);
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('名前ジェネレーター'),
      ),
      body: _buildSuggestions(),
    );
  }

  /// (3)ペア文字をListViewに表示するためのメソッド
  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0), //マージン設定
      /// (4)itemBuilderコールバックは生成されたペア文字ごとに1度呼ばれ、
      /// ListTile行にそれぞれのペア文字を配置します。
      /// 偶数行の場合、この関数はペア文字をListTileに追加します。
      /// 奇数行の場合、この関数は項目を区切るためにDividerウィジェットを追加します。
      /// その区切り線は小さなデバイスでは見にくいかもしれないので注意してください。
      itemBuilder: (context, i) {
        // (5)奇数行の場合、1ピクセル高の仕切り用のウィジェットをListViewの各行前に追加します。
        if (i.isOdd) return new Divider();

        /// (6)構文「i ~/ 2」は、iを2で割って、整数の結果を返します。
        /// 例： 1→0, 2→1, 3→1, 4→2, 5→2 (左が入力、右が出力)
        /// これはListView内のペア文字の実際の数を、仕切り用のウィジェットを引いて計算します。
        final index = i ~/ 2;
        /// (7)利用可能な文字ペアの最後まで数えたら...
        if (index >= _suggestions.length) {
          /// ...さらに10個の文字ペアを生成し、_suggestionsリストに追加します。
          _suggestions.addAll(generateWordPairs().take(10));
        }

        // (8)ここまでくると偶数行で追加できる状態なので、ペア文字をListTileに追加します。(メソッドは外に出します)
        return _buildRow(_suggestions[index]);
      }
    );
  }

  /// (9)ペア文字をListTileに追加して返すメソッドです。
  Widget _buildRow(WordPair pair){
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}