[flutter] 플러터(expandable)을 사용하는 실시간 퀴즈 및 테스트 앱 개발 방법

04 Dec 2023

flutter

이번 튜토리얼에서는 플러터를 사용하여 실시간 퀴즈 및 테스트 앱을 개발하는 방법에 대해 알아보겠습니다. 이 앱은 사용자에게 다양한 종류의 테스트를 제공하고, 실시간으로 결과를 표시하는 기능이 있습니다.

개발 환경 설정

먼저, 플러터 개발 환경을 설정해야합니다. 플러터의 개발에는 Android Studio나 Visual Studio Code와 같은 통합 개발 환경을 사용할 수 있습니다. 플러터 SDK를 설치하고 개발 환경을 설정하는 방법에 대해서는 플러터 공식 문서를 참조하시기 바랍니다.

프로젝트 생성

플러터 개발 환경이 설정되었다면, 새로운 프로젝트를 생성해야합니다. 터미널에서 flutter create quiz_app 명령어를 실행하여 새로운 플러터 프로젝트를 생성할 수 있습니다.

화면 디자인

앱의 화면을 디자인하기 위해 lib/main.dart 파일을 엽니다. 여기서는 퀴즈 리스트 화면을 만드는 예제를 보여드리겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quiz App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: QuizListPage(),
    );
  }
}

class QuizListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quiz List'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('Quiz 1'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => QuizPage()),
              );
            },
          ),
          ListTile(
            title: Text('Quiz 2'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => QuizPage()),
              );
            },
          ),
          ListTile(
            title: Text('Quiz 3'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => QuizPage()),
              );
            },
          ),
        ],
      ),
    );
  }
}

class QuizPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quiz'),
      ),
      body: Center(
        child: Text('This is Quiz Page'),
      ),
    );
  }
}

위의 코드를 실행하면 앱의 첫 번째 화면으로 “Quiz List”가 제목으로 있는 퀴즈 목록 화면이 표시됩니다. 각 퀴즈를 선택하면 “Quiz”라는 제목의 퀴즈 페이지로 이동합니다.

퀴즈 데이터 관리

다음으로는 퀴즈 데이터를 관리하는 방법을 알아보겠습니다. 퀴즈 데이터는 보통 JSON 형식으로 제공됩니다. 본 예제에서는 quiz_data.json 파일과 같은 형식으로 퀴즈 데이터를 관리합니다.

[
  {
    "question": "What is the capital of France?",
    "options": ["Paris", "London", "Berlin", "Rome"],
    "answer": "Paris"
  },
  {
    "question": "Who painted the Mona Lisa?",
    "options": ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"],
    "answer": "Leonardo da Vinci"
  },
  {
    "question": "What is the largest continent?",
    "options": ["Asia", "Africa", "North America", "Europe"],
    "answer": "Asia"
  }
]

위의 예시와 같이 퀴즈 데이터를 구성한 후, json 파일을 앱에 포함시켜 사용할 수 있습니다. JSON 데이터를 읽어서 화면에 표시하기 위해 flutter/services.dart 패키지를 사용할 수 있습니다.

퀴즈 기능 구현

마지막으로 퀴즈 기능을 구현해보겠습니다. 퀴즈 페이지에서 사용자가 퀴즈에 대한 질문과 선택지를 볼 수 있으며, 선택지를 선택한 후 정답을 확인합니다.

class QuizPage extends StatefulWidget {
  @override
  _QuizPageState createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  List<Map<String, dynamic>> quizzes = [];

  int currentQuestionIndex = 0;
  String selectedOption;
  bool showResult = false;

  @override
  void initState() {
    super.initState();
    loadQuizzes();
  }

  Future<void> loadQuizzes() async {
    String jsonString = await rootBundle.loadString('assets/quiz_data.json');
    List<dynamic> jsonList = jsonDecode(jsonString);
    quizzes = jsonList.cast<Map<String, dynamic>>();
    setState(() {});
  }

  void checkAnswer(String answer) {
    setState(() {
      selectedOption = answer;

      if (selectedOption == quizzes[currentQuestionIndex]['answer']) {
        // 정답 처리 로직 작성
      } else {
        // 오답 처리 로직 작성
      }

      showResult = true;
    });
  }

  void nextQuestion() {
    setState(() {
      currentQuestionIndex++;
      selectedOption = null;
      showResult = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (quizzes.isEmpty) {
      return Center(
        child: CircularProgressIndicator(),
      );
    }

    Map<String, dynamic> currentQuestion = quizzes[currentQuestionIndex];

    return Scaffold(
      appBar: AppBar(
        title: Text('Quiz'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              currentQuestion['question'],
              style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 16.0),
            Column(
              children: List.generate(
                currentQuestion['options'].length,
                (index) => ListTile(
                  title: Text(currentQuestion['options'][index]),
                  onTap: showResult ? null : () => checkAnswer(currentQuestion['options'][index]),
                  tileColor: showResult && currentQuestion['options'][index] == selectedOption
                      ? currentQuestion['options'][index] == currentQuestion['answer']
                          ? Colors.green
                          : Colors.red
                      : null,
                ),
              ),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: showResult ? nextQuestion : null,
              child: Text(showResult ? 'Next' : 'Check Answer'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 퀴즈 데이터를 불러오기 위해 loadQuizzes 메서드를 사용하며, checkAnswer 메서드는 사용자가 선택한 정답을 확인하는 로직을 구현합니다. nextQuestion 메서드는 다음 질문으로 이동하는 기능을 구현합니다.

결론

이제 플러터를 사용하여 실시간 퀴즈 및 테스트 앱을 개발하는 방법에 대해 알아보았습니다. 앱의 화면을 디자인하고, 퀴즈 데이터를 관리하고, 퀴즈 기능을 구현하는 방법을 배웠습니다. 위의 예시를 참고하여 원하는 형태의 퀴즈 앱을 개발해보세요.

플러터 공식 문서: https://flutter.dev/docs