Flutter ) Flutter MVVM(http와 FutureBuilder사용)

 

안녕하세요 :) Zedd입니다.

오늘은..Flutter로 진짜 간단한 앱을 만들어보겠습니다.

예제 소스는 flutter-ko.dev/docs/cookbook/networking/fetch-data를 참고했습니다! 

완전히 똑같지는 않습니다! 

 

1. http 패키지 추가하기

https://pub.dev/packages/http#-installing-tab-

http | Dart Package

2. 모델을 만들어준다.

3. 응답 정보를 커스텀 Dart객체(Post)로 변환하기

4. PostViewModel 생성.

1 ) 위에서 만들어준 Post모델을 사용해야하므로 Post.dart를 import

2 ) fetchPost라는 메소드를 구현. 네트워크 요청이 비동기로 이루어지므로 async로 만들어준다.

View쪽에서 FutureBuilder를 사용할것이기 때문에 리턴타입을 Future<List<Post>>로 해준다.

응답이 이런식으로 배열이 오기 때문에, toList로 List를 만들어준다.

5. 응답을 List로 보여주기

ListContainer까지는 일반적인 코드이므로 설명 생략.

ListWidget안에 위에서 만든 viewModel 인스턴스를 만들어주고, FutureBuilder를 사용해주었다. 

FutureBuilder는 Flutter에서 기본적으로 제공되는 위젯으로, 비동기 데이터 처리를 쉽게 해주는 친구다.

return FutureBuilder<List<Post>>(
      future: this.viewModel.fetchPost(),
      builder: (context, snapshot) {..}

이런식으로 future와 builder 2가지 파라미터를 넣어줘야한다.

future에는 원하는 Future타입을 넣어준다. 나는

fetchPost자체가 Future타입이므로 그대로 넣어주었다.

 

builder에는 Future의 상태(로딩, 성공 or 에러)에 따라 Flutter에게 무엇을 렌더링 해야할지 알려주는 함수를 넣으면 된다.

 이런식으로 snapshot.hasData, snapshot.hasError 이런 간편한 프로퍼티가 있어서

엄청 직관적으로 코드를 짤 수 있는 것 같다.

 

# 성공

응답이 배열로 오기 때문에 ListView를 만들어주었다. 

snapshot의 data에 응답이 들어가있으므로, count에는 응답의 length를, builder에는 View를 그려주면 된다.

 

# 실패

hasError가 있으면 실패한것이기 때문에, error를 Text로 보여준다.

 

# 로딩

hasData, hasError상태가 둘다 아닐 때. 즉 로딩상태이다.

이때는 기본적으로 로딩 스피너를 보여주도록 했다.

이런식으로 된다! 

 

프로젝트는 github에있다.

github.com/Zedd0202/Flutter_MVVM

Zedd0202/Flutter_MVVM