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

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ゲームの「動き」の部分、つまりブロックを作って動かしていくところを実装していきます。楽しみですね！

それでは！