חידון: השאלה הבאה
חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 12 מתוך 36.
שאלה אחת אינה חידון. אחרי שתענה, כפתור „הבא” אמור להעביר אותך לשאלה הבאה, ושורה בראש המסך אמורה לציין היכן אתה נמצא.
המעבר לשאלה הבאה הוא שני שינויים בבת אחת בתוך setState: האינדקס גדל, והתשובה נשכחת, כך שהשאלה החדשה מתחילה בלי צבעים:
void _next() {
setState(() {
_index++;
_picked = null;
});
}הכפתור הגיוני רק אחרי שענית, ולא בשאלה האחרונה, שבה אין שאלה הבאה (מסך התוצאות יגיע בהמשך). if באוסף מוסיף אותו רק אז: if (_answered && !_isLast) FilledButton(...).
אנשים סופרים מ־1, רשימות סופרות מ־0. התווית מציגה את _index + 1: 'Question ${_index + 1} of ${questions.length}'. הצורה ${...} מאפשרת להכניס מחרוזת ביטוי שלם, ולא רק שם.
אתגר
בינוניהתקדם בין השאלות:
- הוסף getter בשם
_isLastשמחזירtrueבשאלה האחרונה, ואת המתודה_nextמהתיאוריה - הצג מעל השאלה את
Question 1 of 5(עם המספרים בפועל) בסגנוןlabelLargeשל ערכת העיצוב, ולאחר מכן רווח של 24 פיקסלים - מתחת לתשובות, לאחר שענית וכשהשאלה אינה האחרונה, הצג
FilledButtonעם הכיתובNextשקורא ל-_next
נסו בעצמכם
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;
void _pick(int answer) {
if (_answered) return;
setState(() {
_picked = answer;
});
}
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.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]),
),
),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פרויקטים
תרגלו בעצמכם: קומפיילר Flutter אונליין