6. Flutter와 API 연동

개요 - wooogy-egg.tistory.com/4

개발 환경 세팅 - wooogy-egg.tistory.com/5?category=938272

Flutter 앱 화면 및 로직 구성 - wooogy-egg.tistory.com/6

Django 백엔드 구축 - wooogy-egg.tistory.com/7

Django 배포 with Heroku - wooogy-egg.tistory.com/8

 

본 글을 인프런 강의를 따라서 제작해본 경험을 남기고자 작성합니다.

플러터와 장고로 풀스택 퀴즈앱을 만드는 강의 https://www.inflearn.com/course/플러터-장고-퀴즈앱-서버-풀스택

플러터와 장고로 1시간만에 퀴즈 앱/서버 만들기 [무작정 풀스택] - 인프런

1) models_quiz.dart에서 Quiz.fromJson 생성

Quiz.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        candidates = json['body'].toString().split('/'),
        answer = json['answer'];

2) model 폴더 안에 api_adapter.dart 생성

import 'dart:convert';
import 'model_quiz.dart';

List<Quiz> parseQuizs(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
  return parsed.map<Quiz>((json) => Quiz.fromJson(json)).toList();
}
# parsed된 데이터를 퀴즈 모델로 변환하여 리스트로 만들면서 리턴함

3) screen_home.dart에서 더미 데이터 주석 처리

class _HomeScreenState extends State<HomeScreen> {
  // List<Quiz> quizs = [
  //   Quiz.fromMap({
  //     'title': 'test',
  //     'candidates': ['a', 'b', 'c', 'd'],
  //     'answer': 0
  //   }),
  //   Quiz.fromMap({
  //     'title': 'test',
  //     'candidates': ['a', 'b', 'c', 'd'],
  //     'answer': 0
  //   }),
  //   Quiz.fromMap({
  //     'title': 'test',
  //     'candidates': ['a', 'b', 'c', 'd'],
  //     'answer': 0
  //   }),
  // ];

4) http 패키지 설치: pubspec.yaml

# The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
  flutter_swiper:
  auto_size_text:
  http:

5) screen_home.dart에 패키지 import

import 'package:http/http.dart' as http;
import 'dart:convert';

6) 3에서 주석 처리한 부분 수정

List<Quiz> quizs = [];
  bool isLoading = false;

  _fetchQuizs() async {
    setState(() {
      isLoading = true;
    });
    final response = await http.get('https://drf-quiz-test-wook.herokuapp.com/quiz/3/')
    if(response.statusCode == 200){
      setState(() {
        quizs = parseQuizs(utf8.decode(response.bodyBytes));
        isLoading = false;
      });
    } else{
      throw Exception('failed to load data');
    }

7) 하단 부 onPressed 부분 수정

onPressed: () {
                          _fetchQuizs().whenComplete(() {
                            return Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => QuizScreen(
                                  quizs: quizs,
                                ),
                              ),
                            );
                          });
                        },

8) 실행하면 데이터가 잘 연동된 것 확인 가능

• 하지만 유저 입장에서 데이터가 언제 나올지 모르기 때문에 불편함

• 퀴즈 풀기 버튼을 누르고 데이터가 로드되는 동안 로딩 중 메세지를 띄움

• 제일 상단부 HomeScreenSate안에 SnackBar로 만들기

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

• 하단부 WillPopScope 부분 추가

child: Scaffold(
            key: _scaffoldKey,

• onPressed 부분 추가

onPressed: () {
                          _scaffoldKey.currentState.showSnackBar(SnackBar(
                              content: Row(
                            children: <Widget>[
                              CircularProgressIndicator(),
                              Padding(
                                padding: EdgeInsets.only(left: width * 0.036),
                              ),
                              Text('로딩 중...')
                            ],
                          )));

• 하지만 위와 같이 정답을 맞췄어도 최종 결과에서 0점이 나오는 현상이 발견되었다...... 이리저리 코드도 수정해보았지만 결과는 그대로였었는데 그때 아차... 혹시 인덱스가 0부터 시작해서 그런거 아닐까? 라고 생각이 들었다.

• 기존에는 해당 부분은 1부터 하였는데 정답인 '칠복이'는 0번인 것이었다.

• 최종 완성!!!!!!!!!!