Flutter 프로그래밍 미세먼지 날씨 앱 만들기 - 3 (Loading Animation)
안녕하세요 아라요 IT입니다. 데이터 처리량이 많거나 network 작업이 길어질 경우 화면이 멈추거나 데이터가 없는 화면을 그대로 노출하면 안됩니다. 반드시 사용자에게 데이터가 처리되고 있다는 것을 알려줄 필요가 있습니다. 로딩시간에 따른 앱만족도 조사에 따르면 로딩 대기 시간이 1.6초일때 70% 앱만족도가 유지되며, 2.7초가 넘어가면 50%이하로 크게 떨어지게 됩니다. 하지만 로딩 애니메이션이 구현된 화면을 노출할 경우 만족도가 크게 높아지는 알 수 있습니다. 또한 사용자 오동작 유발을 방지 할 수도 있기 때문에 결과적으로 앱 재사용률과 앱 만족도를 높이기 위한 필수사항이라고 할 수 있습니다. 그래서 오늘은 Loading Animation UI를 만들어 보는 시간을 가지겠습니다. 구현목표 현재위치을 처리하는 동안 loading animation LoadingAnimation.dart 3가지 Type으로 구현 enum LoadingType { CIRCLE , BAR, THREE_BALL } circle type과 bar type은 flutter에서 기본적을 지원하는 ProgressIndicator widget을 사용하면 간단히 구현 할 수있습니다. CircularProgressIndicator : 원형 진행 표시 LinearProgressIndicator : 선형 진행 표시 THREE_BALL : 구현대상 class LoadingAnimation StatefulWidet을 상속 받아 위젯내 상태관리를 할 수 있도록 정의 생성자 기본 변수인 type, size는 required로 정의 color변수는 class 생성시 정의되지 않으면 기본 Colors.white로 정의 class LoadingAnimation extends StatefulWidget ...