へっぽこSEが◯時間でFlutter(iOS、android、web)で2Dゲームアプリを作ってみる(6)

どうも、すえきあおいです。

YouTubeのチュートリアル動画を使った2Dゲーム(テトリス)モバイルアプリ開発が順調に進んでいます。前回はゲームの枠、次のブロックを表示する枠を作るとこまでやりました。

フルのソースコードはこちらにあるので、面倒な人はダウンロードどうぞ。

 

今日は、スタートボタンを作っていきます。

スタートボタンまでできたら、一通り画面UIのレイアウト作り(枠を作っていく工程)は終わりです!

がんばるぞー!

 

チュートリアル動画はこちら

スタートボタンを作る

まずは、次のブロックを表示するNextBlock()を、Columnでラップします。

次に、NextBlock、SizedBox(余白)、RaiseButton(スタートボタン)を子Widgetとして排します。

lib/main.dart

                    Flexible(
                      flex: 1,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(5.0, 10.0, 10.0, 10.0),
                        child:Column(
                          children: [
                            NextBlock(), //次のブロックを表示する枠
                            SizedBox(height: 30,), //余白
                            RaisedButton( //スタートボタン
                              child: Text(
                                'Start',
                                style: TextStyle(
                                  fontSize: 18,
                                  color: Colors.grey[200],
                                ),
                              ),
                              color: Colors.indigo[700],
                              onPressed: () {},
                            )
                          ],
                        ),

                        ),
                      ),

ここまでで、いったん様子を見てみましょう。

はい、スタートボタンがNextブロックの下に余白をあけて配置されました。いい感じですね。あとはレイアウトを直していきましょう。

レイアウトを直す

スタートボタンを作ったことで、右のエリアが最大化してしまい、全体が上に移動してしまいました。

なので、また全体(Scoreより下のエリア)を縦方向にエリア全体を最小化します。

lib/main.dart

                    Flexible(
                      flex: 1,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(5.0, 10.0, 10.0, 10.0),
                        child:Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            NextBlock(), //次のブロックを表示する枠
                            SizedBox(height: 30,), //余白
                            RaisedButton( //スタートボタン
                              child: Text(
                                'Start',
                                style: TextStyle(
                                  fontSize: 18,
                                  color: Colors.grey[200],
                                ),
                              ),
                              color: Colors.indigo[700],
                              onPressed: () {},
                            )
                          ],
                        ),

                        ),
                      ),

これで実行すると、、、

はい、OKですね。簡単!

ここまででUIレイアウトは完了です。

キリがいいので今回はここまで。

 

次回はいよいよ2Dゲームの「動き」の部分、つまりブロックを作って動かしていくところを実装していきます。楽しみですね!

それでは!

末岐 碧衣
  • 末岐 碧衣
  • フリーランス のシステムエンジニア。独立後、一度も営業せずに月収 96 万円を達成。1986年大阪生まれ。早稲田大学理工学部卒。システムエンジニア歴 12年。
    2009年、ITコンサルティング企業に入社。3年目でコミュ障が爆発し人間関係が崩壊。うつにより休職するも、復帰後はコミュ障の自覚を持ち、「チームプレイ」を徹底的に避け、会社組織内においても「一人でできる仕事」に専念。社内外から評価を得た。
    無理に「チームプレイ」するよりも「一人でできる仕事」に専念した方が自分も周囲も幸せにできることを確信し、2015年フリーランスとして独立。