חידון: שמירת הניקוד
חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 13 מתוך 36.
חידון מהנה יותר כשאפשר לראות מה מצבך. שמור על ניקוד במצב, הוסף נקודה על כל תשובה נכונה והצג אותו בסרגל העליון.
המקום הטוב ביותר לספור בו הוא _pick, בתוך אותו setState ששומר את התשובה. השווה בין התשובה שקיבלת, answer, לבין התשובה הנכונה:
setState(() {
_picked = answer;
if (answer == _question.correct) {
_score++;
}
});תנאי ההגנה בראש _pick כבר מונע לחיצה שנייה, כך שכל שאלה יכולה להוסיף לכל היותר נקודה אחת.
ל-AppBar יש actions:, רשימת רכיבים בקצה הימני שלו. הצב שם את הניקוד, בתוך Center כדי שיהיה באמצע גובה הסרגל, עם ריפוד של 16 פיקסלים מימין.
אתגר
בינונינהלו ניקוד:
- הוסיפו למצב
int _score = 0; - ב־
_pick, הוסיפו לו אחת כשהתשובה נכונה - הציגו
Score: 0(עם הניקוד בפועל) ב־actionsשל הסרגל העליון, בסגנוןtitleMediumשל ערכת הנושא, ממורכז, עם ריפוד של 16 פיקסלים מימין
נסו בעצמכם
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;
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;
});
}
void _next() {
setState(() {
_index++;
_picked = null;
});
}
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')),
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: 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 && !_isLast)
FilledButton(
onPressed: _next,
child: const Text('Next'),
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פרויקטים
תרגלו בעצמכם: קומפיילר Flutter אונליין