[Flutter] FetchStatus에 따라 loading 화면 전환하기

프로젝트 참고 <코딩쉐프 - Flutter GetX 실전 앱 2: 도장깨기 level 2> :
https://www.youtube.com/watch?v=IGZ4J9xxLmU

전체 코드 깃헙 :
https://github.com/namYeJi9q/getx3

흐름은
1. services.dart 파일안에서 api를 불러 데이터 파싱 후
2. controller.dart에서 controller안에 fatchStatus 변수를 만들어
3. services에서 파싱한 데이터의 상태에 따라 fatchStatus.value의 값을 지정해 준다.

enum FetchStatus { loading, success, failure }

보통 이렇게 로딩, 성공, 실패로 상태를 나눈다.

4. 이제 이 컨트롤러를 page에서 Scaffold 안에 Switch를 사용해(혹은 삼항 연산자) 상태에 따라 지정한 화면이 나오도록 했다.

body: Container(
          child: Padding(
            padding: EdgeInsets.fromLTRB(0, 16, 0, 16),
            child: Obx(
              () {
                switch (controller.fetchStatus.value) {
                  case FetchStatus.loading: // 로딩 시
                    return Center(child: CircularProgressIndicator());
                  case FetchStatus.success: // 성공 시
                    return GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        mainAxisSpacing: 10,
                        crossAxisSpacing: 10,
                      ),
                      itemBuilder: (context, index) {
                        return ProductTile(controller.productList[index]);
                      },
                      itemCount: controller.productList.length,
                    );
                  case FetchStatus.failure: // 실패 시
                    return Center(child: Text('Failed to fetch data'));
                  default:  // 셋 중 아무것도 아닐 때
                    return SizedBox();  // 빈 화면
                }
              },
            ),
          ),
        )

이렇게 로딩뷰를 구현했다.
CircularProgressIndicator()를 이용해서 돌아가는 프로그래스를 그렸다.
하지만 앱은 스켈레톤이 더 잘어울려...!
https://pub.dev/packages/shimmer
요 shimmer 패키지를 사용하면 쉽게 구현 가능하니 다음엔 이걸 적용해보도록 하겠다.

---

그냥 소감 : 요즘 flutter를 공부 중인데 알듯 말듯 아직 감이 제대로 안 잡혔나 보다. 누가 그랬다. flutter는 widget 이 반이라고.
그런가…? 그런 거 같기도 하다. 덕분에 CSS보다 데이터, 모델, 컨트롤러를 더 이해하게 되는 거 같기도 하다. MVC 패턴이 이런 거구나.
다음 주까지 숙련도를 높여서 주말 이틀 동안 간단한 앱 구현 후 플레이스토어에 올려보고 싶다. 재밌다. 아직 좀 헤매지만 ㅎㅎ