Just My Life & My Work

[Flutter] RefreshIndicator class

使用 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});

  State<StatefulWidget> createState() {
    return _TradeContract();

class _TradeContract extends State<TradeContract> {
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: RefreshIndicatorExample(),

class RefreshIndicatorExample extends StatefulWidget {
  const RefreshIndicatorExample({super.key});

  State<RefreshIndicatorExample> createState() =>

class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =

  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'),
                  index % 2 == 0 ? Colors.orangeAccent : Colors.redAccent,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          // Show refresh indicator programmatically on button tap.
        icon: const Icon(Icons.refresh),
        label: const Text('Show Indicator'),

看樣子就只是在最外層,使用 RefreshIndicator 包起來就能實現囉~😌

參考:RefreshIndicator class



WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )


您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.


%d 位部落客按了讚: