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