リバース・エンジニアリング

Flultterとテックブログと時々iOS

34.【クイズアプリ開発】リセット画面のデザインを整える

本日はクイズアプリ開発の終盤、リセット画面のデザインを作っていきます。

前回分はこちらです。

blog.tamappe.com

デザイン案として次のようなレイアウトを想定しています。

f:id:qed805:20200318191944p:plain

なお、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 を仮でベタ打ちしています。 次の記事でこのクイズの正解の判定を計算して正答数に数字を反映させる予定です。

こちらをビルドすると次のような画面が表示されます

f:id:qed805:20200318192343p:plain

解説

今回のソースコードで多分新しく使っているテクニックは

  1. 画面のサイズを取得するためにMediaQueryを利用している
  2. TextとButtonなどのウィジェットの間にPaddingを敷いてスペースを作成

この2点かと思います。

  1. 画面のサイズを取得するためにMediaQueryを利用している

Flutterでは次のようなコードで端末のサイズを取得することができました。

/// iOS でいうことの CGSizeクラス
    final size = MediaQuery.of(context).size;
    /// 端末の幅
    final width = MediaQuery.of(context).size.width;
    /// 端末の高さ
    final height = MediaQuery.of(context).size.height;
  1. TextとButtonなどのウィジェットの間にPaddingを敷いてスペースを作成

widgetの周りに余白を入れたいときに使うウィジェットがPaddingウィジェットになります。 使い方は次のような感じです。

Padding(
          padding: EdgeInsets.all(20),
          child: widget,
        )

これで20px? 分の余白を入れることができました。 ちなみにAndroidでもそうだったと思いますが、ウィジェットの中に余白を入れたい場合はmarginを使うということを覚えます。

f:id:qed805:20200318193905p:plain

イメージ図。

なので、paddingを使ってウィジェット感のスペースを調整しました。

また、複数ウィジェットを縦に中央に並べるためにColumnウィジェットを使ってMainAxisAlignment.centerを設定しました。 これで真ん中の縦の中央寄せに表示できるようになりました。

ということで本日はリセット画面のデザインが出来上がりました。