Linear Progress Indicator In Flutter
Guess if you have opened any App and it shows a blank page. You will be having no clue what that application is doing. Even though the app might be doing some tasks in the background. Won’t it will affect the user experience? It will and users will end up having a bad opinion and review for the app.
To prevent this from happening flutter developers introduced a class named Linear Progress Indicator. It is one of the most used class while we have to make the user informed that the process which he initiated is being executed by the application and they need to wait for it to finish. It also helps in keeping the user aware of the progress that the task has made.
In this blog, I’ll be taking you through the overview, usage, and implementation of the class Linear Progress Indicator.
Table Of Contents:
What is Linear Progress Indicator?
What is Linear Progress Indicator?
Linear Progress Indicator is predefined in the flutter using which we can make the user aware that some task is being executed by the application and once it finishes they will have the output or result. It can also be used for loading time so that users don’t have to see the blank screen.
Types:
- Indeterminate: Indeterminate progress indicator just used to show that app is running and performing some tasks. However, init a user won’t be having any clue when that background process will finish. For creating an indeterminate progress bar we set the value property null.
- Determinate: It is a type of indicator some set time has been calculated for the execution of tasks. It also indicates how much progress is completed. The value in the determinate progress indicator range from 0 to 1 where 0 indicates that progress is just started and 1 indicates that the progress is completed.
Constructor:
We need to use the below constructor to use the ClipOval widget in our code.
const LinearProgressIndicator({
Key? key,
double? value,
Color? backgroundColor,
Color? color,
Animation<Color?>? valueColor,
this.minHeight,
String? semanticsLabel,
String? semanticsValue,
}) : assert(minHeight == null || minHeight > 0),
super(
key: key,
value: value,
backgroundColor: backgroundColor,
color: color,
valueColor: valueColor,
semanticsLabel: semanticsLabel,
semanticsValue: semanticsValue,
);Properties:
> value: It is the property that helps in differentiating between determinate and indeterminate progress indicators. If the value is set to null then the indicator will be indeterminate. However, if some value has been passed then it will work as a determinate progress indicator.
> backgroundColor: This property is used to set the background color of the progress loader.
> minHeight: It is the minimum height of the line that is used to draw the indicator in a LinearProgressIndicator or other words it is used to define how thick the line of an indicator looks.
> valueColor: It is used to define the progress indicator’s value as an animated value. This property covers the highlights of the completed task valued.
> AlwaysStoppedAnimation: It is used to specify a constant color in the valueColor property.
> Semantic Label: Used to add a semantic label.
> Semantic Value: Used to add Semantic value.
Code Implementation:
Create a new dart file called main.dart inside the lib folder.
After which we will create a class inside the main.dart file.First, we will try to implement the Indeterminate progress indicator.
In the following code, we have created a class ProgressIndicator and used LinearProgressIndicator without passing any value.
class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Linear Progression Indicator',
debugShowCheckedModeBanner: false,
home: ProgressionIndicator(),
);
}
}
class ProgressionIndicator extends StatefulWidget {
const ProgressionIndicator({Key? key}) : super(key: key); @override
_ProgressionIndicatorState createState() => _ProgressionIndicatorState();
}class _ProgressionIndicatorState extends State<ProgressionIndicator> {
@override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar( backgroundColor: Colors.red, title:Text( "Flutter Devs"), ),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Linear Progression Indicator',style: TextStyle(color: Colors.black,fontSize: 20),),
Padding(
padding: const EdgeInsets.all(20.0),
child: LinearProgressIndicator(
backgroundColor: Colors.orangeAccent,
valueColor: AlwaysStoppedAnimation(Colors.blue),
minHeight: 25,
),
), ],
),
);
}
}When we run the application, we ought to get the screen’s output like the underneath screen video.
Now we will try to implement the determinate example in our code. For the same, we will use the Timer. period constructor. It creates a reoccurring callback function until we use the cancel function or it meets certain conditions.
So now we will initialize a variable with a value of zero.double value= 0;
Now we will create a function and increase the value variable by 0.1 every second. Also simultaneously we will update the state of the UI every time the function in revoked.
void determinateIndicator(){
new Timer.periodic(
Duration(seconds: 1),
(Timer timer){
setState(() {
if(value == 1) {
timer.cancel();
}
else {
value = value + 0.1;
}
});
}
);
}Now we will pass this function on the tap of an elevated button.
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
child: Text("Start"),
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.blueGrey
),
onPressed: ()
{
value = 0;
determinateIndicator();
setState(() { });
},
),
)When we run the application, we ought to get the screen’s output like the underneath screen video.
Here we can see that our progress bar indicator is reflecting the progress. It turns red little by little indicating the progress of the function we defined. We can customize the animation and also show the percentage of how in written too. We can make the changes as per our requirement.
Code Files:
import 'dart:async';import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {
runApp(MyApp());
}class MyApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Linear Progression Indicator',
debugShowCheckedModeBanner: false,
home: ProgressionIndicator(),
);
}
}
class ProgressionIndicator extends StatefulWidget {
const ProgressionIndicator({Key? key}) : super(key: key); @override
_ProgressionIndicatorState createState() => _ProgressionIndicatorState();
}class _ProgressionIndicatorState extends State<ProgressionIndicator> {
double value = 0; @override
Widget build(BuildContext context) {
return Scaffold( appBar: AppBar( backgroundColor: Colors.red, title:Text( "Flutter Devs"), ),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Indeterminate Indicator',style: TextStyle(color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),),
Padding(
padding: const EdgeInsets.all(20.0),
child: LinearProgressIndicator(
backgroundColor: Colors.orangeAccent,
valueColor: AlwaysStoppedAnimation(Colors.blue),
minHeight: 25,
),
),
SizedBox(height: 20,),
Text("Determinate Indicator",style: TextStyle(color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),),
Container(
margin: EdgeInsets.all(20),
child: LinearProgressIndicator(
backgroundColor: Colors.lightBlueAccent,
color: Colors.red, minHeight: 15,
value: value,
),
),
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
child: Text("Start"),
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Colors.blueGrey
),
onPressed: ()
{
value = 0;
determinateIndicator();
setState(() { });
},
),
)
],
),
);
}
void determinateIndicator(){
new Timer.periodic(
Duration(seconds: 1),
(Timer timer){
setState(() {
if(value == 1) {
timer.cancel();
}
else {
value = value + 0.1;
}
});
}
);
}}Conclusion:
In the end, LinearProgressIndicator is a very useful tool in enhancing the user experience. It aids the user to understand and keep their expectations fulfilled. It is widely used to indicate the download percentage, uploading status, queue time, and many more.
It is very easy to use it and we can do numerous things using it. We can make it adapt to our code as per our requirements. It was just a small overview of the Linear Progress Indicator class its functionality and implementation. I hope the time you spent reading this article turns out to be productive. You can try implementing and modifying this code as per your needs.
Feel free to reach out to me for any suggestions or corrections where I can improve.
❤ ❤ 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 a 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.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
