Flutter - Different Types of Loading using Flutter EasyLoading
Last Updated :
24 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 - Sharing Data Among Flutter Pages
In this article, we are going to find the solution for the problem statement "Import/send data from one page to another in flutter". Before going into the topic, there are some pre-requisites. Pre-requisites:Basics of dart programming language.Setting up Flutter in VS code or Setting up Flutter in A
4 min read
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, f
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 vs Xamarin: Top Differences
Mobile applications have a large market share for online and offline applications, businesses can choose native or cross-platform options to develop their mobile applications. Flutter and Xamarin are two prominent frameworks that offer cross-platform application development. Both platforms allow dev
10 min read
Flutter - Design Login Page UI
Flutter is Google’s Mobile SDK to build native iOS and Android apps from a single codebase. When building applications with Flutter everything is towards Widgets – the blocks with which the Flutter apps are built. The User Interface of the app is composed of many simple widgets, each of them handlin
3 min read
Flutter vs React Native: Key Differences
In the dynamic landscape of mobile applications, mobile developers have many options for choosing the correct platform for mobile application development. The choice is quite easy when they have to choose from Native and Cross-platform but when it comes to choosing between two cross-platform technol
8 min read
Flutter - Animated AlertDialog in Flutter
Animating an AlertDialog in Flutter involves using the Flutter animations framework to create custom animations for showing and hiding the dialogue. In this article, we are going to add an animation to an AlertDialog. A sample video is given below to get an idea about what we are going to do in this
4 min read
Flutter - Animate Items in List Using AnimatedList
The AnimatedList widget in Flutter is used to create a list that automatically animates changes to its items. It's particularly useful when you want to add or remove items from a list with smooth animations. In this article, we are going to see how the list is animated when an item is deleted or add
5 min read
Flutter - Updating Data on the Internet
In today's world, most applications heavily rely on fetching and updating information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore the same. Let's see a sample video of what we are going to develop.Sample Video:St
5 min read
Flutter - Deleting Data On The Internet
In this article, we will explore the process of deleting data on the internet. Before deleting data on the internet, we will fetch the data first and then will delete the data.Steps to implement Deleting Data on the InternetStep 1 : Create a new flutter applicationCreate a new Flutter application us
4 min read