使用 App 瀏覽資訊，很常會遇到可以往下捲的畫面，此時若一直往下拉到頂，上頭通常會出現重整動畫，經過一小段時間，畫面就會更新。😀
在 Flutter 中有已被定義好的 Widget，我們能夠輕易實現此友善的體驗，看起來效果挺棒的。
簡單介紹：
A widget that supports the Material “swipe to refresh" idiom.
When the child’s Scrollable descendant overscrolls, an animated circular progress indicator is faded into view. When the scroll ends, if the indicator has been dragged far enough for it to become completely opaque, the onRefresh callback is called. The callback is expected to update the scrollable’s contents and then complete the Future it returns. The refresh indicator disappears after the callback’s Future has completed.
直接來看如何使用，除了下拉會出現外，右下按鈕點擊後也會出現喔～然後延遲三秒後會消失。
import 'package:flutter/material.dart';
class TradeContract extends StatefulWidget {
const TradeContract({super.key});
@override
State<StatefulWidget> createState() {
return _TradeContract();
}
}
class _TradeContract extends State<TradeContract> {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: RefreshIndicatorExample(),
);
}
}
class RefreshIndicatorExample extends StatefulWidget {
const RefreshIndicatorExample({super.key});
@override
State<RefreshIndicatorExample> createState() =>
_RefreshIndicatorExampleState();
}
class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
GlobalKey<RefreshIndicatorState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Happy RefreshIndicator Sample'),
),
body: RefreshIndicator(
key: _refreshIndicatorKey,
color: Colors.yellow,
backgroundColor: Colors.green,
strokeWidth: 4.0,
onRefresh: () async {
// Replace this delay with the code to be executed during refresh
// and return a Future when code finishs execution.
return Future<void>.delayed(const Duration(seconds: 3));
},
// Pull from top to show refresh indicator.
child: ListView.builder(
itemCount: 17,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Nice Item $index'),
tileColor:
index % 2 == 0 ? Colors.orangeAccent : Colors.redAccent,
);
},
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
// Show refresh indicator programmatically on button tap.
_refreshIndicatorKey.currentState?.show();
},
icon: const Icon(Icons.refresh),
label: const Text('Show Indicator'),
),
);
}
}
看樣子就只是在最外層，使用 RefreshIndicator 包起來就能實現囉～😌
逍遙文工作室 
隨意留個言吧：）～