[flutter] if문 사용법, 퀴즈 결과 보여주기

0. 들어가기

-. if 문을 이용한 body 표현 예제

-. 퀴즈 예제에서 클릭한 답 저장 및 최종 점수 출력 예제

1. if 문 사용

-. body에선 삼항연산자를 이용해서 if문 사용이 가능하다.

-. 아래와 같이, 퀴즈 목록 (dndAlignment) 의 수를 초과하면 "quiz finished"가 출력되도록 앱을 수정했다.

          body: dndAlignment.length < questionIndex ? const Text("quiz finished") :
          Column( ... )

-. 결과 출력을 위한 Widget을 만들어서 넣자. 동일한 출력이 나온다.

main.dart

import './result.dart';
...

          body: dndAlignment.length < questionIndex
              ? Column(
            children: const [ Result()
            ],
          )
              : Column( ... )

----
result.dart

import 'package:flutter/material.dart';

class Result extends StatelessWidget {
  Result();

  @override
  Widget build(BuildContext context) {
    return const Text("quiz finished");
  }
}

 

 

2. 답변 목록 저장 및 출력

-. answer widget에 handler를 전달하여 각 답변의 번호를 저장하는 구문을 작성했다. 그리고 해당 답변 목록을 출력하는 예제를 적용해보자.

main.dart

import './result.dart';
...

  void quizHandler(String answerNum) {
    answerList.add(answerNum);
    setState(() {
      questionIndex += 1;
    });
  }
  ...
          body: dndAlignment.length < questionIndex
              ? Column(
            children: const [ Result(answerList)
            ],
          )
              : Column( ... )

----
result.dart

import 'package:flutter/material.dart';

class Result extends StatelessWidget {
  final List<String> answerList;

  Result(this.answerList);

  @override
  Widget build(BuildContext context) {
    return Text("quiz finished. your answer is: ${answerList.join(", ")}");
  }
}

3. 답변으로부터 성향 출력

-. D&D alignment 질문을 가져온 웹 페이지에서 성향분석 스크립트 역시 가져왔다. result.dart위젯에 process.dart (응답결과 계산스크립트) 를 연동해서 출력해봤다.

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

class Result extends StatelessWidget {
  final List<String> answerList;

  Result(this.answerList);

  @override
  Widget build(BuildContext context) {
    Map<String, Object> result = dndProcess(answerList) as Map<String, Object>;
    String userAnswer ="quiz finished. your answer is: ${answerList.join(", ")}";
    String result1 = "Your alignment is: ${result['type']}";
    String result2 = "detail: ${result['typeDetail']}";

    return Column(
      children: [
        Text(userAnswer),
        Text(result1),
        Text(result2),
      ],
    );
  }
}

-. 좀 난잡하지만 응답에 대한 출력이 이루어진다. 번거로우니 우선 질의응답은 세개만 작성함.