Dependency
Flutter Pull To Refresh๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์๋ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ต๋๋ค. third-party ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด๋ ๋์ง๋ง, Flutter ์์ ๊ธฐ๋ณธ์ผ๋ก ์ ๊ณตํ๋ Widget์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ค๋ค๋ด
๋๋ค. indicator๋ฅผ ์ปค์คํ
ํ๊ฑฐ๋ ํน์ํ(?) ๋์์ ์ํ๋๊ฒ ์๋๋ผ๋ฉด ๊ธฐ๋ณธ Widget์ผ๋ก ์ถฉ๋ถํ ๊ฒ ๊ฐ์ต๋๋ค.
Example
AS-IS ๋ธ๋๋ ๋ชฉ๋ก ํ์ด์ง
Widget build(BuildContext context) {
_brandSubscriptionProviderProvider = Provider.of<BrandSubscriptionProvider>(context);
final isLoading = _brandSubscriptionProviderProvider.isLoading;
return Scaffold(
appBar: AppBar(
title: Text('๋ธ๋๋ ์๋ฆผ', style: TextStyle(fontWeight: FontWeight.bold),),
centerTitle: false,
backgroundColor: Colors.black87,
brightness: Brightness.dark,
),
body: Stack(
children: [
Center(
child: getTextWidgets(_brandAlarmSubscriptions),
),
Container(
child: isLoading ? Loader() : Container()
)
],
)
);
}
Dart
๋ณต์ฌ
TO-BE ๋ธ๋๋ ๋ชฉ๋ก ํ์ด์ง
Future<void> _onRefresh() { ๐๐๐๐๐๐
_brandSubscriptionProviderProvider.fetchBrandAlarmSubscriptions();
return Future<void>.value(); ๐๐๐
}
Widget build(BuildContext context) {
_brandSubscriptionProviderProvider = Provider.of<BrandSubscriptionProvider>(context);
final isLoading = _brandSubscriptionProviderProvider.isLoading;
return Scaffold(
appBar: AppBar(
title: Text('๋ธ๋๋ ์๋ฆผ', style: TextStyle(fontWeight: FontWeight.bold),),
centerTitle: false,
backgroundColor: Colors.black87,
brightness: Brightness.dark,
),
body: RefreshIndicator( ๐๐๐๐๐๐๐๐
onRefresh: _onRefresh, ๐๐๐๐๐
child: Stack( ๐๐๐๐
children: [
Center(
child: getTextWidgets(_brandAlarmSubscriptions),
),
Container(
child: isLoading ? Loader() : Container()
)
],
)
)
);
}
Dart
๋ณต์ฌ
RefreshIndicator๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๊ธฐ๋ณธ material ํจํค์ง์ ๋ค์ด์์ต๋๋ค.
onRefresh ํ๋์๋ Future ํจ์๋ฅผ ์
๋ ฅํฉ๋๋ค. onRefresh ํจ์์ ๋ด๋ถ์์ fetch๋ฅผ ์ํํ๋ฉฐ ๋ฐ๋์ Future๋ฅผ return ํด์ผํฉ๋๋ค. return ํ์ง ์์ ๊ฒฝ์ฐ loading indicator๊ฐ ์ฌ๋ผ์ง์ง ์์ต๋๋ค.
child ์๋ Widget์ ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ๋!
GIF
๋
์ฐธ ์ฝ์ฃ ?