חידון: השאלה
חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 10 מתוך 36.
האפליקציה השנייה היא חידון על Flutter עצמה: שאלה, ארבע תשובות שאפשר להקיש עליהן, ירוק לתשובה נכונה ואדום לתשובה שגויה, ניקוד ומסך תוצאות.
השאלות כבר נמצאות בקוד ההתחלתי. כל אחת מהן היא Question עם הטקסט שלה, ארבע התשובות שלה והמיקום של התשובה הנכונה:
Question('Which language do you write Flutter apps in?',
['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),המיקומים מתחילים ב־0, לכן 2 הוא 'Dart'. המצב שומר את _index, השאלה שמוצגת כרגע, ו־questions[_index] היא השאלה הזאת.
התשובות הן אוסף for בתוך Column: כפתור אחד לכל תשובה. FilledButton.tonal הוא כפתור מלא ורך בצבע של ערכת הנושא, שמתאים למבחר אפשרויות. עם crossAxisAlignment: CrossAxisAlignment.stretch העמודה מרחיבה כל ילד לרוחב שלה, כך שכל ארבעת הכפתורים מסתדרים זה לצד זה, מקצה לקצה.
אתגר
קלהצגת השאלה הראשונה:
- הוסיפו למצב
int _index = 0; - החליפו את
Centerב־Columnעם ריווח של 24 פיקסלים, שמותח את הילדים שלו לרוחב - בתוכו: טקסט השאלה בסגנון
headlineSmallשל ערכת הנושא, רווח של 24 פיקסלים, ואזFilledButton.tonalלכל תשובה, עם ריווח פנימי של 16 פיקסלים ו־12 פיקסלים מתחת לכל אחד מהם
נסו בעצמכם
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> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter Quiz')),
body: const Center(
child: Text('Your quiz goes here'),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פרויקטים
תרגלו בעצמכם: קומפיילר Flutter אונליין