The progress bar is a graphical control element used to show the progress of tasks like downloading, uploading, installation, file transfer etc. In this section, we are going to understand how to show the progress bar in the flutter application. There are two types of progress indicators in a flutter.
linear progress indicator A linear progress bar is used to show the progress of a task in a horizontal line. Flutter mainly provides two types of linear progress indicators:
Determinate:
Define progress bar Indicates the actual amount of progress at each point in the task. Its value will monotonously increase from 0.0 to 1.0 to show the amount of work completed at that time. To create a defined progress indicator we need to use a non-zero value from 0.0 to 1.0.
Indeterminate:
The indefinite progress bar does not show the amount of progress in completing the task. This means we don’t know when the task is finished. It progresses without indicating how much progress is left. We can create an indefinite progress indicator by using a zero value.
linear progress indicator
import 'package:flutter/material.dart';
class LinearProgressIndicatorClass extends StatefulWidget {
@override
_LinearProgressIndicatorClassState createState() => _LinearProgressIndicatorClassState();
}
class _LinearProgressIndicatorClassState extends State<LinearProgressIndicatorClass> {
bool loading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.arrow_forward_ios_rounded
),
onPressed: (){
setState(() {
loading = !loading;
});
},
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal:38),
child: Center(
child: loading? Column(mainAxisAlignment: MainAxisAlignment.center,children: [ LinearProgressIndicator(),SizedBox(height: 30,),Text('Click Icon to stop!!!', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold,),)],):Text(
"Click to create Task",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
}
circular progress indicator
import 'package:flutter/material.dart';
class CircularProgressIndicatorClass extends StatefulWidget {
@override
_CircularProgressIndicatorClassState createState() => _CircularProgressIndicatorClassState();
}
class _CircularProgressIndicatorClassState extends State<CircularProgressIndicatorClass> {
bool loading = false;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(
Icons.arrow_forward_ios_rounded
),
onPressed: (){
setState(() {
loading = !loading;
});
},
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal:38),
child: Center(
child: loading?
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(
backgroundColor: Colors.red,
valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
),
SizedBox(
height: 30,
),
Text(
"Click to stop the TASK",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
],
):Text(
"Click to start the TASK",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
}
