퀴즈: 질문

Coddy Flutter 여정의 프로젝트 섹션에 포함된 레슨. 36개 중 10번째.

두 번째 앱은 Flutter 자체에 관한 퀴즈입니다. 질문 하나와 탭할 수 있는 답 네 개, 정답은 초록색으로 오답은 빨간색으로 표시하고, 점수와 결과 화면을 보여 줍니다.

질문은 이미 시작 프로젝트에 들어 있습니다. 각 질문은 질문 내용, 답 네 개, 정답의 위치가 포함된 Question입니다.

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

위치는 0부터 시작하므로 2는 'Dart'입니다. 상태에는 현재 질문을 나타내는 _index가 있으며, questions[_index]가 해당 질문입니다.

답은 Column 안에 있는 컬렉션 for로 표시합니다. 답마다 버튼 하나씩 표시됩니다. FilledButton.tonal은 테마 색상을 사용해 부드럽게 채워지는 버튼으로, 여러 선택지를 보여 주기에 적합합니다. crossAxisAlignment: CrossAxisAlignment.stretch를 지정하면 열의 각 자식이 열 너비만큼 넓어져 네 버튼이 가장자리까지 나란히 정렬됩니다.

챌린지

쉬움

첫 번째 질문을 표시합니다:

상태에 int _index = 0;을 추가합니다
Center를 자식 요소를 가로로 늘려 배치하는 24픽셀 패딩의 Column으로 바꿉니다
그 안에 질문 텍스트를 테마의 headlineSmall 스타일로 표시하고, 24픽셀 간격을 둔 다음, 각 답변마다 내부 패딩 16픽셀과 아래쪽 간격 12픽셀이 적용된 FilledButton.tonal을 표시합니다

직접 해보기

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