[flutter] 플러터 프로바이더를 사용하여 퀴즈 앱 만들기

26 Dec 2023

flutter

플러터는 구글에서 제공하는 크로스 플랫폼 모바일 앱 개발 프레임워크로, 다양한 기기에서 일관된 성능을 제공합니다. 프로바이더는 플러터 앱의 상태 관리를 위한 강력한 도구로, 데이터를 효율적으로 관리하고 상태 변화를 알리는 데 사용됩니다. 이번 블로그에서는 플러터 프로바이더를 사용하여 간단한 퀴즈 앱을 만드는 방법을 알아보겠습니다.

목표

우리의 목표는 플러터 앱에서 다양한 카테고리의 퀴즈를 보여주고, 사용자가 정답을 선택하면 그에 따라 결과를 표시하는 것입니다. 이를 위해 플러터와 프로바이더를 사용하여 앱의 상태를 효과적으로 관리하고, 데이터를 전역으로 공유할 것입니다.

단계별 안내

1. 패키지 의존성 추가

우선 pubspec.yaml 파일에 다음과 같이 provider 패키지를 추가해줍니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

그리고 터미널에서 아래 명령어를 실행하여 패키지를 가져옵니다.

flutter pub get

2. 데이터 모델 생성

다음으로, 퀴즈 데이터 모델을 만들어 줍니다. 간단한 예시로, 퀴즈의 질문과 정답을 저장하는 Quiz 클래스를 생성합니다.

class Quiz {
  String question;
  String answer;

  Quiz({required this.question, required this.answer});
}

3. 프로바이더 설정

이제 provider 패키지를 사용하여 퀴즈 데이터를 전역으로 관리하기 위한 QuizProvider 클래스를 만들어봅시다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class QuizProvider with ChangeNotifier {
  List<Quiz> _quizzes = [
    Quiz(question: 'Capital of France?', answer: 'Paris'),
    Quiz(question: 'Largest planet in the solar system?', answer: 'Jupiter'),
    // Add more quiz questions
  ];

  List<Quiz> get quizzes => _quizzes;

  // Other methods for adding, removing, or updating quizzes

  // Method to check the answer
  bool checkAnswer(String userAnswer, String correctAnswer) {
    return userAnswer.toLowerCase() == correctAnswer.toLowerCase();
  }
}

4. UI 구성

이제 UI를 구성하여 퀴즈를 표시하고, 사용자가 정답을 선택할 수 있도록 만들어봅시다. 이 과정에서 provider 패키지를 사용하여 QuizProvider의 데이터에 접근하고, 상태 변화를 감지할 것입니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class QuizScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Quiz App'),
      ),
      body: Consumer<QuizProvider>(
        builder: (context, quizProvider, child) {
          return ListView.builder(
            itemCount: quizProvider.quizzes.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(quizProvider.quizzes[index].question),
                onTap: () {
                  // Logic to handle user selection of answer
                },
              );
            },
          );
        },
      ),
    );
  }
}

위 코드에서 Consumer 위젯은 QuizProvider를 구독하고, 해당 데이터가 변경될 때마다 UI를 업데이트합니다.

5. 결과 표시

마지막으로, 사용자가 정답을 선택했을 때 결과를 표시하는 기능을 구현해줍시다. QuizProvider의 checkAnswer 메서드를 사용하여 정답 여부를 확인하고, 그에 따라 다른 UI를 표시합니다.

// Inside the onTap method of ListTile in QuizScreen
onTap: () {
  bool isCorrect = quizProvider.checkAnswer(
    // Get user's answer
    userAnswer,
    // Get correct answer from quizProvider.quizzes[index].answer
    quizProvider.quizzes[index].answer,
  );
  // Use isCorrect to show appropriate UI for the result
},

결론

이제 단계별로 provider 패키지를 사용하여 간단한 퀴즈 앱을 만드는 방법을 알아보았습니다. provider를 활용하면 상태 관리와 전역 데이터 공유가 훨씬 효율적으로 이뤄집니다. 계속해서 이를 응용하여 다양한 기능을 추가하고, 좀 더 복잡한 앱을 개발해보세요.

더 많은 정보를 원하시거나 궁금한 점이 있으시다면 공식 플러터 및 프로바이더 문서를 참조해보세요.