【Flutter】神経衰弱

概要

処理の流れ

レイアウトに関して

  • ポイントを表示する(何枚取れたかをカウント)
  • カード(ボタン)を設置する
  • カードの位置をシャッフルする
  • カードの番号を設定する

処理に関して

  1. タップしたらカードが保持している数字を表示する
  2. タップしたカードをタップできないようにする
  3. もう一つ他のカードをタップしたら、そのカードが保持している数字を表示する
  4. 同じ数字ならそのまま数字を表示したままにして、ポイントに1足す
  5. 違う数字ならタップした二つのボタンの数字を再度隠す

求められるもの

処理に関して

  • カードの表示(オブジェクトの生成
  • 文字列の表示(UIの表示
  • 乱数でカードの番号を決定する(乱数
  • タップ処理(タップアクションの設定
  • タップしたときに数字を表示する処理(画像の表示・非表示など
  • 1回目に選択したカードはタップできないようにする(タップ制限の設定
  • 2回目にカードをタップしたら正誤判定を行う(条件分岐
  • 数字が同じ場合はポイントを1足すメソッドを呼ぶ(メソッドの呼び出し・数字と画面の更新
  • 間違っている場合は選択したボタンを再度選択できるようにし、数字を隠す(繰り返し文による選択したカードの走査
  • 全ての数字がタップできなくなったら終了(条件分岐

該当のページ

ページ名求められるものの中で学べること
さまざまなボタンを生成UI表示
タップアクションの設定
メソッドの呼び出し
オブジェクトの生成オブジェクトの生成
UI表示
列挙体
繰り返し文
スクロールビュー
配列と繰り返し文を使ってUIを羅列するオブジェクト作成の補助項目
主に配列、繰り返し文の説明
カードをめくる動作(とりあえず実装する)条件分岐
画面の更新
カードをめくる動作(実践的な書き方をする)条件分岐
画面の更新
画像を使ったボタンを実装する画像のタップ処理
カードをめくった時の正誤判定とにかく、これで実装はできるよ

補助ページ

項目内容
UIを縦、もしくは横に並べるUI表示
左寄せや中央寄せをする(Alignment)UI表示
画像を表示する画面の表示
タップした時のエフェクトをつける画面の表示