25
Nov

Flutter Liquid Pull To Refresh

0

Flutter Liquid Pull To Refresh:

In this tutorial, we are going to learn about a beautiful and customized refresh button. we can create different types of refresh buttons. But in this tutorial, we are creating a liquid type refresh button it looks very beautiful.

To create Flutter Liquid Pull To Refresh button follow the below steps:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add the dependency package. After adding the dependency package run the get package method to import all the required files to the app.

 

dependencies:
liquid_pull_to_refresh: ^1.1.1

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ pub get

Importing the Package:

After Adding the dependency package to the pubspec.yaml file , you can now import the package into the dart code by using the below code. without adding the dependency packge to the pubspec.yaml file if you import it will show package not found an error.

import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';

Using Flutter liquid pull to refresh in flutter app:

To add Flutter liquid pull to refresh code to Flutter app we need ListView or GridView widgets inisde the listviews we are using LiquidPulltoRefresh() method.  Also you have provide the value of onResfresh()  parameter which is a refresh callback.

Important to note – LiquidPulltoRefresh() method can only be used with a vertical scroll view .

see the example code below:

LiquidPullToRefresh(
key: _refreshIndicatorKey, // key if you want to add
onRefresh: _handleRefresh, // refresh callback
child: ListView(), // scroll view
);

Complete example code for Flutter Liquid Pull To Refresh App:

main.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Liquid Pull To Refresh'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
final GlobalKey _scaffoldKey = GlobalKey();
final GlobalKey _refreshIndicatorKey =
GlobalKey();
static final List _items = [
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N'
];

Future _handleRefresh() {
final Completer completer = Completer();
Timer(const Duration(seconds: 3), () {
completer.complete();
});
return completer.future.then((_) {
_scaffoldKey.currentState?.showSnackBar(SnackBar(
content: const Text('Refresh complete'),
action: SnackBarAction(
label: 'RETRY',
onPressed: () {
_refreshIndicatorKey.currentState.show();
})));
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Stack(
children: [
Align(alignment: Alignment(-1.0, 0.0), child: Icon(Icons.reorder)),
Align(alignment: Alignment(-0.3, 0.0), child: Text(widget.title)),
],
),
),
body: LiquidPullToRefresh(
key: _refreshIndicatorKey,
onRefresh: _handleRefresh,
child: ListView.builder(
padding: kMaterialListPadding,
itemCount: _items.length,
itemBuilder: (BuildContext context, int index) {
final String item = _items[index];
return ListTile(
isThreeLine: true,
leading: CircleAvatar(child: Text(item)),
title: Text('This item represents $item.'),
subtitle: const Text(
'Even more additional list item information appears on line three.'),
);
},
),
),
);
}
}

If you don’t  need the opacity transition of liquid pull to refresh for the child then set. the below code as:

showChildOpacityTransition: false 

If you want set it as true:

showChildOpacityTransition: True

Congratulations You Have Learned Flutter Liquid Pull To Refresh….!!!

If It Is Helpful Share It With Your Friends….!!!

Leave a Reply

Categories