Bilgi Yarışması: Soru

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

İkinci uygulama, Flutter'ın kendisi hakkında bir bilgi yarışması: bir soru, dokunulacak dört yanıt, doğru yanıtlar için yeşil, yanlış yanıtlar için kırmızı, bir puan ve sonuç ekranı.

Sorular başlangıç projesinde zaten mevcut. Her biri metni, dört yanıtı ve doğru yanıtın konumunu içeren bir Question:

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

Konumlar 0'dan başlar, bu nedenle 2, 'Dart' yanıtıdır. Durum, bulunduğunuz soruyu belirten _index değerini tutar; questions[_index] ise o sorudur.

Yanıtlar, Column içinde bir for koleksiyonuyla oluşturulur: her yanıt için bir düğme. FilledButton.tonal, tema renginde yumuşak dolgulu bir düğmedir ve seçenekler grubu için uygundur. crossAxisAlignment: CrossAxisAlignment.stretch ile sütun, her alt öğeyi kendi genişliği kadar genişletir; böylece dört düğmenin hepsi kenar kenara hizalanır.

Görev

Kolay

İlk soruyu göster:

state'e int _index = 0; ekle
Center yerine, çocuklarını yatay olarak genişleten 24 piksellik dolgulu bir Column kullan
içine: temanın headlineSmall stilinde soru metnini, 24 piksellik boşluğu ve ardından her yanıt için içinde 16 piksellik dolgu ve altında 12 piksellik boşluk bulunan bir FilledButton.tonal ekle

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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Quiz')),
      body: const Center(
        child: Text('Your quiz goes here'),
      ),
    );
  }
}