【アプリ開発日記】Wordleの回答をランダム化する【part7】

本記事はFlutterを使ったWordleクローンアプリ開発日記のpart7になります

以前の記事：

【アプリ開発日記】アプリを開発するにあたっての流れとコツ【part1】

【アプリ開発日記】Widgetを切り出して作成する【part2】

【アプリ開発日記】ブロックのWidgetを作成する【part3】

【アプリ開発日記】キーボードのイベントを通知する【part4】

【アプリ開発日記】Wordleの基本機能を実装する【part5】

【アプリ開発日記】Wordleの基本機能を実装する【part6】

ファイルを配置する

今回は、assetsに回答候補となる５文字の英単語一覧テキストファイルを配置し、アプリ起動時に読み込むようにしたいと思います。

まず、プロジェクト内にassetsフォルダを作成し、その中にwords.txtというファイルを配置します。

次に、pubspec.yamlに使用するファイルを定義します。

flutter:
  assets: 
    - assets/words.txt

ファイルを読み込む

以下の例に従い、ファイルを読み込みます。rootBundle.loadStringが非同期関数となっているため注意が必要です。ファイルを読み込んだ後、ランダムで回答を選択するようにしています。

Future<void> initAnswer() async {
  String data = await rootBundle.loadString('assets/words.txt');
  LineSplitter ls = const LineSplitter(); // 改行コードで分割し
  List<String> dic = ls.convert(data.toUpperCase()); // 大文字の変換忘れずに
  var random = math.Random();
  int num = random.nextInt(dic.length);
  _answer = dic[num]; // ランダムで回答を選択する
  _dictionary = dic;
  debugPrint('initAnswer done. answer: $_answer');
}

これをmain.dartから呼び出すことになりますが、回答一覧のファイルが大きくなった場合は読み込みにも時間がかかる可能性があるため、読み込み中はその旨を表示するように修正します。

これで読み込み中はユーザ操作を防いでゲームを進められないようになりました。今はサンプルのデータとして数単語しか登録していないため、目では見えませんが、数千単語をファイルへ入力すれば効果が得られるはずです。

class _MyHomePageState extends State<MyHomePage> {
  final controller = WordController();

  @override
  Widget build(BuildContext context) {
    debugPrint('build');
    // 初期化が完了しているかチェック
    if (!controller.isInitialized()) {
      controller.initAnswer().then((value) =>
      {
        // 初期化処理が完了したタイミングでsetStateを呼び出し再buildする
        setState(() {
          debugPrint('setState');
        })
      });
      // 
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [Text('初期化中')],
          ),
        ),
      );
    }
    // 初期化完了している場合は元のコードを呼び出す（省略）

part8へ続く