Kuis: Pertanyaan

Termasuk bagian Proyek dalam perjalanan Flutter di Coddy. Pelajaran 10 dari 36.

Aplikasi kedua adalah kuis tentang Flutter itu sendiri: sebuah pertanyaan, empat jawaban untuk diketuk, warna hijau untuk jawaban benar dan merah untuk jawaban salah, skor, serta layar hasil.

Pertanyaannya sudah ada di starter. Setiap pertanyaan adalah Question dengan teks, empat jawaban, dan posisi jawaban yang benar:

Question('Which language do you write Flutter apps in?',
    ['Kotlin', 'Swift', 'Dart', 'JavaScript'], 2),

Posisi dimulai dari 0, jadi 2 adalah 'Dart'. State menyimpan _index, yaitu pertanyaan yang sedang kamu buka, dan questions[_index] adalah pertanyaan itu.

Jawaban ditampilkan dalam sebuah koleksi for di dalam Column: satu tombol untuk setiap jawaban. FilledButton.tonal adalah tombol berisi dengan warna lembut sesuai tema, cocok untuk kumpulan pilihan. Dengan crossAxisAlignment: CrossAxisAlignment.stretch, column membuat setiap child selebar column, sehingga keempat tombol sejajar dari tepi ke tepi.

Tantangan

Mudah

Tampilkan pertanyaan pertama:

tambahkan int _index = 0; ke state
ganti Center dengan Column yang memiliki padding 24 piksel dan merentangkan child-nya selebar mungkin
di dalamnya: teks pertanyaan dengan gaya headlineSmall dari theme, ruang 24 piksel, lalu satu FilledButton.tonal untuk setiap jawaban, dengan padding 16 piksel di dalam dan jarak 12 piksel di bawah masing-masing tombol

Coba sendiri

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'),
      ),
    );
  }
}