Flutter chapter-04-04 OX퀴즈 showDialog 사용

OX 퀴즈가 완성되고 질문을 완료했을 때, showDialog창을 띄워주려고 한다.

- 다이얼로그를 작성하면서 문제가 발생하였다.

- 'No MaterialLocalization found' 에러 발생

문제의 원인 : showDialog 메서드에 전달하는 context가 아직 MaterialLocaliztions 위젯 트리에 위젯이 없고 암시적으로 추가만 했기 때문에 발생하는 문제였다. 해당 사항을 해결 하기 위해서

void main() {
  runApp(const MaterialApp(home: OxQuiz()));
}

문제 해결방법 : 메인을 실핼할때 MaterialApp을 작성한 다음 Home으로 OXQuiz를 주었다.

 

최종 소스코드

import 'package:flutter/material.dart';
import 'package:flutter_ox_quiz/quiz.dart';

void main() {
  runApp(const MaterialApp(home: OxQuiz()));
}

class OxQuiz extends StatefulWidget {
  const OxQuiz({Key? key}) : super(key: key);

  @override
  _OxQuizState createState() => _OxQuizState();
}

class _OxQuizState extends State<OxQuiz> {
  Quiz quiz = Quiz();
  List<Icon> answerIcon = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade900,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                  flex: 5,
                  child: Center(
                      child: Text(
                    quiz.getQuestion(),
                    style: const TextStyle(color: Colors.white),
                  ))),
              Expanded(
                  flex: 2,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                          child: TextButton(
                        onPressed: () {
                          setState(() {
                            quiz.checkQuestion(true);
                            quiz.nextQuestion();
                            if (quiz.checkLastQuiz()) {
                              alert(context);
                            }
                          });
                        },
                        child: Container(
                            color: Colors.green,
                            child: Center(
                                child: Icon(
                              Icons.check_circle_outline,
                              color: Colors.grey.shade900,
                            ))),
                      )),
                      const SizedBox(
                        width: 5,
                      ),
                      Expanded(
                          child: TextButton(
                        onPressed: () {
                          setState(() {
                            quiz.checkQuestion(false);
                            quiz.nextQuestion();
                            if (quiz.checkLastQuiz()) {
                              alert(context);
                            }
                          });
                        },
                        child: Container(
                            color: Colors.red,
                            child: Center(
                                child: Icon(
                              Icons.highlight_off,
                              color: Colors.grey.shade900,
                            ))),
                      )),
                    ],
                  )),
              const SizedBox(
                height: 5,
              ),
              Row(children: quiz.getIcons())
            ],
          ),
        ),
      ),
    );
  }

  // 다이얼로그
  Future<void> alert(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text("퀴즈가 끝났습니다."),
            actions: [
              TextButton(
                  onPressed: () {
                    Navigator.pop(context, false);
                    setState(() {
                      quiz.clear();
                    });
                  },
                  child: const Text('확인')),
            ],
          );
        }).then((result) {
      result = result;
    });
  }
}

 

추가적으로 퀴즈 로직을 보고 싶은 사람은 아래 깃허브 주소로 접근하면 된다.

https://github.com/qkrxodud/flutter_ox_quiz/tree/main/lib

GitHub - qkrxodud/flutter_ox_quiz: flutter_ox_quiz