Flutter – RefreshIndicator Widget
Last Updated :
16 Oct, 2023
The RefreshIndicator widget in Flutter is commonly used to implement pull-to-refresh functionality in a ListView, GridView, or any scrollable widget. In this article, we are going to implement the RefreshIndicator widget and explore some properties of it. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of RefreshIndicator
Dart
RefreshIndicator(
onRefresh: () async {
},
child: YourScrollableWidget(),
)
|
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementations
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
|
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
title: 'RefreshIndicator Example' ,
home: RefreshIndicatorExample(),
);
}
}
|
Step 5: Create RefreshIndicatorExample Class
In this class we are going to Implement the RefreshIndicator widget that help to implement pull-to-refresh functionality in a ListView. Comments are added for better understanding.
body: RefreshIndicator(
onRefresh: _refreshData, // Callback function for refresh action
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
Dart
class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
List<String> items = List.generate(20, (index) => 'Item ${index + 1}' );
Future< void > _refreshData() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
items = List.generate(20, (index) => 'New Item ${index + 1}' );
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'RefreshIndicator Example' ),
),
body: RefreshIndicator(
onRefresh: _refreshData,
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
);
}
}
|
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
title: 'RefreshIndicator Example' ,
home: RefreshIndicatorExample(),
);
}
}
class RefreshIndicatorExample extends StatefulWidget {
@override
_RefreshIndicatorExampleState createState() =>
_RefreshIndicatorExampleState();
}
class _RefreshIndicatorExampleState extends State<RefreshIndicatorExample> {
List<String> items = List.generate(20, (index) => 'Item ${index + 1}' );
Future< void > _refreshData() async {
await Future.delayed(Duration(seconds: 2));
setState(() {
items = List.generate(20, (index) => 'New Item ${index + 1}' );
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'RefreshIndicator Example' ),
),
body: RefreshIndicator(
onRefresh: _refreshData,
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...