skills/flutter/references/widgets-refresh-indicator.md

name	description
widgets-refresh-indicator	Flutter RefreshIndicator - pull-to-refresh functionality for scrollable content

RefreshIndicator

RefreshIndicator provides pull-to-refresh functionality for scrollable widgets.

Basic Usage

RefreshIndicator(
  onRefresh: () async {
    // Fetch new data
    await fetchData();
  },
  child: ListView(
    children: [
      ListTile(title: Text('Item 1')),
      ListTile(title: Text('Item 2')),
      ListTile(title: Text('Item 3')),
    ],
  ),
)

With Future

RefreshIndicator(
  onRefresh: () async {
    final data = await fetchData();
    setState(() {
      _items = data;
    });
  },
  child: ListView.builder(
    itemCount: _items.length,
    itemBuilder: (context, index) {
      return ListTile(title: Text(_items[index]));
    },
  ),
)

Customization

RefreshIndicator(
  onRefresh: () async {
    await fetchData();
  },
  color: Colors.blue, // Indicator color
  backgroundColor: Colors.white, // Background color
  strokeWidth: 3.0, // Indicator stroke width
  displacement: 40.0, // Displacement from top
  edgeOffset: 0.0, // Edge offset
  triggerMode: RefreshIndicatorTriggerMode.onEdge, // onEdge, anywhere
  child: ListView(...),
)

Complete Example

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

  @override
  State<RefreshableList> createState() => _RefreshableListState();
}

class _RefreshableListState extends State<RefreshableList> {
  List<String> _items = ['Item 1', 'Item 2', 'Item 3'];

  Future<void> _refresh() async {
    // Simulate network delay
    await Future.delayed(Duration(seconds: 2));
    
    setState(() {
      _items = ['New Item 1', 'New Item 2', 'New Item 3'];
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(_items[index]));
        },
      ),
    );
  }
}

Key Points

• Use RefreshIndicator for pull-to-refresh
• Wrap scrollable widgets (ListView, GridView, etc.)
• onRefresh must return a Future
• Customize appearance with properties
• Works with any scrollable widget
• Provides standard Material Design refresh indicator
• Use triggerMode to control when refresh triggers