Introduction of Liquid Pull To Refresh
The Liquid Pull To Refresh package in Flutter provides a visually appealing, customizable pull-to-refresh feature for Flutter applications. It gives a liquid-like effect when the user pulls down to refresh the content in a scrollable widget such as a ListView or GridView.
Key Features:
- Liquid-like pull-to-refresh effect: Creates a visually engaging, liquid-like effect.
- Customizable: Offers various customization options to fit your app’s design.
Installation: To use the Liquid Pull To Refresh package, add it to your pubspec.yaml file:
dependencies: liquid_pull_to_refresh: ^3.0.1 # Use the latest version
Run flutter pub get to install the package.
Properties:
child: The scrollable widget that will have the pull-to-refresh functionality.
LiquidPullToRefresh( child: ListView( children: [ // List items ], ), // Other properties... )
onRefresh: The callback function that is triggered when the user pulls down to refresh. It should return a Future.
LiquidPullToRefresh( onRefresh: () async { // Refresh logic }, // Other properties... )
color: The color of the liquid effect.
LiquidPullToRefresh( color: Colors.blue, // Other properties... )
backgroundColor: The background color of the refresh indicator.
LiquidPullToRefresh( backgroundColor: Colors.white, // Other properties... )
height: The height of the refresh indicator.
LiquidPullToRefresh( height: 100.0, // Other properties... )
springAnimationDurationInMilliseconds: The duration of the spring animation when the pull-to-refresh is triggered.
LiquidPullToRefresh( springAnimationDurationInMilliseconds: 500, // Other properties... )
showChildOpacityTransition: A boolean that determines whether to show a fade transition for the child widget during the refresh.
LiquidPullToRefresh( showChildOpacityTransition: true, // Other properties... )
Usage:
import 'package:flutter/material.dart'; import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Liquid Pull To Refresh Example'), ), body: MyHomePage(), ), ); } } class MyHomePage extends StatelessWidget { Future<void> _handleRefresh() async { await Future.delayed(Duration(seconds: 2)); // Add your refresh logic here } @override Widget build(BuildContext context) { return LiquidPullToRefresh( onRefresh: _handleRefresh, color: Colors.blue, backgroundColor: Colors.white, height: 100.0, showChildOpacityTransition: true, springAnimationDurationInMilliseconds: 500, child: ListView.builder( itemCount: 20, itemBuilder: (context, index) { return ListTile( title: Text('Item $index'), ); }, ), ); } }
Final Code: This is the final code with the combination of some above Liquid Pull To Refresh Package properties.
import 'package:flutter/material.dart'; import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart'; class HomePage extends StatefulWidget { const HomePage({super.key}); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { Future<void> _handleRefresh() async { return await Future.delayed(Duration(seconds: 2)); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.deepOrangeAccent[100], body: LiquidPullToRefresh( onRefresh: _handleRefresh, color: Colors.deepOrangeAccent[400], height: 300, backgroundColor: Colors.deepOrangeAccent[100], animSpeedFactor: 2, showChildOpacityTransition: false, child: ListView( children: [ Padding( padding: EdgeInsets.all(25.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Container( height: 300, color: Colors.deepOrangeAccent[400], ), ), ), Padding( padding: EdgeInsets.all(25.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Container( height: 300, color: Colors.deepOrangeAccent[400], ), ), ), Padding( padding: EdgeInsets.all(25.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Container( height: 300, color: Colors.deepOrangeAccent[400], ), ), ), Padding( padding: EdgeInsets.all(25.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Container( height: 300, color: Colors.deepOrangeAccent[400], ), ), ), Padding( padding: EdgeInsets.all(25.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Container( height: 300, color: Colors.deepOrangeAccent[400], ), ), ), Padding( padding: EdgeInsets.all(25.0), child: ClipRRect( borderRadius: BorderRadius.circular(15), child: Container( height: 300, color: Colors.deepOrangeAccent[400], ), ), ), ], ), ), ); } }
In this example, LiquidPullToRefresh wraps a ListView.builder to provide a pull-to-refresh functionality with a liquid-like effect. The refresh logic is handled in the _handleRefresh method, which simulates a delay using Future.delayed. The LiquidPullToRefresh widget’s properties are set to customize the appearance and behavior of the pull-to-refresh effect.
Thank for visiting Hybrid App Development
Posted by Hussam HM