Flutter_06. QuizApp03_ Passing Data

 

0. 금일 공부한 내용

   - List Elements and Mapping 

   - Alignment, Margin & Padding

   - Mutating values.

   - Managing th Questions as State.

   - More Button Style (Center and Custom Font)

   - Passing Data via Functions across Widget

 

 

1. Spread Operator

 

// Method 1 (Better).
...currentQuestion.answers.map((item) {
  return AnswerButton(item, () {});
  //  Iterable !== Widget => use Spread Operator
}),  

// Method 2
// AnswerButton(currentQuestion.answers[0], () {}),
// AnswerButton(currentQuestion.answers[1], () {}),
// AnswerButton(currentQuestion.answers[2], () {}),
// AnswerButton(currentQuestion.answers[3], () {}),

 

 

2. Spacing (Alignment, Margin & Padding) 및 Re-formate.

 

child: Column(
  mainAxisAlignment: MainAxisAlignment.center, //vertical
  crossAxisAlignment: CrossAxisAlignment.stretch, // horizontal
  children: [
    Text(
      currentQuestion.text,
      style: const TextStyle(color: Colors.white),
      textAlign: TextAlign.center,
    ),
    const SizedBox(
      height: 30,
    ),
    ...currentQuestion.answers.map((item) {
      return AnswerButton(item, () {});
      //  Iterable !== Widget => use Spread Operator
    }), // convert string to widget
    // AnswerButton(currentQuestion.answers[0], () {}),
    // AnswerButton(currentQuestion.answers[1], () {}),
    // AnswerButton(currentQuestion.answers[2], () {}),
    // AnswerButton(currentQuestion.answers[3], () {}),
  ],
),

 

3. Mutating Values using .shuffle in quiz_questions.dart

List<String> getShuffledAnswers() {
  final shuffledList = List.of(answers); // copy a list
  //.shuffle yield nothing.
  shuffledList.shuffle();
  return shuffledList;
}

 

4. Managing  Questions as State.

class _QuestionScreenState extends State<QuestionScreen> {
  var currentQuestionIndex = 0;

  void answerQuestion() {
    setState(() {
      currentQuestionIndex++;
    });
  }

...생략

 

 

...생략
       ...currentQuestion.getShuffledAnswers().map((item) {
              return AnswerButton(item, answerQuestion);
...생략

 

 

   - 버튼을 누를 경우, 아래와 같이 currentQuestionIndex++ 되도록 method를 생성하고, 사용될 state 를 setState에 저장.

 

5. More Button Style (Center and Custom Font).

 

   - 작업 terminal 에 flutter pub add google_fonts

Text(
  currentQuestion.text,
  // style: const TextStyle(color: Colors.white),
  style: GoogleFonts.lato(
    color: const Color.fromARGB(255, 237, 223, 252),
    fontSize: 24,
    fontWeight: FontWeight.bold
  ), // use google fonts
  textAlign: TextAlign.center,
),

   - 변경을 원하는  곳에 GoogleFonts.[font-family 이름 추가]

 

 

6.  Passing Data via Functions Across Widget

 

 

 

   - 순서

   - 1) answer_button 이 클릭시, QuestionsScreen > answerQuestion으로 값(answer)이 전달.

   - 2) 이전까지 point로 사용되던 answerQuestion을 함수로 감싸서, value가 전달되도록 바꿈

   - 3) function answerQuestion으로 값 (selectedAnswer) 전달. 

   - 4) widget instance를 사용해,  widget class 와 properties을 접근하여, widget class가 전달받은 onSelectAnswer 함수에                  selectedAnswer를 파싱한다.

    -5) 최상단인 quiz.dart에서는 answer_button에서 부터 넘겨전 온 selectedAnswer를 사용 

 

1) quiz.dart

...생략
final List<String> selectedAnswers = [];

void chooseAnswer(String answer) {
  selectedAnswers.add(answer);
}

@override
Widget build(BuildContext context) {
  Widget screenWidget = StartScreen(switchScreen);

  if (activeScreen == 'questions-screen') {
    screenWidget = QuestionScreen(chooseAnswer);
    // QuestionScreen에 chooseAnswer pointer 전달
  }
  
  
  ...생략

 

2. questions_screen.dart 에 생성자로 quiz.dart에서 받은 값들 넣기. 

const QuestionScreen(this.onSelectAnswer, {super.key});

final void Function(String answer) onSelectAnswer;

 

3. questions_screen.dart 에서, widget instance를 사용하여, answerQuestion가 실행될 때 (이때, selectedAnswer 받음), quiz.dart로 부터 전달받은 onSelectAnswer(chooseAnswer)에 전달받은 selectedAnswer 값을 보낸다. 

... 생략
class _QuestionScreenState extends State<QuestionScreen> {
  var currentQuestionIndex = 0;

  void answerQuestion(String selectedAnswer) {
    widget.onSelectAnswer(selectedAnswer);
    //widget instance allows Flutter to access to Widget Class and its properties
    setState(() {
      currentQuestionIndex++;
    });
  }
... 생략

 

4. 기존에 pointer 로서, AnswerButton에 전달되던 answerQuestion을 passed as a value 인 anonymous function으로 변경해value로 전달 (이때, anserQuestion은 value로 전달되어 Answer Button에서 이벤트가 주어질때 동작한다).

...currentQuestion.getShuffledAnswers().map((answer) {
  return AnswerButton(answer, (){
    // answerQuestion
    answerQuestion(answer);
    // NOTE::
    // This seems that we are executing function right away, but
    // this function is forwarded as a value to onTap.
    // this will not be executed when it is created, but only when this anonymous function is triggered from the button.
  });