クイズ:結果メッセージ
CoddyのFlutterジャーニー「プロジェクト」セクションの一部。レッスン 18/36。
「5問中5問正解」は、ただの一文で済ませるにはもったいない結果です。大きなアイコンと結果に合ったメッセージでクイズを締めくくりましょう。満点ならトロフィー、ほとんど正解なら親指を立てたアイコン、それ以外なら励ましのメッセージを表示します。
3つの結果を最良のものから順に確認するには、if / else if / elseを使います。順序が重要です。満点も半分より多く正解しているため、まず満点かどうかを確認します。
if (score == total) {
message = 'Perfect!';
icon = Icons.emoji_events;
} else if (score * 2 >= total) {
message = 'Well done!';
icon = Icons.thumb_up;
} else {
message = 'Keep practicing!';
icon = Icons.school;
}score * 2 >= totalは、丸め処理をせずに「少なくとも半分」を意味します。5問中3問なら条件を満たし、5問中2問では満たしません。
ifの前に、値を設定せずにmessage、icon、colorを宣言します。Dartでは、使う前にすべての分岐でそれぞれに値が設定されていることが確認されます。
これがクイズの最後のレッスンです。確認項目では、色、スコア、結果、「もう一度プレイ」を含む一連のラウンドを実行します。
チャレンジ
中級結果画面では、スコアの上に次の内容が表示されます。
- 満点の場合は、
Perfect!と琥珀色のIcons.emoji_events - 半分以上の場合は、
Well done!と緑色のIcons.thumb_up - それ未満の場合は、
Keep practicing!とテーマのプライマリカラーのIcons.school
アイコンは96ピクセルで、その後に16ピクセルの余白、headlineMediumで表示されるメッセージ、8ピクセルの余白、そして今回はtitleMediumで表示されるスコア行が続きます。
自分で試してみよう
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const QuizScreen(),
);
}
}
class Question {
const Question(this.text, this.answers, this.correct);
final String text;
final List<String> answers;
final int correct;
}
const List<Question> questions = [
Question('Which widget stacks its children from top to bottom?', ['Row', 'Column', 'Stack', 'Wrap'], 1),
Question('Which language do you write Flutter apps in?', ['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),
Question('What does setState do?', ['Rebuilds the widget', 'Saves the app', 'Closes the screen', 'Plays a sound'], 0),
Question('Which widget shows a list you can scroll?', ['Container', 'SizedBox', 'Padding', 'ListView'], 3),
Question('Which widget adds space around its child?', ['Padding', 'Center', 'Icon', 'Text'], 0),
];
class QuizScreen extends StatefulWidget {
const QuizScreen({super.key});
@override
State<QuizScreen> createState() => _QuizScreenState();
}
class _QuizScreenState extends State<QuizScreen> {
int _index = 0;
int? _picked;
int _score = 0;
Question get _question => questions[_index];
bool get _answered => _picked != null;
bool get _isLast => _index == questions.length - 1;
void _pick(int answer) {
if (_answered) return;
setState(() {
_picked = answer;
if (answer == _question.correct) {
_score++;
}
});
}
Future<void> _next() async {
if (!_isLast) {
setState(() {
_index++;
_picked = null;
});
return;
}
await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ResultsScreen(score: _score, total: questions.length),
),
);
setState(() {
_index = 0;
_picked = null;
_score = 0;
});
}
Color? _colorFor(int answer) {
if (!_answered) return null;
if (answer == _question.correct) return Colors.green;
if (answer == _picked) return Colors.red;
return null;
}
@override
Widget build(BuildContext context) {
final question = _question;
final textTheme = Theme.of(context).textTheme;
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Quiz'),
actions: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: Center(
child: Text('Score: $_score', style: textTheme.titleMedium),
),
),
],
),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Question ${_index + 1} of ${questions.length}',
style: textTheme.labelLarge,
),
const SizedBox(height: 8),
LinearProgressIndicator(
value: (_index + 1) / questions.length,
minHeight: 8,
borderRadius: BorderRadius.circular(4),
),
const SizedBox(height: 24),
Text(question.text, style: textTheme.headlineSmall),
const SizedBox(height: 24),
for (int i = 0; i < question.answers.length; i++)
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: FilledButton.tonal(
style: FilledButton.styleFrom(
backgroundColor: _colorFor(i),
foregroundColor: _colorFor(i) == null ? null : Colors.white,
padding: const EdgeInsets.all(16),
),
onPressed: () => _pick(i),
child: Text(question.answers[i]),
),
),
if (_answered) ...[
const SizedBox(height: 12),
Text(
_picked == question.correct
? 'Correct!'
: 'The answer is ${question.answers[question.correct]}',
textAlign: TextAlign.center,
style: textTheme.titleMedium,
),
const SizedBox(height: 16),
FilledButton(
onPressed: _next,
child: Text(_isLast ? 'See results' : 'Next'),
),
],
],
),
),
);
}
}
class ResultsScreen extends StatelessWidget {
const ResultsScreen({super.key, required this.score, required this.total});
final int score;
final int total;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Results')),
body: Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'You scored $score out of $total',
style: Theme.of(context).textTheme.headlineSmall,
),
const SizedBox(height: 32),
FilledButton.icon(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.replay),
label: const Text('Play again'),
),
],
),
),
),
);
}
}
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
プロジェクトのすべてのレッスン
自分で練習してみよう: Flutterオンラインコンパイラ