Search
๐Ÿ‰

Flutter Pull To Refresh

์ƒ์„ฑ์ผ
2021/06/06 07:32
ํƒœ๊ทธ
Flutter
์†์„ฑ

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

๋

์ฐธ ์‰ฝ์ฃ ?