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

前回分はこちらです。

Tamappe Life Log

33.【クイズアプリ開発】リセット画面で学ぶColumnのmainAxisAlignmentについて

https://tamappe.com/2020/03/19/2020-03-19-200000

1週間ぶりぐらいですが、クイズアプリのリセット画面でウィジェットの配置で苦戦しました。前回分の記事はこちらです。Columnウィジェットで並べていましたので、mainAxisAlignmentを使えば中央寄せにできるかなと思ったのですが一発で調整できませんでした。そこで今回はColumnのmainAxisAlignmentについて復習します。Columnウィジェット自体の使い方は下記の記事で解説しています。問題となっているコードについてです。result_page.dartColumn( mainAxisAlignment: , children: , )そもそも、MainAxisAli…

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

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

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

解説

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

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を使うということを覚えます。

イメージ図。

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

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

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

ABOUT ME

tamappe

都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。

BLOG：https://tamappe.com