Loading Indicator를 사용해야 하는 이유
API를 사용하는 서비스는 느립니다.
특히,,,,, Firebase cloud functions는 속 터집니다. seoul region 에 firestore와 functions 을 두더라도 응답시간이 빨라야 500ms 느리면 1000ms 까지 나옵니다.
지연시간 동안 사용자는 길을 헤맵니다. 버튼을 연타하기도 하고, 다른 화면으로 이동하기도 하고.. 개발자가 예상하지 못한 일들이 벌어집니다. 이것을 막는 가장 좋은 방법은 사용자에게 현재 요청한 작업을 진행중이다. 기다려 달라. 라고 커뮤니케이션 하고, 추가적으로 작업중에는 사용자의 추가적인 액션을 막기도 합니다.
Loading Indicator 를 띄우는 방법
Loading indicator는 주로 화면 전체를 덮고, center 에 로티와 같은 애니메이션이 들어갑니다. 지금까지 공부했던 Widget은 가로, 세로 배치 위주였습니다. 이번에 우리가 하고 싶은 것은 기존 화면 전체를 덮을 수 있는 레이아웃이 필요합니다. 이때 Stack Widget을 사용합니다.
Loader.dart
loader wiget을 만듭니다. 아래 포스트를 참고합니다.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class Loader extends StatelessWidget {
Loader({Key key,
}) : super(key: key);
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
ModalBarrier(),
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SpinKitFadingCircle(
itemBuilder: (BuildContext context, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.black87,
),
);
},
)
],
)
),
],
);
}
}
Dart
복사
Loading Indicator의 경우 Flutter Spinkit을 활용했습니다.
Example
import 'package:chai_booster/Entity/brandAlarmSubscription.dart';
import 'package:chai_booster/Pages/Loader/Loader.dart';
import 'package:chai_booster/Providers/Subscription/BrandAlarmSubscription.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class BrandAlarmSettingPage extends StatefulWidget {
BrandAlarmSettingPage({
Key key, this.title
}) : super(key: key);
final String title;
_BrandAlarmSettingPageState createState() => _BrandAlarmSettingPageState();
}
class _BrandAlarmSettingPageState extends State<BrandAlarmSettingPage> {
BrandSubscriptionProvider _brandSubscriptionProviderProvider;
... 생략 ...
Widget build(BuildContext context) {
_brandSubscriptionProviderProvider = Provider.of<BrandSubscriptionProvider>(context);
final isLoading = _brandSubscriptionProviderProvider.isLoading;
return Scaffold(
appBar: AppBar(
title: Text('브랜드 알림'),
centerTitle: false,
),
body: Stack( 👈👈👈👈👈👈👈👈👈👈👈👈
children: [
Center(
child: getTextWidgets(_brandAlarmSubscriptions)
),
Container(
child: isLoading ? Loader() : Container() 👈👈👈👈👈👈👈👈👈👈👈
)
],
)
);
}
}
Dart
복사
Provider 의 isLoading 값에 따라서 Loader를 표시할 수 있도록 합니다.