Bilgi Yarışması: Sonraki Soru

Coddy'nin Flutter Journey'sinin Projeler bölümünün bir parçası. Ders 12 / 36.

Tek soru bir bilgi yarışması değildir. Yanıt verdikten sonra bir Sonraki düğmesi seni bir sonraki soruya götürmeli ve üstteki bir satır nerede olduğunu söylemelidir.

Devam etmek, tek bir setState içinde yapılan iki değişikliktir: dizin artar ve yanıt unutulur; böylece yeni soru hiçbir renk olmadan başlar:

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

Düğme yalnızca yanıt verdiğinde anlamlıdır ve sonraki sorunun olmadığı son soruda gösterilmemelidir (sonuç ekranı daha sonra gelecek). Bir koleksiyon if ifadesi düğmeyi yalnızca bu durumda ekler: if (_answered && !_isLast) FilledButton(...).

İnsanlar 1'den, listeler 0'dan sayar. Etiket _index + 1 değerini gösterir: 'Question ${_index + 1} of ${questions.length}'. ${...} biçimi, bir dizgeye yalnızca bir ad değil, tam bir ifade koymanı sağlar.

Görev

Orta

Sorular arasında ilerle:

Son soruda true olan bir _isLast getter'ı ve teorideki _next metodunu ekle
sorunun üzerinde, temanın labelLarge stilinde Question 1 of 5 (gerçek sayılarla) metnini göster, ardından 24 piksel boşluk bırak
yanıtların altında, yanıt verdikten sonra ve soru son soru değilse, _next metodunu çağıran ve Next etiketli bir FilledButton göster

Kendin dene

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