Simplify Your Flutter App Development with the Flutter Easy Loading Package

Ever found yourself staring at an app screen, wondering if it’s frozen or just taking its sweet time? That awkward pause where nothing happens can turn curiosity into frustration faster than a double tap. For developers, this moment is the ultimate "oops." In a world where patience is rare, users expect a sign—any sign—that their request is being processed.

Enter flutter_easyloading package, the unsung hero of app design. This package doesn’t just flash a boring spinner; it transforms waiting into a visually appealing experience. Whether it’s a subtle shimmer or an animated loader, Easyloading turns idle seconds into delightful moments. In this guide, we’ll explore how this gem can revolutionize your app's user experience, one elegant loading indicator at a time. Let’s make waiting worth the wait!

Why is this integral?

Imagine you're a user inputting data into a Flutter app, and the app has to execute a network request, which might be a very quick operation or even take a bit longer. Without a loading indicator, the user might perceive the app has stalled, leading to bad user experiences.

This is where the flutter_easyloading package becomes your go-to tool for a smooth, user-friendly application.

The flutter_easyloading package is a clean and lightweight loading toast widget for Flutter. Think of the excellent loaders it enables you to create: loading indicators animated delightfully, exhibiting creative loading animations that don't require any extra dependency.

In this blog, we delve deep into the workings of the Flutter easy-loading package. With solid examples, essential tips, and everything in between, this comprehensive guide will empower you to implement effective loading indicators in your Flutter apps.

What is Flutter Easyloading?

Flutter Easyloading is a powerful Flutter package created to implement seamless and interactive loading indicators in your Flutter app. It offers many customizable options to bring your creativity to life when loading widgets. Flutter Easyloading provides a clean, lightweight loading toast widget, making your loading status more exciting and less bothersome for the user.

Why is Easyloading so important? Imagine performing an asynchronous operation that requires a definite period for execution. With Easyloading, you control what the user sees during that period. You can display the progress indicator on the current screen, projecting the loading status of your background work. This feature helps to enhance user interactions, keeping your users engaged even when the screen seems passive.

This package stands out because of its independent context support for iOS, Android, and the web, something very few packages offer. In other words, you can use Easyloading without context support for iOS, Android, and the web. It delivers a pure Dart plugin, which means you get a Flutter plugin and a Dart plugin in one package. Its rich features, like animated loading indicators and water-like effects, make Easyloading a must-use for every Flutter developer.

Installing and Importing Flutter Easy Loading

The first step towards utilizing the power of Flutter Easyloading revolves around installing and importing the package to your project.

To start, add the flutter_easyloading package to your project's pubspec.yaml file. This file houses the list of dependencies necessary for your Flutter application.

The process is simple and works similarly to adding any other Flutter package. You can locate the latest stable version of Flutter Easyloading on pub.dev and use it in your pubspec.yaml file like so:

Copy
1
2
3
4
5
dependencies:
  flutter:
    sdk: flutter

  flutter_easyloading: ^3.0.5

Remember to replace ^3.0.5 with the latest version number of the package.

Next, run the flutter pub get command in your project's terminal to fetch the package. After successful installation, import flutter_easyloading to the Dart file where you plan to use it as follows:

Copy
1
import 'package:flutter_easyloading/flutter_easyloading.dart';

Once installed and imported, we can implement our first loading indicator using Flutter Easyloading.

Implementing Your First Loading Indicator with Flutter Easy loading

After successfully installing the package, it's time to create your first loading indicator. Flutter Easyloading provides a very simple full-screen loader setup that can be easily implemented.

Here's a simple step-by-step guide on how to create a primary loading indicator.

Firstly, configure Easy loading in your primary function before running your app:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
      builder: (BuildContext context, Widget child) {
        return FlutterEasyLoading(
          child: MyApp(),
        );
      },
    ),
  );
}

Please note that you must wrap the EasyLoading widget below the MaterialApp .

Here's a simple implementation of your main App:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Easyloading"),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show Loader'),
            onPressed: () {
              EasyLoading.show(status: 'loading...');
              // Perform your task and then hide loader
              Future.delayed(Duration(seconds: 3), () {
                EasyLoading.dismiss();
              });
            },
          ),
        ),
      ),
    );
  }
}

The EasyLoading.show(status: 'loading...') line will display the loading indicator on the screen with the status as 'loading...', and the EasyLoading.dismiss() command will close the overlay after the task is completed.

Remember that these are just simple loading indicators, but Easyloading allows you to customize and create your progress indicator.

Customizing Loading Indicators with Flutter Easyloading

Part of the beauty of Flutter Easyloading is the vast extent to which loading indicators can be customized. From the loading animations to the water-like effect, it provides a flexible mechanism to create more engaging loading instances.

