Flutterでチケライヘルパーを作ってみた話 その3

要件定義

まずはどんなヘルパーが欲しいか？

各プレイヤーが獲得した路線と点数を管理したい。

今回は個人開発かつ小規模(予定)なのでガッツリした設計はしないで場当たり的に進める。
けど、ある程度ばらした方がやることが明確になるので、ざっくりと思いつく範囲で分解する。

graph LR A[各プレイヤーが獲得した路線と点数を管理したい] A-->B1[プレイヤー選択] B1-->C(ドロップダウン) C-->D([プレイヤーリスト]) A-->B2[路線選択] B2-->E(ドロップダウン) E-->F([路線リスト]) F-->G([駅*2]) A-->B3[点数獲得] B3-->H(獲得ボタン) H-->I[計算] I-->J1([プレイヤー:点数]) I-->J2([路線:点数])

さっそく実装

まずはドロップダウンから作ってみようかな

Flutter ドロップダウン

DropdownButtonってのやるらしいのでAPI仕様を検索しなおし api.flutter.dev

プレイヤーを選択する方について、5人固定でとりあえず実装してみる。

DropdownButton(
  value: 0, // 選択されているDropdownMenuItemのvalue
  items: List.generate(
  // List.generate:リストを生成してくれる。便利
    5, // 生成するリストの要素数。プレイヤーは最大5人なので5
    (index) => DropdownMenuItem( // 生成するリストの内容。特定の型(今回はDropdownMenuItem)を返す無名関数
    //ドロップダウンに表示する内容の定義
    value: index, //各要素を特定するためのユニークID的なもの
    child: Text(
      "プレイヤー${index + 1}"), // 表示される内容。${}で変数の内容を直接文字列に出来る便利
    ),
  ),
  onChanged: (_) {})

これだけで、こんな感じのドロップダウンリストが完成。

わぉ。思ってたより簡単に実装できた

ただ、これだとvalueが0固定なので何を選択しても表示されるのはvalue:0の要素(プレイヤー1)。
選択されたvalueはonChangedで通知されるので、そこで値を保持して選択した内容が反映されるようにする。

DropdownButton<int>(
  value: selVal, // 選択されているvalueを示す変数を指定
  items: List.generate(
    5,
    (index) => DropdownMenuItem(
    value: index, //各要素を特定するためのユニークID的なもの
    child: Text(
      "プレイヤー${index + 1}"), 
    ),
  ),
  onChanged: (val) {selVal = val!;})  //selValに選択されているvalueを保持。nullがあり得るのでvalに!をつける

変数を保持する必要出てきたからStatelessWidgeからStatefulWidgetへ変更
リファクターで一発変換してくれるのですごく便利。

一回わかっちゃえばこんなに簡単なのね。手を動かすって大切

つづく。。

編集後記

一通り書いてから、新出の構文についての概要説明も書こうと思ってたけど、その前に時間切れ。 次は先に進めるか、新出構文の概要説明のターンにするか明日考える。