Menu
CoddyTech

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.

challenge icon

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 Center bằng Column có 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 headlineSmall của chủ đề, khoảng cách 24 pixel, sau đó là một FilledButton.tonal cho 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'),
      ),
    );
  }
}
quiz iconTự kiểm tra

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

Tự luyện tập: Trình biên dịch Flutter online