Custom Progress Indicator In Flutter
Make Beautiful Custom Progress Indicators Using Liquid Progress Indicator Package
In this article, we will explore the Custom Progress Indicator in a flutter Using the liquid progress indicator package. With the help of the package, we can easily achieve flutter animated liquid wave progress indicators.
We will implement a demo of the Custom Progress Indicator that can be easily embedded in your flutter applications.
Table Of Contents :
Custom Progress Indicator
Implementation
Code Implement
Code File
Conclusion
Custom Progress Indicator :
A Custom liquid progress indicator is what we’ll actually use to draw our animated liquid wave progress bar. Liquid Custom Progress Indicator sub-classes need to implement the liquid progress bar Custom Progress Indicator .with the help of custom indicator, we can give custom shape to our progress bar.
Demo Module :
Implementation :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
dependencies:
liquid_progress_indicator: ^0.3.2Step 2: import the package :
import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';Step 3: Run flutter package get
Code Implemention :
Create a new dart file is called
custom_progress_indicator.dartinside thelibfolder
In this screen,First of all,We have set the percentage timer in the init state which will increase the timer when the progress bar in running them in your Application.
@override
void initState() {
Timer timer;
timer = Timer.periodic(Duration(milliseconds:300),(_){
print('Percent Update');
setState(() {
percent+=1;
if(percent >= 100){
timer.cancel();
// percent=0;
}
});
});
super.initState();
}Now we will initialize the LiquidCircularProgressIndicator which is a progress bar show in liquid form.
LiquidCircularProgressIndicator(
value:percent/100, // Defaults to 0.5.
valueColor: AlwaysStoppedAnimation(Colors.pink),
backgroundColor: Colors.white,
borderColor: Colors.red,
borderWidth:4.0,
direction: Axis.vertical,
center:Text(percent.toString() +"%",style: TextStyle(fontSize:12.0,fontWeight: FontWeight.w600,color: Colors.black),),
),Now we will initialize the LiquidLinearProgressIndicator which is a progress bar show in liquid form.
LiquidLinearProgressIndicator(
value:percent/100,
valueColor: AlwaysStoppedAnimation(Colors.pink),
backgroundColor: Colors.white,
borderColor: Colors.red,
borderWidth: 5.0,
borderRadius: 12.0,
direction: Axis.horizontal,
center:Text(percent.toString() +"%",style: TextStyle(fontSize:12.0,fontWeight: FontWeight.w600,color: Colors.black),),
),Creating Our Custom Shaped Indicator :
LiquidCustomProgressIndicator(
value:percent/100,
valueColor: AlwaysStoppedAnimation(Colors.cyan),
backgroundColor: Colors.grey[100],
Colors.black),),
direction: Axis.vertical,
shapePath:_buildBoatPath(),
),Code File :
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:liquid_progress_indicator/liquid_progress_indicator.dart';
import 'dart:math' as math;
class CustomProgressIndicator extends StatefulWidget {
@override
_CustomProgressIndicatorState createState() =>
_CustomProgressIndicatorState();
}
class _CustomProgressIndicatorState extends State<CustomProgressIndicator> {
double _height;
double _width;
double percent = 0.0;
@override
void initState() {
Timer timer;
timer = Timer.periodic(Duration(milliseconds: 300), (_) {
print('Percent Update');
setState(() {
percent += 1;
if (percent >= 100) {
timer.cancel();
// percent=0;
}
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(
"Liquid Progress Bar",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
centerTitle: true,
),
body: Container(
height: _height,
width: _width,
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text(
'Liquid Circular Progress Indicator',
style: TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w700,
fontSize: 15),
),
SizedBox(
height: 40,
),
Container(
height: 130,
width: 130,
child: LiquidCircularProgressIndicator(
value: percent / 100,
// Defaults to 0.5.
valueColor: AlwaysStoppedAnimation(Colors.pink),
backgroundColor: Colors.white,
borderColor: Colors.red,
borderWidth: 4.0,
direction: Axis.vertical,
center: Text(
percent.toString() + "%",
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Colors.black),
),
),
),
],
),
Column(
children: [
Text(
'Liquid linear progress indicator',
style: TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w700,
fontSize: 15),
),
SizedBox(
height: 40,
),
Container(
height: 40,
child: LiquidLinearProgressIndicator(
value: percent / 100,
valueColor: AlwaysStoppedAnimation(Colors.pink),
backgroundColor: Colors.white,
borderColor: Colors.red,
borderWidth: 5.0,
borderRadius: 12.0,
direction: Axis.horizontal,
center: Text(
percent.toString() + "%",
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Colors.black),
),
),
),
],
),
Column(
children: [
Text(
'Liquid custom progress indicator.',
style: TextStyle(
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w700,
fontSize: 15),
),
Container(
child: LiquidCustomProgressIndicator(
value: percent / 100,
valueColor: AlwaysStoppedAnimation(Colors.cyan),
backgroundColor: Colors.grey[100],
direction: Axis.vertical,
shapePath: _buildBoatPath(),
),
),
],
),
],
),
),
);
}
Path _buildBoatPath() {
return Path()
..moveTo(15, 120)
..lineTo(0, 85)
..lineTo(50, 85)
..lineTo(60, 80)
..lineTo(60, 85)
..lineTo(120, 85)
..lineTo(105, 120) //and back to the origin, could not be necessary #1
..close();
}
}Conclusion :
In this article, I have explained a Custom Progress Indicator demo, you can modify and experiment according to your own, this little introduction was from the date time picker from our side.
I hope this blog helps will provide you with sufficient information in Trying up the Custom Progress Indicator in your flutter project. In this demo explain the liquid progress bar through the liquid_progress_indicator package in a flutter. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
