Kuis: Pertanyaan Berikutnya

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

Satu pertanyaan bukanlah kuis. Setelah kamu menjawab, tombol Berikutnya akan membawamu ke pertanyaan berikutnya, dan baris di bagian atas akan menunjukkan posisimu.

Untuk melanjutkan, ada dua perubahan dalam satu setState: indeks bertambah, dan jawaban dihapus, sehingga pertanyaan baru dimulai tanpa warna:

void _next() {
  setState(() {
    _index++;
    _picked = null;
  });
}

Tombol ini hanya masuk akal setelah kamu menjawab, dan tidak muncul pada pertanyaan terakhir, karena tidak ada pertanyaan berikutnya (layar hasil akan dibuat nanti). Collection if hanya menambahkannya pada saat itu: if (_answered && !_isLast) FilledButton(...).

Orang menghitung mulai dari 1, sedangkan list menghitung mulai dari 0. Label menampilkan _index + 1: 'Question ${_index + 1} of ${questions.length}'. Bentuk ${...} memungkinkan kamu memasukkan seluruh ekspresi ke dalam string, bukan hanya nama.

Tantangan

Sedang

Berpindahlah dari satu pertanyaan ke pertanyaan berikutnya:

tambahkan getter _isLast yang bernilai true pada pertanyaan terakhir, serta method _next dari teori
di atas pertanyaan, tampilkan Question 1 of 5 (dengan angka yang sesuai) menggunakan gaya labelLarge dari theme, lalu beri jarak 24 piksel
di bawah jawaban, setelah kamu menjawab dan jika pertanyaan tersebut bukan pertanyaan terakhir, tampilkan FilledButton berlabel Next yang memanggil _next

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