[코독하구만 2] 1주차 - Flutter : Quiz App

오늘부터 Flutter를 공부하려고 한다.

원래는 Spring 공부를 하려고 했는데 이번에 지란지교소프트에서 인턴을 진행하는데

여기서 Flutter를 사용해서 앱을 개발하는 공부를 진행하고 있어서 Flutter를 따로 공부해야했다.

Flutter와 Spring을 동시에 공부하기엔 시간이 너무 부족해서 그냥 Flutter에 집중하려고 한다.

 

일단 강의는 Udemy 강의를 수강하고 있는데 영어 강의라 자막을 켜두고 하는데도 살짝 빡세다.

왜 한국 강의를 수강하지 않았냐고 물어본다면 국내 강의 중에 Flutter 강의가 괜찮은게 없다고 생각했기 때문이다.

또한 인프런에 몇 개 강의가 있는데 너무 비쌌다.

Udemy에선 고작 14000원... 강의 시간 역시 42시간으로 상당했고 커리큘럼 역시 마음에 들었다.

기본적인 Flutter 개념부터 앱개발을 통한 실습까지... 이번 여름방학을 알차게 보내고 싶다.

 

이번주는 가볍게 그냥 소스코드만 올리려고 한다.

사실 1주차 때 올렸어야 했는데 마지막 6주차에 올렸다... 그래서 좀 귀찮...

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

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState(); // _를 붙이면 private
  }
}

class _MyAppState extends State<MyApp> {
  var _questionIndex = 0;
  var _totalScore = 0;
  final _questions = const [
    {
      'questionText': 'Whats your favorite color?',
      'answers': [
        {'text': 'Black', 'score': 10},
        {'text': 'Red', 'score': 7},
        {'text': 'Green', 'score': 4},
        {'text': 'white', 'score': 1},
      ],
    },
    {
      'questionText': 'Whats your favorite animal?',
      'answers': [
        {'text': 'Dog', 'score': 10},
        {'text': 'Cat', 'score': 7},
        {'text': 'Lion', 'score': 4},
        {'text': 'Tiger', 'score': 1},
      ],
    },
  ];

  void _resetQuiz() {
    setState(() {
      _questionIndex = 0;
      _totalScore = 0;
    });
  }

  void _answerQuestion(int score) {
    _totalScore += score;

    setState(() {
      _questionIndex = _questionIndex + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('My first App'),
          ),
          body: _questionIndex < _questions.length
              ? Quiz(
                  answerQuestion: _answerQuestion,
                  questionIndex: _questionIndex,
                  questions: _questions)
              : Result(_totalScore, _resetQuiz)),
    );
  }
}

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String _questionText;

  Question(this._questionText);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin : EdgeInsets.all(30),
      child: Text(
        _questionText,
        style: TextStyle(fontSize: 28),
        textAlign: TextAlign.center,
      ),
    );
  }
}

import 'package:flutter/material.dart';
import './question.dart';
import './answer.dart';

class Quiz extends StatelessWidget {
  final List<Map<String, Object>> questions;
  final int questionIndex;
  final Function answerQuestion;

  Quiz(
      {required this.answerQuestion,
      required this.questions,
      required this.questionIndex}); // required는 무조건 인자 값이 있어야한다는 뜻

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Question(
          questions[questionIndex]["questionText"] as String,
        ),
        ...(questions[questionIndex]["answers"] as List<Map<String, Object>>).map((answer) {
          return Answer(() => answerQuestion(answer['score']), answer['text'] as String);
        }).toList()
      ],
    );
  }
}

import 'package:flutter/material.dart';

class Result extends StatelessWidget {
  final int resultScore;
  final VoidCallback resetHandler;

  Result(this.resultScore, this.resetHandler);

  String get resultPhrase {
    var resultText = 'You did it';
    if (resultScore <= 2) {
      resultText = "You are awesome and Innocent!";
    } else if (resultScore <= 8) {
      resultText = "just good!";
    } else if (resultScore <= 14) {
      resultText = "normal";
    } else {
      resultText = "oh my god!";
    }
    return resultText;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(children: <Widget>[
        Text(
          resultPhrase,
          style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
          textAlign: TextAlign.center,
        ),
        TextButton(
            child: Text('Restart Quiz!'),
            style : ButtonStyle(foregroundColor: MaterialStateProperty.all(Colors.blue)),
            onPressed: resetHandler),
      ]),
    );
  }
}