Trắc nghiệm: Câu hỏi
Thuộc phần Dự án trong hành trình Flutter của Coddy. Bài học 10 trên 36.
Ứng dụng thứ hai là một bài trắc nghiệm về chính Flutter: một câu hỏi, bốn đáp án để nhấn, màu xanh lá cho đáp án đúng và màu đỏ cho đáp án sai, điểm số và màn hình kết quả.
Các câu hỏi đã có sẵn trong phần khởi đầu. Mỗi câu hỏi là một Question với nội dung, bốn đáp án và vị trí của đáp án đúng:
Question('Which language do you write Flutter apps in?',
['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),Vị trí bắt đầu từ 0, nên 2 là 'Dart'. Trạng thái lưu _index, câu hỏi bạn đang xem, và questions[_index] chính là câu hỏi đó.
Các đáp án là một tập hợp for bên trong Column: mỗi đáp án có một nút. FilledButton.tonal là nút có nền màu dịu theo màu của giao diện, phù hợp với một nhóm lựa chọn. Với crossAxisAlignment: CrossAxisAlignment.stretch, cột sẽ kéo rộng mỗi phần tử con hết cỡ, vì vậy cả bốn nút xếp thẳng hàng sát mép.
Thử thách
DễHiển thị câu hỏi đầu tiên:
- thêm
int _index = 0;vào trạng thái - thay
CenterbằngColumncó phần đệm 24 pixel và kéo giãn các phần tử con theo chiều ngang - bên trong đó: văn bản câu hỏi theo kiểu
headlineSmallcủa chủ đề, khoảng cách 24 pixel, sau đó là mộtFilledButton.tonalcho mỗi câu trả lời, có phần đệm bên trong 16 pixel và khoảng cách bên dưới mỗi nút là 12 pixel
Tự làm thử
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'),
),
);
}
}
Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Dự án
1Dự án: Danh sách việc cần làm
Danh sách việc cần làm: Danh sách công việcDanh sách việc cần làm: Thêm công việc4Dự án: Theo dõi thói quen
Theo dõi thói quen: Thói quen của bạnTheo dõi thói quen: TuầnTự luyện tập: Trình biên dịch Flutter online