Bilgi Yarışması: Puanı Tut

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

Bir sınav, nasıl gittiğini görebildiğinde daha eğlencelidir. Durumda bir puan tut, her doğru yanıt için bir puan ekle ve bunu üst çubukta göster.

Saymak için en uygun yer, yanıtı kaydeden aynı setState içindeki _pick'tir. Verdiğin yanıtı, answer, doğru yanıtla karşılaştır:

setState(() {
  _picked = answer;
  if (answer == _question.correct) {
    _score++;
  }
});

_pick'in başındaki kontrol ikinci dokunuşu zaten engeller, bu nedenle her soru en fazla bir puan kazandırabilir.

Bir AppBar, sağ ucunda bir widget listesi olan actions: parametresini alır. Puanı buraya yerleştir; çubuğun yüksekliğinin ortasında durması için bir Center içine al ve sağına 16 piksel dolgu ekle.

Görev

Orta

Puanı tut:

duruma int _score = 0; ekle
yanıt doğru olduğunda _pick içinde puanı bir artır
üst çubuktaki actions bölümünde, temanın titleMedium stilinde, ortalanmış ve sağında 16 piksel dolgu olacak şekilde Score: 0 değerini (gerçek puanla) 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;
  bool get _isLast => _index == questions.length - 1;

  void _pick(int answer) {
    if (_answered) return;
    setState(() {
      _picked = answer;
    });
  }

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

  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 ${_index + 1} of ${questions.length}',
              style: textTheme.labelLarge,
            ),
            const SizedBox(height: 24),
            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]),
                ),
              ),
            if (_answered && !_isLast)
              FilledButton(
                onPressed: _next,
                child: const Text('Next'),
              ),
          ],
        ),
      ),
    );
  }
}