[Flutter] (Project) MapleApp: 9. Loading UI 제작

Dio를 활용하여 API통신을 진행할 때, 진행되고 있는지 또는 요청 처리 중인지 확인하기가 어려웠다. 그래서 앞으로 개발을 해나갈 때, API 통신과 관련한 작업을 진행하면서 유용하게 사용할 수 있는 Loading UI를 제작하려 한다.

🐇 Loading Animation Widget

※ reference : https://pub.dev/packages/loading_animation_widget

Package Loading UI Animation이 개발되어 있는 라이브러리를 찾았다. 다양한 모습의 Loading Spinner가 제작되어 있으니 공식문서에서 확인하고 사용하길 바란다.

 

🥕 Install

※ reference : https://pub.dev/packages/loading_animation_widget/install

flutter pub add loading_animation_widget
flutter pub get

 

🥕 Create

모든 Loading Animation API는 사용이 동일하고 간단합니다. LoadingAnimationWidget Class 내부의 각 애니메이션에는 Animation Object를 반환하는 정적 method가 있습니다. size/color가 required paramter로 존재하며, 일부 애니메이션은 두 가지 이상의 색상이 필요합니다.

 

🍒 Loading Animation with single color

Scaffold(
	body: Center(
		child: LoadingAnimationWidget.staggeredDotWave(
			color: Colors.white,
			size: 200,
		)
	)
)

LoadingAnimationWidget에 대한 예시는 다음 reference에서 찾아볼 수 있다. 원하는 Widget을 찾아 선택하길 바란다.

※ reference : https://pub.dev/packages/loading_animation_widget/example

 

여기서 Scaffold를 사용할 때, 개인 Theme color를 사용하고 있으면, background 속성 값에 따라 Scaffold의 배경이 변하므로, Scaffold에 backgroundColor 속성을 추가하거나 Theme를 관리해야 했다. 나는 후자를 선택했다.

 

🥕 Useage

보통 LoadingSpinner는 http 통신을 진행할 때 주로 쓰이게 된다. 화면을 표시하기 전, 데이터를 받아오는 시간 동안 사용자가 기다려야 하고 그 기다림의 정도를 LoadingSpinner를 활용하여 보여줄 수 있다.

 

Future Class를 반환 받을 때, 그 값은 AsyncValue이므로 AsyncValue의 상태에 따라 조건을 나누고 나머지 부분에 LoadingSpinner를 할당할 수 있다. 그 예시로는 다음과 같다.

body: switch (asyncResponse) {
  AsyncData(:final value) => newData(character: value),
  AsyncError(:final error) => newError(message: error),
  _ => LoadingSpinner(),
};

AsyncValue는 AsyncData/AsyncError로 나뉘고, 그 이외 상태 일 때 사용하면 된다. 그 이외 상태란, http 통신을 진행을 시작하기 전, AsyncNotifier의 state가 AsyncValue.loading()인 상태이고, 이를 ref.watch를 통해 바라보고 있으면 페이지가 build될 때 로딩스피너를 표출, 데이터가 전부 받아왔거나 에러가 생성된 경우 나머지 선언된 줄로 switch문이 실행되게 된다.

 

이를 활용하여 LoadingUI를 제작할 수 있고, LoadingUI가 진행되는 화면의 여러 구성 요소를 만들어갈 수 있지만, 화면과 사용자 경험을 해치지 않고 LoadingSpinner가 잘 보이는 설계를 진행하도록 만들었다.