Flutter - Loading hud

Loading hud를 사용이유는 현재 작업이 진행되고 있는지

 

아니면 문제가 생겨서 멈췄는지를 유저에게 확인시켜주기 위해 있다고 생각합니다

 

그래서 오래걸리는 작업을 할 때 사용할 패키지를 찾기 위해

 

pub dev에서 여러 loading hud들을 검색하던 중

 

대부분의 hud가 bool값의 변경에 따라 보여주고 사라지게 해주고 있는데

 

굳이 rebuild를 통해 bool값을 notify해서 hud를 보여줘야될까 생각하게 되었습니다

(필자 생각 : 작업전 on 그리고 작업 후 off만 해주면 될텐데??)

 

근데 hud => head up display를 어떻게 구현해야되지 하고 생각해봤는데

 

우리가 자주쓰는 Alertdialog도 비슷하지 않은가 해서 한번 dialog로 구현을 해봤습니다

 

class LoadingHud {
  BuildContext context;

  LoadingHud(this.context);

  void showHud() {
    showDialog(
      barrierDismissible: false,
      barrierColor: Colors.transparent,
      context: context,
      builder: (context) => Dialog(
        backgroundColor: Colors.transparent,
        elevation: 0,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CircularProgressIndicator(
                strokeWidth: 6,
                backgroundColor: Colors.black26,
                valueColor: AlwaysStoppedAnimation(Colors.amber)),
            SizedBox(height: 10),
            Text('Loading', style: TextStyle(color: Colors.amber, fontSize: 16))
          ],
        )
      ),
    );
  }

  void hideHud() {
    Navigator.pop(context);
  }
}

 

먼저 showDialog에서 barrerDismissible : false 부분은 유저가

 

다른부분을 터치하면 dialog가 사라지기 때문에 이걸 방지하기 위해 사용했고

 

barrierColor와 dialog의 background를 투명으로 해서 Column안에 있는 위젯을 제외하고 안보이게 합니다

 

그리고 elevation에 0을 안주면 그림자 진듯한 잔상이 남아있어서 없애줬고

 

제가 필요한 CircularProgressIndicator와 Text만 사용했고

 

나머지는 AlertDialog사용하는것과 동일합니다

 

여기서 조금 더 커스터마이징 해서 로딩완료 실패 등도 만들 수 있을거 같습니다

 

네 정말 별거 없습니다.. 근데 제가 생각한대로 정확하게 동작해줬고

 

상황에 따라 커스터마이징도 정말 편하게 할 수 있을거 같더군요

 

물론 더 좋은방법이 있을거 같지만 저는 만족하면서 사용중입니다

 

< 필자의 심정 >