Overview
Today we will explore the liquid pull to refresh library for Flutter and integrate it with our Subscriptions list view.
Source Code
import 'package:flutter/material.dart';
import 'package:liquid_pull_to_refresh/liquid_pull_to_refresh.dart';
class CustomRefreshAnimation extends StatelessWidget {
const CustomRefreshAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFF7FAFB),
appBar: AppBar(
title: const Text(
"Subscriptions",
style: TextStyle(
color: Colors.white,
fontSize: 26,
fontWeight: FontWeight.w600,
),
),
shadowColor: Colors.transparent,
backgroundColor: Color(0xFFFFC6C52),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.only(left: 10, right: 10, bottom: 20),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFFFFC6C52),
border: Border.all(color: Colors.transparent),
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
color: Color(0xFFFFC6C52),
spreadRadius: 2,
blurRadius: 2,
),
]),
height: 90,
child: const ListTile(
title: Text("Total",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600,
)),
trailing: Text("\$291.95",
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.w600,
)),
),
),
),
body: Container(
padding: const EdgeInsets.only(top: 5),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: LiquidPullToRefresh(
springAnimationDurationInMilliseconds: 500,
borderWidth: 2,
color: Color(0xFFFFC6C52),
backgroundColor: Colors.white,
animSpeedFactor: 2,
height: MediaQuery.of(context).size.height / 5,
child: ListView.builder(
itemCount: subscriptions.length,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding:
const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
child: Container(
decoration: BoxDecoration(
color: subscriptions[index].background,
border: Border.all(
color: subscriptions[index].borderColor, width: 2),
borderRadius: BorderRadius.circular(10),
),
child: ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
subscriptions[index].imageUrl,
),
backgroundColor: Colors.grey.shade300,
radius: 23,
),
trailing: Text(
subscriptions[index].price,
style: const TextStyle(
color: Color(0xfff212121),
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
title: Text(
subscriptions[index].name,
style: const TextStyle(
color: Color(0xfff212121),
fontSize: 18,
fontWeight: FontWeight.w700),
),
subtitle: Text(
subscriptions[index].type,
style: const TextStyle(
color: Color(0xfff5d5d5d),
fontSize: 15,
fontWeight: FontWeight.w400),
),
),
),
);
}),
onRefresh: () => Future.delayed(
const Duration(seconds: 2),
),
),
),
);
}
}
class Subscription {
final String name;
final String type;
final String price;
final String imageUrl;
final Color background;
final Color borderColor;
Subscription(this.name, this.type, this.price, this.imageUrl, this.background,
this.borderColor);
}
final List<Subscription> subscriptions = [
Subscription(
'Netflix',
'Entertainment',
'\$6.99',
'https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bmV0ZmxpeHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60',
Color(0xfffffe5e8),
Color(0xFFFFDB8C0),
),
Subscription(
'Spotify',
'Entertainment',
'\$3.99',
'https://images.unsplash.com/photo-1614680376593-902f74cf0d41?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c3BvdGlmeXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60',
Color(0xfffe5f7ef),
Color(0xfff90D6B7),
),
Subscription(
'LinkedIn Premium',
'Professional',
'\$64.99',
'https://images.unsplash.com/photo-1611944212129-29977ae1398c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8OXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60',
Color(0xfffe8f4fe),
Color(0xfffB1D9FF),
),
Subscription(
'Instagram Ads',
'Business',
'\$199.99',
'https://images.unsplash.com/photo-1611262588024-d12430b98920?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
Color(0xffff7e8f8),
Color(0xfffF7C8FA),
),
Subscription(
'YouTube Music',
'Entertainment',
'\$14.99',
'https://images.unsplash.com/photo-1611162616475-46b635cb6868?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8eW91dHViZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60',
Color(0xfffffe9eb),
Color(0xfffFDCBD0),
),
];
