Indicator

로그인을 구현하다 문득 이런 생각이 들었다.

o0('지연이 1~2초 정도 발생하는 데.. 화면이 멈춘거라 생각하면 어쩌지?')

이럴 때를 대비하여 Indicator라는 것이 존재한다.
시스템이 중단되거나 사용자 입력을 기다리고 있지 않음을 확인하기 위해 작업이 진행 중임을 사용자에게 알리기 위한 인터페이스 요소이다.

CircularProgressIndicator

 Future<void> registerUser(...) {
    try {
      showDialog(
        context: context,
        builder: (context) {
          return Center(
            child: CircularProgressIndicator(),
          );
        },
      );

      await AuthRepository.to.registerWithMailAuth(email, password);
    } catch (e) {
      //print(e.toString());
    }
  }

CircularProgressIndicator는 flutter 에서 제공하는 기본 인디케이터 이다.
영상이나 Doc을 보고 있자면 이걸 어케 커스텀해서 사용할까.. 고민 뿐이었다.

Spinkit

spinkit 를 사용하면 이런 고민은 금방 해결된다. 물론 flutter가 버전을 자주 업그레이드하기 때문에 공식이 아닌 패키지는 부담이 되지만 개인적으로 하는 프로젝트에는 아주 적절하다고 할 수 있다.

설치

$ flutter pub add flutter_spinkit

그리고 아래의 위젯을 호출하여 사용할 수 있다. 어떤 위젯이 어떤 애니메이션을 가지고 있는지는 spinkit에 들어가 직접 확인해보자.

SpinKitRotatingCircle(color: Colors.white)
SpinKitRotatingPlain(color: Colors.white)
SpinKitChasingDots(color: Colors.white)
SpinKitPumpingHeart(color: Colors.white)
SpinKitPulse(color: Colors.white)
SpinKitDoubleBounce(color: Colors.white)
SpinKitWave(color: Colors.white, type: SpinKitWaveType.start)
SpinKitWave(color: Colors.white, type: SpinKitWaveType.center)
SpinKitWave(color: Colors.white, type: SpinKitWaveType.end)
SpinKitThreeBounce(color: Colors.white)
SpinKitWanderingCubes(color: Colors.white)
SpinKitWanderingCubes(color: Colors.white, shape: BoxShape.circle)
SpinKitCircle(color: Colors.white)
SpinKitFadingFour(color: Colors.white)
SpinKitFadingFour(color: Colors.white, shape: BoxShape.rectangle)
SpinKitFadingCube(color: Colors.white)
SpinKitCubeGrid(size: 51.0, color: Colors.white)
SpinKitFoldingCube(color: Colors.white)
SpinKitRing(color: Colors.white)
SpinKitDualRing(color: Colors.white)
SpinKitRipple(color: Colors.white)
SpinKitFadingGrid(color: Colors.white)
SpinKitFadingGrid(color: Colors.white, shape: BoxShape.rectangle)
SpinKitHourGlass(color: Colors.white)
SpinKitSpinningCircle(color: Colors.white)
SpinKitSpinningCircle(color: Colors.white, shape: BoxShape.rectangle)
SpinKitFadingCircle(color: Colors.white)
SpinKitPouringHourglass(color: Colors.white)

실패 예제 (230317)

Example 에 나온대로 했는데... 문제는 비동기 방식으로 받아 오고 나서도 overlay가 해제 되지 않는 다는 것이다.

Navicator.pop(); 으로 해결이 된다는데.. 무엇을 잘못했는지 Bottom Navi에 물려있는 GetView들이 해제 되는 것이 아닌가...(이럴수가)

RegisterController.dart
 Future<void> registerUser(...) {
    try {
      showDialog(
        context: context,
        builder: (context) {
          return SpinKitPumpingHeart(
            size: 50.0,
          );
        },
      )

      await AuthRepository.to.registerWithMailAuth(email, password);
    } catch (e) {
      //print(e.toString());
    }
  }

최종 예제

다행스럽게도 GetX Package에서 Get.showOverlay 를 지원한다. GetX 패키지를 사용하지 않는 경우도 있으니 비동기 호출 이후 overlay Loading Indicator가 종료되는 다른 방법을 고민 해보고 이곳에 추가하겠다.

onPressed: () {
	Get.showOverlay(
		asyncFunction: controller.login,
		loadingWidget: Container(
		color: Colors.black12,
		alignment: Alignment.center,
		child: SpinKitPumpingHeart(
			color: Colors.red[300],
			),
		),
	);
},