플러터(Flutter) 앱 만들기 : 블로그 글 상세
이번에는 플러터와 JSONPlaceholder 중 블로그 포스트 상세 API를 이용해 한개 아이템을 HTTP 클라이언트로 요청하고 화면에 그리는 방법을 알아봅니다.
완성된 프로젝트는 Github에 있습니다.
총 4단계로 만듭니다.
프로젝트 만들기 및 기본 코드 정리
플러터 프로젝트는 VSCode의 Flutter: New Project를 이용해 만들었습니다.
처음 프로젝트를 만들면 나오는 샘플 앱인 카운터에는 불필요한 내용이 많습니다. MyApp 클래스의 home 속성을 PostDetailPage로 바꾸고, 필요없는 주석을 모두 제거합니다. Floating Action Button을 포함한 기본 코드 대부분을 삭제합니다. 이 커밋을 보시면 변경사항을 확인하실 수 있습니다.
http 외부 모듈 추가
이전에 다루었던 패키지 매니저 사용방법에는 외부 모듈을 사용하기 위한 안내가 있습니다. 나중에 확인해보세요. 여기서는 필요한 내용만 다룹니다.
pubspec.yaml 파일을 열어 dependencies의 flutter: 밑에 http 모듈을 추가합니다.
http: ^0.11.3+17http 모듈의 최신 버전은 0.12이나 flutter_test 에서 아직 0.12 버전의 http 모듈을 지원하지 않습니다. 여기서는 0.11 버전을 사용합니다. 이 커밋을 확인해보세요
http 모듈을 pubspec.yaml에 추가하면 VSCode는 자동으로 의존성을 설치합니다. 이제 main.dart 파일에 아래 코드를 추가하여 http 모듈을 사용할 수 있도록 합니다.
import 'package:http/http.dart' as http;이 커밋을 확인하세요.
Post 클래스와 fetchPost 서비스 추가
이제 사용할 Post 모델과 Post 모델을 외부 API에서 가져올 fetchPost 메소드를 만듭니다.
Post 모델을 만들기 위해 HTTP 응답을 확인합니다.
위 응답을 바탕으로 Post 클래스를 만듭니다.
Dart의 생성자를 확인해보세요. Post() 안에 클래스 멤버 변수를 지정하면 자동으로 초기화합니다. 그리고 factory 생성자를 이용해 JSON으로 객체를 초기화 할 수 있도록 factory Post.fromJson 메소드를 추가합니다. HTTP 요청 후 Post.fromJson 메소드를 이용해 생성자를 만듭니다.
이 커밋을 확인하세요.
JSON 직렬화 소개: https://flutter.io/json/
Future와 async, await 키워드는 비동기 프로그래밍을 위한 키워드입니다. JavaScript의 async, await와 사용법이 같습니다. Future<T>를 리턴 타입으로 설정하여 Future가 필요한 메소드 등에서 사용할 수 있습니다.
응답이 성공하면 json.decode로 응답의 body를 JSON으로 만들고 Post 클래스에서 만든 fromJson 메소드로 초기화합니다.
이 커밋을 확인하세요.
Future 의 자세한 소개 : https://www.dartlang.org/tutorials/language/futures
포스트내용 출력
이번 글에서는 화면에 출력하는 것이 목표이기 때문에 화려하게 꾸미지는 않습니다. 레이아웃 등 다른 글에서 다루겠습니다.
Scaffold 클래스의 body 속성 전체입니다. FutureBuilder를 이용해 Future를 실행하고, 응답 결과인 snapshot의 상태에 따라서 다른 화면을 표시합니다. 아직 Future가 종료되지 않았다면 CircularProgressIndicator를 출력합니다. snapshot을 사용하는 코드를 통해 비동기 응답을 처리하는 부분을 확인하시고, Column과 Column의 children 속성을 이용해 화면 레이아웃을 구성하고 있습니다. 변경사항은 이 커밋을 확인하세요.
Widget 기반으로 화면을 구성하는 것이 아직 어색할 수 있습니다. 물론 Dart의 경우 더 심할 것으로 생각됩니다. 다음에는 JSONPlaceholder의 posts API를 이용해 포스트 목록과 상세를 만들어보겠습니다.
전체 코드는 Github 저장소에 있습니다.
