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

  @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 包起來就能實現囉~😌

參考:RefreshIndicator class

隨意留個言吧:)~

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

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

Twitter picture

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

Facebook照片

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

連結到 %s

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

標籤雲

%d 位部落客按了讚: