3주차 주간평가 - rlatkddbs99/Flutter GitHub Wiki

main.dart

import 'package:flutter/material.dart';
import 'package:quiz/QuizCard.dart';
import 'package:quiz/page/homePage.dart';

List<Map<String, dynamic>> quizs = [
  {
    "question": "의학적으로 얼굴과 머리를 구분하는 기준은 어디일까요?",
    "answer": 2,
    "options": ["코", "눈썹", "귀", "머리카락"]
  },
  {
    "question": "다음 중 바다가 아닌 곳은?",
    "answer": 3,
    "options": ["카리브해", "오호츠크해", "사해", "지중해"]
  },
  {
    "question": "심청이의 아버지 심봉사의 이름은?",
    "answer": 2,
    "options": ["심전도", "심학규", "심한길", "심은하"]
  },
  {
    "question": "심청전에서 심청이가 빠진 곳은 어디일까요?",
    "answer": 4,
    "options": ["정단수", "육각수", "해모수", "인당수"]
  },
  {
    "question": "택시 번호판의 바탕색은?",
    "answer": 3,
    "options": ["녹색", "흰색", "노란색", "파란색"]
  }
];
void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var pageController = PageController(viewportFraction: 0.8);
  List<Icon> result = [];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.pinkAccent, Colors.blue],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter)),
        child: Scaffold(
          backgroundColor: Colors.transparent, //투명색으로 위에 설정한 그라데이션 넣을 수 있도록
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            elevation: 0,
            centerTitle: true,
            title: Row(
              mainAxisSize: MainAxisSize.min,
              children: result,
            ),
            leading: IconButton(
                onPressed: () {
                  pageController.previousPage(
                      duration: Duration(milliseconds: 200),
                      curve: Curves.easeIn);
                },
                icon: Icon(Icons.navigate_before)),
            actions: [
              IconButton(
                  onPressed: () {
                    pageController.nextPage(
                        duration: Duration(milliseconds: 200),
                        curve: Curves.easeIn);
                  },
                  icon: Icon(Icons.navigate_next)),
            ],
          ),
          body: PageView.builder(
              controller: pageController,
              itemCount: quizs.length,
              itemBuilder: (context, index) => QuizCard(
                  quiz: quizs[index],
                  onCorrect: () {
                    result.add(Icon(Icons.circle_rounded));
                    pageController.nextPage(
                        duration: Duration(milliseconds: 300),
                        curve: Curves.easeIn);
                    setState(() {});
                  },
                  onIncorrect: () {
                    result.add(Icon(Icons.close));
                    pageController.nextPage(
                        duration: Duration(milliseconds: 300),
                        curve: Curves.easeIn);
                    setState(() {});
                  })),
          floatingActionButton: result.length == quizs.length
              ? FloatingActionButton(
                  onPressed: () {
                    result.clear();
                    setState(() {});
                    pageController.jumpToPage(0);
                  },
                  child: Icon(
                    Icons.refresh,
                    color: Colors.black,
                  ),
                  backgroundColor: Colors.white,
                )
              : null,
        ),
      ),
    );
  }
}

QuizCard.dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class QuizCard extends StatelessWidget {
  const QuizCard(
      {super.key,
      required this.quiz,
      required this.onCorrect,
      required this.onIncorrect});
  final Map<String, dynamic> quiz;
  final Function onCorrect;
  final Function onIncorrect;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 64),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(24)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            quiz["question"],
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
          ),
          SizedBox(
            height: 16,
          ),
          //Text(quizs[index]["answer"].toString())
          ListView.builder(
              shrinkWrap: true,
              itemCount: quiz["options"].length,
              itemBuilder: (context, index) => ElevatedButton(
                    onPressed: () {
                      if (quiz["answer"] == index + 1) {
                        onCorrect();
                      } else {
                        onIncorrect();
                      }
                    },
                    child: Text(quiz["options"][index]),
                  ))
        ],
      ),
    );
  }
}

⚠️ **GitHub.com Fallback** ⚠️