Exploring Top Loading, Refresh, and Progress Indicator Packages

An indicator within a Flutter app serves as a small animated graphical element, often referred to as a spinner. Its purpose is to convey the status of a specific task or process. This could involve tracking the progress of actions like network requests, asset loading, image loading, or other ongoing tasks. These indicators may also incorporate a text label to offer supplementary information about the application’s status or the ongoing process.

In scenarios where a Flutter app is engaged in asynchronous operations, it becomes crucial to prevent users from inadvertently interacting with the app while these operations are underway. While some operations might conclude quickly, others could take longer due to factors such as network connectivity. To avoid unintended user actions, such as double-tapping buttons or altering inputs, a loading indicator can be employed. This type of indicator is usually displayed as an overlay, often referred to as a Heads-up-display (HUD) indicator.

Functionalities of various indicator types available in Flutter include:

1. Loading Indicator: A loading indicator typically appears as a circular or linear animation. It is employed during time-consuming tasks to provide users with visual feedback that work is in progress. Alongside the animation, a descriptive text like “Loading” can also be displayed.
2. Progress Indicator: Progress indicators share similarities with loading indicators but offer more information. They not only signify ongoing processes but also communicate specifics like task progress percentages, stages of progress, and other relevant details. Furthermore, progress indicators can convey whether users are allowed to navigate away from the current screen. For instance, in a hyperlocal delivery app, users may be permitted to move to the next screen after completing the payment step, even as the progress indicator keeps them updated.
3. Refresh Indicator: When users execute a swipe-to-refresh gesture, often by swiping vertically, a distinct progress bar appears. This progress indicator, known as a refresh indicator, is employed to provide visual feedback as a callback method refreshes data in response to the user’s action.

By utilizing these different types of indicators, Flutter developers can enhance the user experience by providing real-time feedback on ongoing operations and preventing accidental user interactions during critical processes.

Top Packages

1. Flutter EasyLoading

A clean and lightweight loading/toast widget for Flutter, Easy to use without context, Support iOS, Android and Web

Live Preview : https://nslogx.github.io/flutter_easyloading

Pub.dev link : https://pub.dev/packages/flutter_easyloading

To Install

flutter pub add flutter_easyloading

dependencies:
  flutter_easyloading: ^3.0.5

Import it

Now in your Dart code, you can use:

import 'package:flutter_easyloading/flutter_easyloading.dart';

How to use

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EasyLoading',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter EasyLoading'),
      builder: EasyLoading.init(),
    );
  }
}

EasyLoading.show(status: 'loading...');

EasyLoading.showProgress(0.3, status: 'downloading...');

EasyLoading.showSuccess('Great Success!');

EasyLoading.showError('Failed with Error');

EasyLoading.showInfo('Useful Information.');

EasyLoading.showToast('Toast');

EasyLoading.dismiss();

2. loading_indicator

A collection loading animations written in pure dart. Out of the box, no extra dependency.

Pub.dev link : https://pub.dev/packages/loading_indicator

Demo : https://tinoguo.github.io/loading_indicator/

To Install

flutter pub add loading_indicator

dependencies:
  loading_indicator: ^3.1.1

Import it

import 'package:loading_indicator/loading_indicator.dart';

How to use

LoadingIndicator(
    indicatorType: Indicator.ballPulse, /// Required, The loading type of the widget
    colors: const [Colors.white],       /// Optional, The color collections
    strokeWidth: 2,                     /// Optional, The stroke of the line, only applicable to widget which contains line
    backgroundColor: Colors.black,      /// Optional, Background of the widget
    pathBackgroundColor: Colors.black   /// Optional, the stroke backgroundColor
)

3. loading_animation_widget

Loading animation or loading spiner or loader. It’s used to show loading animation when the app is in loading state or something is processing for uncertain time.

Pub.dev Link : https://pub.dev/packages/loading_animation_widget

To Install

flutter pub add loading_animation_widget

dependencies:
  loading_animation_widget: ^1.2.0+4

Import it

import 'package:loading_animation_widget/loading_animation_widget.dart';

How to use

Scaffold(
    body: Center(
        child: LoadingAnimationWidget.twistingDots(
          leftDotColor: const Color(0xFF1A1A3F),
          rightDotColor: const Color(0xFFEA3799),
          size: 200,
        ),
      ),

4. step_progress_indicator

Bar indicator made of a series of selected and unselected steps

Pub.dev link : https://pub.dev/packages/step_progress_indicator

To Install

flutter pub add step_progress_indicator

dependencies:
  step_progress_indicator: ^1.0.2

Import it

import 'package:step_progress_indicator/step_progress_indicator.dart';

How to use

StepProgressIndicator(
    totalSteps: 10,
    currentStep: 6,
    selectedColor: Colors.red,
    unselectedColor: Colors.yellow,
)