Flutter - Different Types of Loading using Flutter EasyLoading
Last Updated :
28 Apr, 2025
Flutter applications involve incorporating loading indicators to provide users with feedback during background operations. Flutter has a package for simplifying the process named flutter_easyloading package. This package easiest way to integrate loading indicators with various styles. In this article, we will implement different types of loading indicators provided by the flutter_easyloading package. From default loading screens to progress indicators and custom widgets, flutter_easyloading provides the easiest way to implement all types of loading indicators. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Adding the Dependencies
Here we have to add the the following dependencies to our pubspec.yaml file.
dependencies:
flutter_easyloading: ^3.0.5
Or, Simply you can run the below command in your VS code Terminal.
flutter pub add flutter_easyloading
Step 3: Import the Package
First of all import material.dart package and the flutter_easyloading package.
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
Step 4: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
title: 'Loading Examples',
home: MyHomePage(),
builder: EasyLoading.init(),
);
}
}
Step 6: Create MuHomePage Class
The MyHomePage class in this Flutter application defines the main screen of the app, using the flutter_easyloading package.It contains a several buttons, Each button triggers a different type of loading indicator when pressed: the "Default Loading" button displays a simple loading message, the "Loading with Progress" button demonstrates a loading progress indicator, the "Loading with Success Message" button exhibits a success message with a checkmark, the "Loading with Error Message" button simulates an error message with a warning icon, and finally, the "Loading with Information Message" button showcases an information message with an info icon. Comments are added for better understandings.
// Show default loading with a status message
void _showDefaultLoading() {
EasyLoading.show(status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show loading with progress and a status message
void _showProgressLoading() {
EasyLoading.showProgress(0.5, status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show success message with a checkmark
void _showSuccessMessage() {
EasyLoading.showSuccess('Loaded successfully!');
}
// Show error message with a warning icon
void _showErrorMessage() {
EasyLoading.showError('Failed to load!');
}
// Show information message with an info icon
void _showInfoMessage() {
EasyLoading.showInfo('Information message');
}
Dart
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading Examples'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
_showDefaultLoading();
},
child: Text('Default Loading'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showProgressLoading();
},
child: Text('Loading with Progress'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showSuccessMessage();
},
child: Text('Loading with Success Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showErrorMessage();
},
child: Text('Loading with Error Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showInfoMessage();
},
child: Text('Loading with Information Message'),
),
],
),
),
);
}
// Show default loading with a status message
void _showDefaultLoading() {
EasyLoading.show(status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show loading with progress and a status message
void _showProgressLoading() {
EasyLoading.showProgress(0.5, status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show success message with a checkmark
void _showSuccessMessage() {
EasyLoading.showSuccess('Loaded successfully!');
}
// Show error message with a warning icon
void _showErrorMessage() {
EasyLoading.showError('Failed to load!');
}
// Show information message with an info icon
void _showInfoMessage() {
EasyLoading.showInfo('Information message');
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
title: 'Loading Examples',
home: MyHomePage(),
builder: EasyLoading.init(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading Examples'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
_showDefaultLoading();
},
child: Text('Default Loading'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showProgressLoading();
},
child: Text('Loading with Progress'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showSuccessMessage();
},
child: Text('Loading with Success Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showErrorMessage();
},
child: Text('Loading with Error Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showInfoMessage();
},
child: Text('Loading with Information Message'),
),
],
),
),
);
}
// Show default loading with a status message
void _showDefaultLoading() {
EasyLoading.show(status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show loading with progress and a status message
void _showProgressLoading() {
EasyLoading.showProgress(0.5, status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show success message with a checkmark
void _showSuccessMessage() {
EasyLoading.showSuccess('Loaded successfully!');
}
// Show error message with a warning icon
void _showErrorMessage() {
EasyLoading.showError('Failed to load!');
}
// Show information message with an info icon
void _showInfoMessage() {
EasyLoading.showInfo('Information message');
}
}
Output:
Similar Reads
Flutter - Onboarding Screen Using flutter_overboard Package In Flutter, Onboarding screens, also known as welcome screens or introduction screens, are a collection of screens or pages that are displayed to users when they first launch a mobile app or a software application. The primary purpose of onboarding screens is to introduce users to the key features,
5 min read
Flutter - Fetching JSON Data using HTTP In this article, we will learn how to fetch data from the internet or JSON file using the HTTP package in a flutter.What is HTTP?The HTTP is a composable, future-based library for making HTTP requests. This package contains a set of high-level functions and classes that make it easy to consume HTTP
5 min read
Flutter - Loading Progress Indicator Button In this article, we will learn about the Loading Progress Indicator Button in Flutter. What is Loading Progress Indicator Button?Progress Indicator informs customers and users who are using the app about the ongoing Process such as loading an app, submitting a form, or uploading a document online. A
4 min read
Flutter - Fetching List of Data From API Through Dio Dio is a powerful HTTP client for Dart, which supports Interceptors, Global configuration, FormData, File downloading, etc. and Dio is very easy to use. In this article, we will learn how to use Dio in Flutter to make API Calls and show data in ListView. Before heading toward its implementation. Why
3 min read
Advantages and Disadvantages of Flutter's Hot Reload Feature Flutter is a popular cross-platform mobile application development framework that allows developers to create high-quality mobile apps for both Android and iOS using a single codebase. One of the most popular features of Flutter is its hot reload feature, which allows developers to see the changes t
3 min read