116 lines
2.5 KiB
Markdown
116 lines
2.5 KiB
Markdown
---
|
|
name: widgets-refresh-indicator
|
|
description: Flutter RefreshIndicator - pull-to-refresh functionality for scrollable content
|
|
---
|
|
|
|
# RefreshIndicator
|
|
|
|
`RefreshIndicator` provides pull-to-refresh functionality for scrollable widgets.
|
|
|
|
## Basic Usage
|
|
|
|
```dart
|
|
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
|
|
|
|
```dart
|
|
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
|
|
|
|
```dart
|
|
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
|
|
|
|
```dart
|
|
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
|
|
|
|
<!--
|
|
Source references:
|
|
- https://github.com/flutter/flutter/tree/main/packages/flutter/lib/src/material/refresh_indicator.dart
|
|
- https://docs.flutter.dev/cookbook/design/pull-to-refresh
|
|
-->
|