36.クイズアプリ開発を復習するときの目次をまとめる

本日はFlutterで4択クイズっぽいアプリを作っていきます。特に体系的に学習するという意味ではないので企画倒れになるかもしれません。Flutterのスキルアップとしてはちょうどいい題材かなと思っています。アプリのデザイン構成これから何日間かにわたって開発するアプリのデザイン・レイアウトはこのようになります。アプリのデザイン(Sketch案)至ってシンプルですね。Sketchでサクッと作ってみました。英語の文法問題で、ある問題文に対して4つの選択肢が与えられ回答を選択すると言った流れになります。英語の問題自体はどっかから…

今回は前回作成したクイズアプリのレイアウトのリファクタリングを行います。前回はレイアウトの組立自体は完了しましたがwidgetのインデントが深くなりすぎていました。Flutter開発の肝はwidgetのインデントはなるべく深くならないようにすること、つまりwidgetの粒度をなるべく小さくしてメンテナンス性をあげることらしいです。そのため今回は画面の見え方は同じですが、裏側のロジックを分割してコードの見た目を綺麗にしていきたいと思います。widgetの分割方法について以前の記事にカスタムウィジェットクラスの作成方法について…

今回は選択肢のボタンのデザインを綺麗にしていきます。それとボタンをタップしたときの処理も書いていきます。想定しているデザインボタンの角丸実装まずはRaisedButtonに角丸を実装します。過去記事に角丸を実装する方法について書いていますので復習します。ClipRRectを使ってborderRadiusプロパティで角丸の度合いを調整します。ClipRRect( borderRadius: BorderRadius.circular(Constants().answerButtonHeight / 2), child: SizedBox( width: double.infinity, height: Constants().answerButtonHei…

前回のあらすじ 今回はFlutterで4択クイズが終わったあとのリセット画面を実装したいと思います。リセット画面Sketchでデザインしました。とりあえず、 正答数 リセットボタンの2つを目標にしようと思います。またリセットボタンを実装するためボタンの実装が必要になります。前回もボタンの実装をしたかもしれません。リセット画面の実装今回はwidgetパッケージにresult_page.dartファイルを追加しています。リセット画面用のウィジェットresult_page.dartimport 'package:flutter/material.dart';class ResultPage …

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

長かったクイズアプリの開発も本日でラストになります。前回分はこちらです。本日は問題の選択肢で正解を当てた時の処理を書いていきます。ラストにクイズアプリ開発で書いたクラスファイルのソースコードを載せようと思います。正解したときの処理まず、問題のデータの変数をおさらいします。main.dart/// 問題 var _questions = ;correctAnswerのキーがあり、そこに正解の選択肢をa,b,c,d で表現しています。今回、main.dartに新しく正答数の変数を宣言します。main.dart/// 正答数var _correctAnswerCount = 0;選択肢のボタンをタ…