First, follow the steps mentioned in the earlier sections to install and import the package. Next, use the available EasyLoading properties to customize your indicators. Let's imagine we want a more fascinative loading toast widget for the Flutter app; the code snippet below shows you how to implement this:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:flutter_easyloading/flutter_easyloading.dart';

void main() {
 runApp(
   MaterialApp(
     home: MyApp(),
     builder: (BuildContext context, Widget child) {
       EasyLoading.instance
         ..displayDuration = const Duration(milliseconds: 2000)
         ..indicatorType = EasyLoadingIndicatorType.fadingCircle
         ..loadingStyle = EasyLoadingStyle.custom
         ..indicatorSize = 45.0
         ..radius = 10.0
         ..progressColor = Colors.yellow
         ..backgroundColor = Colors.green
         ..indicatorColor = Colors.yellow
         ..textColor = Colors.yellow
         ..maskColor = Colors.blue.withOpacity(0.5)
         ..userInteractions = false;

       return FlutterEasyLoading(child: child);
     },
   ),
 );
}

In the example above, you can notice how cleanly and comfortably you can adapt the look and feel of your loading widget by changing the properties of EasyLoading.instance.

Choosing different indicatorType values will present you with more IndicatorType options. The progressColor, backgroundColor, indicatorColor, and textColor values are pretty straightforward - they set the colors for the corresponding components.

Implementing Circular Progress Indicator with Flutter Easyloading

A special mention goes to the circular progress indicator among the various loading indicators the flutter_easyloading package offers. Whether you're waiting for a file to download or waiting for a network request, displaying a circular progress bar enhances the user experience, making the wait less frustrating.

With Flutter Easyloading, we have several style options for building circular progress indicators. Let's see how we can implement a primary circular progress indicator:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: EasyLoading.init(),
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: RaisedButton(
            onPressed: () async {
              EasyLoading.showProgress(0.3, status: "loading...");
              await Future.delayed(const Duration(seconds: 5));
              EasyLoading.showProgress(0.7, status: 'downloading...');
              await Future.delayed(const Duration(seconds: 5));
              EasyLoading.showProgress(1.0, status: 'Success!');
              await Future.delayed(const Duration(seconds: 2));
              EasyLoading.dismiss();
            },
            child: Text('Show Progress'),
          ),
        ),
      ),
    );
  }
}

The EasyLoading.showProgress function displays a circular progress indicator with a custom progress and status display, while the EasyLoading.dismiss function closes the indicator.

However, there's a lot more to create with Flutter Easyloading. With some creativity and bending code, you can create outstanding and fully customizable circular progress indicators that enhance user experiences and blend perfectly with your application.

Creating a Custom Flutter Loading Widget With Flutter Easyloading

Moving beyond simple indicators, the Flutter Easyloading package provides the tools to create your loading widget. This is particularly useful when your app has a particular design guideline or wants to display more than just a loading status.

Creating your loading widget is as simple as the other operations we have done before and gives you additional control over how your app interacts with the user. Here's an example of creating a custom loading widget:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (BuildContext context, Widget child) {
        EasyLoading.instance
            ..indicatorWidget = Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 150,
                  height: 90,
                  decoration: BoxDecoration(
                    color: Colors.teal,
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Text(
                        'Loading...',
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            )
            ..userInteractions = false;

        return FlutterEasyLoading(child: child);
      },
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Creating Custom Loading Widget'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              EasyLoading.show();
              Future.delayed(const Duration(milliseconds: 2000), () {
                EasyLoading.dismiss();
              });
            },
            child: const Text('Show Custom Loader!'),
          ),
        ),
      ),
    );
  }
}

In this example, we define an entirely new widget that animates a circular progress bar and displays a text status within a styled container. You can replace this setup with any Widget that suits your needs.

By creating custom loading widgets, you can provide richer feedback to your users, control user interactions effectively, and highlight the uniqueness of your app.

Craft Flawless User Journeys with Flutter Easyloading

Interactive and practical user interfacing separates the wheat from the chaff in today's flood of mobile applications. To stay one step ahead, you must ensure your application is seamless, responsive, and engaging. Loading times are a crucial component of this, as leaving a user confused during a more extended asynchronous operation can lead to dissatisfaction.

Fortunately, with flutter_easyloading , you possess a magical tool that can transform the loading experience from dull to delightful. Whether it's a simple full-screen loader, a circular progress bar, or a fully customized loading widget that matches the aesthetics of your app, flutter_easyloading has got you covered.

By adequately employing this package, you can maintain a seamless user experience, even during the most data-intensive operations. This guide walked you through the process from installing the Flutter plugin and implementing your first loader to crafting fully customized loaders.

Happy loading!