本日はクイズアプリ開発の終盤、リセット画面のデザインを作っていきます。
前回分はこちらです。
デザイン案として次のようなレイアウトを想定しています。
なお、AppBarの背景色は未着手です。
スポンサーリンク
ソースコード
本当は過程を解説するつもりだったのですが、
一気に実装してしまいました。
result_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_quiz_app/utils/hex_color.dart';
class ResultPage extends StatelessWidget {
/// タップ時の処理
final Function _tapResetButton;
/// 全問題数
final int questionCount;
/// 正答数
final int correctAnswerCount;
ResultPage(
this._tapResetButton,
this.questionCount,
this.correctAnswerCount
);
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.all(20),
child: Text('終了',
style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(20),
child: Text(
'正答数: 1 / 2',
style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
),
),
Padding(
padding: EdgeInsets.all(20),
child: Container(
height: 50,
width: MediaQuery.of(context).size.width - 100,
child: RaisedButton(
color: HexColor('#6DDE00'),
child: Text(
'リセットする',
style: TextStyle(color: Colors.white, fontSize: 17),
),
onPressed: _tapResetButton,
),
),
)
],
);
}
}次の記事が最後なのですが、正答数 1 / 2 を仮でベタ打ちしています。
次の記事でこのクイズの正解の判定を計算して正答数に数字を反映させる予定です。
こちらをビルドすると次のような画面が表示されます
解説
今回のソースコードで多分新しく使っているテクニックは
- 画面のサイズを取得するために
MediaQueryを利用している - TextとButtonなどのウィジェットの間に
Paddingを敷いてスペースを作成
この2点かと思います。
- 画面のサイズを取得するために
MediaQueryを利用している
Flutterでは次のようなコードで端末のサイズを取得することができました。
/// iOS でいうことの CGSizeクラス
final size = MediaQuery.of(context).size;
/// 端末の幅
final width = MediaQuery.of(context).size.width;
/// 端末の高さ
final height = MediaQuery.of(context).size.height;- TextとButtonなどのウィジェットの間に
Paddingを敷いてスペースを作成
widgetの周りに余白を入れたいときに使うウィジェットがPaddingウィジェットになります。
使い方は次のような感じです。
Padding(
padding: EdgeInsets.all(20),
child: widget,
)これで20px? 分の余白を入れることができました。
ちなみにAndroidでもそうだったと思いますが、ウィジェットの中に余白を入れたい場合はmarginを使うということを覚えます。
イメージ図。
なので、paddingを使ってウィジェット感のスペースを調整しました。
また、複数ウィジェットを縦に中央に並べるためにColumnウィジェットを使ってMainAxisAlignment.centerを設定しました。
これで真ん中の縦の中央寄せに表示できるようになりました。
ということで本日はリセット画面のデザインが出来上がりました。
