Liquid Pull To Refresh Package

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