Flutter에서 Retrofit으로 서버 연동하기2

지난 포스팅에서 RestClient.dart 파일을 생성하고 안에 코드까지 작성을 완료했다.

 

이제 다음으로 RestClient.g.dart 파일을 만들어 줄건데 이 파일은 자동으로 만들어지는 파일이다.

대부분 플러터는 안드로이드스튜디오나 인텔리제이 혹은 vscode를 쓰는 사람이 많을텐데 하단에 보면 터미널이 있을 것이다.

여기에  flutter pub run build_runner build 이런 명령어를 실행시켜준다. 그럼 자동으로 파일이 하나 생성되어 있을 것이다.

 

코드를 직접 짜보면서 경험한 바로

- request나 response가 제대로 작성이 안 되어 있을 경우

- flutter 환경변수 설정을 안 해뒀을 경우

 

이럴 때 실행이 안 됐었다. 만약 이런 경우라면 코드를 다시 확인해 보거나 flutter 환경변수를 설정하고 다시 실행해보면 된다.

 

이렇게 RestClient.g.dart 파일이 생성되었으면 이제 이 파일들은 더이상 건드리지 않아도 된다.

 

출력시키는 방법에 대해 간단히 알아보자.

 

먼저 서버에서 받아온 값들을 출력시키려면 필수적으로 FutureBuilder가 필요하다. 비동기 통신을 위해서이다.

FutureBuilder를 통해 서버에서 받아지는 시간에 구애받지 않고 앱 혹은 웹을 만들 수 있다.

 

각자 이미 있는 코드에 추가하면 된다. 아래의 코드는 이미 원래 있는 코드에 덧붙여서 진행한 것의 일부분이다.

필요한 부분만 찾아보면 된다.

import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:RestClient.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:intl/intl.dart';


class Page extends StatelessWidget {
  const Page({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    // 필수적으로 써야하는 코드로 동일하게 작성해도 무방하다.
    final dio = Dio();
    dio.options.headers["Content-Type"] = "application/json";
    final client = RestClient(dio);

    return AppScaffold(
        pageTitle: "practice",
        body: StatefulBuilder(
            builder: (BuildContext context, StateSetter setState) {
              return FutureBuilder(
              
                  // future에는 아까 만든 RestClient에 getListData 함수를 가져와 
                  // 그 안에 작성해둔 header, body 등에 들어갈 값을 차례대로 넣어준다.
                  future: client.getListData(user_id!, "Bearer "+token!, id),
                  // initialData는 말그대로 초기값으로 현재 이 경우에는 리스트라서 [] 형식으로 
                  // 했으나 String의 경우 ""이런 식으로 하면 된다.
                  initialData: [],
                  builder: (context, AsyncSnapshot snapshot)  {
                  
                    // response body가 받아와지는 동안 로딩화면이 띄워지도록 하는 코드
                    if (snapshot.connectionState == ConnectionState.waiting)
                      return Center(
                        child: CircularProgressIndicator(),
                      );

		    //snapshot.data를 출력하면 받아와지는 서버 값을 확인할 수 있다.
                    print(snapshot.data);


                    return SingleChildScrollView(
                        child : Container(
                              height: 700,
                              width: MediaQuery.of(context).size.width,
                              ...
                            )
                    );
                  });
            }));
  }
}

 

이런식으로 하면 출력이 잘 될 것이다.

 

이렇게하면 Retrofit 통신은 끝이다. 개인적인 생각으로는 테이블, 리스트 형태로 데이터를 받아와서 화면에 데이터테이블 형태로 출력해줘야할 때 쓰면 좋은 통신 방법이었다. 하지만 리스트가 아닌 형식일 경우에 쓰기엔 굳이 작성해야할 형식이 많아서 번거롭다는 생각이 들었다. 그래서 리스트 형태로 받아오지 않는 경우엔 http 통신방법을 주로 사용하였다.