Flutter – Different Types of Loading using Flutter EasyLoading

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: