Open In App

Flutter - Different Types of Loading using Flutter EasyLoading

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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:


Next Article
Flutter | An introduction to the open source SDK by Google

C
chinmaya121221
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox