Cuestionario: Mensaje de resultados
Parte de la sección Proyectos del Journey de Flutter de Coddy. Lección 18 de 36.
"Has obtenido 5 de 5" merece algo más que una línea sencilla. Termina el cuestionario con un icono grande y un mensaje que se ajuste al resultado: un trofeo para una ronda perfecta, un pulgar hacia arriba para la mayoría de respuestas correctas y unas palabras de ánimo en caso contrario.
Tres resultados, comprobados del mejor al peor, se expresan con un if / else if / else. El orden importa: una puntuación perfecta también significa más de la mitad de respuestas correctas, así que compruébala primero.
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 significa «al menos la mitad» sin redondear: 3 de 5 cuenta como aprobado, 2 de 5 no.
Declara message, icon y color antes del if, sin asignarles un valor. Dart comprueba que cada rama asigne un valor a cada uno antes de que los uses.
Esta es la última lección del cuestionario. Las comprobaciones abarcan rondas completas: colores, puntuación, resultados y volver a jugar.
Desafío
IntermedioEn la pantalla de resultados, encima de la puntuación:
- una puntuación perfecta muestra
Perfect!y unIcons.emoji_eventsde color ámbar - al menos la mitad muestra
Well done!y unIcons.thumb_upverde - cualquier puntuación inferior muestra
Keep practicing!yIcons.schoolen el color principal del tema
El icono mide 96 píxeles; después hay 16 píxeles de espacio, el mensaje en headlineMedium, 8 píxeles y la línea de puntuación, ahora en titleMedium.
Pruébalo tú mismo
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'),
),
],
),
),
),
);
}
}
Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Proyectos
1Proyecto: Lista de tareas
Lista de tareas: La lista de tareasLista de tareas: Añadir una tarea4Proyecto: Rastreador de hábitos
Rastreador de hábitos: Tus hábitosRastreador de hábitos: La semana2Proyecto: Cuestionario
Cuestionario: La preguntaCuestionario: Correcto o incorrectoPractica por tu cuenta: Compilador de Flutter online