Have you ever completed and submitted a form in a smartphone application and received an interactive or graphical pop-up informing you that your request is being processed?
And then another pop-up window displays to notify you whether your request was successful or not? This is a frequently used technique for informing users on the progress of their actions using graphical decorators. These decorators are referred to as progress indicators in Flutter.
In this post, you will learn how to use Flutter’s built-in progress indicators in web apps. We’ll examine each indicator in detail to see how they operate and how they might be customized.
Flutter Progress Indicators
As the name indicates, Progress indicators assist in communicating the status of a user’s request. The following are some examples of operations that involve progress indicators:
- Obtaining files
- Uploading documents
- Submission of forms
- Loading an app page
Flutter implements an abstract ProgressIndicator class, from which it’s actual progress indicator widgets — LinearProgressIndicator and CircularProgressIndicator — inherit.
Linear Progress Indicator
ProgressIndicator is an abstract class subclassed by Flutter, and this is its first inherent progress indicator. It is used to indicate the progress of work through the use of a horizontal bar.
Circular Progress Indicator
This is the second built-in progress indicator in Flutter, and it is likewise a subclass of the abstract ProgressIndicator class. The CircularProgressIndicator() rotates to signal the completion of a job. In general, the length of these indicators might be either fixed or variable.
A determined progress indicator is used to convey the fraction or percentage of the job that has been done and the remainder that remains to be completed.
The indicator’s value changes when the task is completed. Each progress indicator includes a value property that takes a double data type in the range of 0.0 to 1.0 to specify the indicator’s start and finish points.
Code for Determinate Circular Progress Indicator:
dart
class DeterminateIndicator extends StatefulWidget {
@override
_DeterminateIndicatorState createState() => _DeterminateIndicatorState();
}
class _DeterminateIndicatorState extends State<DeterminateIndicator > {
@override
Widget build(BuildContext context) {
return Scaffold(
background Color: Colors.black,
body: Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: TweenAnimation Builder(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(seconds: 3),
builder: (context, value, _) {
return SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
value: value as double,
background Color: Colors.grey,
color: Colors.amber,
stroke Width: 10,
),
);
}
),
)
)
);
}
}
The indicator rotates for three seconds, as specified by the TweenAnimationBuilder() widget’s duration. An indeterminate progress indicator is used to indicate the status of an undefined job. In other words, we utilize this signal when we have no idea how long a task will take to complete. The value attribute of an indicator can be set to null to make it uncertain.
Code for Indeterminate Circular Progress Indicator:
dart
class IndeterminateIndicator extends StatefulWidget {
@override
_IndeterminateIndicatorState createState() => _IndeterminateIndicatorState();
}
class _IndeterminateIndicatorState extends State<IndeterminateIndicator > {
@override
Widget build(BuildContext context) {
return Scaffold(
background Color: Colors.black,
body: Center(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
child: LinearProgressIndicator(
background Color: Colors.grey,
color: Colors.amber,
minHeight: 10,
),
),
)
)
);
}
}
The Flutter Spinkit package
The flutter spinkit external package contains a set of animated indicators that may be created in your application. To include this package into your project, include the following dependency in your pubspec.yaml file:
dependencies:
flutter_spinkit: ^5.1.0
Alternatively, you may execute the following command directly from your terminal:
console
$ flutter pub add flutter_spinkit
Appropriate Uses for Progress Indicators
When considering whether to include a progress indicator in your application, the first thing to examine is if you can acquire the task’s endpoint or assess its progress. This allows you to determine whether to use a determinate or an indeterminate progress indication.
For instance, circumstances in which you may track the progress of work and hence apply determinate progress indicators include the following:
- File upload
- Downloading a file
- Countdown implementation
However, when it is impossible to track the progress of work, indeterminate indications are the best option. Several examples include the following:
- The process of loading an application
- Data transmission over HTTP connections
- Requesting an API’s services
Typically, the indicators included in the flutter spinkit package are classified as loading indications. As a result, it is best suited for usage when an undetermined progress indication is required.
Progress Indicators: Implementation
dart
class DeterminateIndicator extends StatefulWidget {
@override
_DeterminateIndicatorState createState() => _DeterminateIndicatorState();
}
class _DeterminateIndicatorState extends State<DeterminateIndicator> {
File? imageFile;
double downloadProgress = 0;
Future downloadImage() async {
final url = ‘https://images.unsplash.com/photo-1593134257782-e89567b7718a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=375&q=80’;
final request = Request(‘GET’, Uri.parse(url));
final response = await Client().send(request);
final contentLength = response.contentLength;
final fileDirectory = await getApplicationDocumentsDirectory();
final filePath = ‘${fileDirectory.path}/image.jfif’;
imageFile = File(filePath);
final bytes = <int>[];
response.stream.listen(
(streamedBytes) {
bytes.addAll(streamedBytes);
setState(() {
downloadProgress = bytes.length / contentLength!;
});
},
onDone: () async {
setState(() {
downloadProgress = 1;
});
},
cancelOnError: true,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text(‘Determinate progress indicator’),
centerTitle: true,
),
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
downloadProgress == 1 ? Container(
width: 250,
height: 250,
child: Image.file(imageFile!)
) : Text(‘Download in progress’),
SizedBox(height: 30),
SizedBox(
width: 100,
height: 100,
child: Stack(
fit: StackFit.expand,
children: [
CircularProgressIndicator(
value: downloadProgress,
valueColor: AlwaysStoppedAnimation(Colors.blueAccent),
strokeWidth: 10,
backgroundColor: Colors.white,
),
Center(
child: downloadProgress == 1
?
Text(
‘Done’,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20
),
)
:
Text(
‘${(downloadProgress * 100).toStringAsFixed(0)}%’,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 24,
),
)
),
],
),
),
const SizedBox(height: 32),
Container(
width: 200,
height: 40,
child: RaisedButton(
onPressed: downloadImage,
color: Theme
.of(context)
.primaryColor,
child: Row(
children: <Widget>[
Text(
‘Download image’,
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
SizedBox(width: 10),
Icon(
Icons.download,
color: Colors.white,
)
]
),
),
)
],
),
),
);
}
}
Conclusion
In this tutorial, we guided you regarding how to add a flutter web app progress indication before loading the program. Let us know what you think about it. Flutter Agency flutteragency.com is a team of Flutter Experts specialize in mobile app technology and software development solutions. We have a team of highly motivated and competent Flutter App Developers who will assist you with your project.
