flutter easyloading

A clean and lightweight Loading widget for Flutter App, easy to use without context.

flutter easyloading

gif02

gif03

Installing

Add this to your package’s pubspec.yaml file:

dependencies:
  flutter_easyloading: ^1.0.1

Import

import 'package:flutter_easyloading/flutter_easyloading.dart';

How to use

first, warp your app widget with FlutterEasyLoading:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// child should be [MaterialApp] or [CupertinoApp].
    /// make sure that loading can be displayed in front of all other widgets
    return FlutterEasyLoading(
      child: MaterialApp(
        title: 'Flutter EasyLoading',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter EasyLoading'),
      ),
    );
  }
}

then, enjoy yourself:

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

EasyLoading.showSuccess('Great Success!');

EasyLoading.showError('Failed with Error');

EasyLoading.showInfo('Useful Information.');

EasyLoading.dismiss();

Custom

/// loading style, default [EasyLoadingStyle.dark].
EasyLoadingStyle loadingStyle;

/// loading indicator type, default [EasyLoadingIndicatorType.fadingCircle].
EasyLoadingIndicatorType indicatorType;

/// loading mask type, default [EasyLoadingMaskType.none].
EasyLoadingMaskType maskType;

/// textAlign of status, default [TextAlign.center].
TextAlign textAlign;

/// content padding of loading.
EdgeInsets contentPadding;

/// padding of [status].
EdgeInsets textPadding;

/// size of indicator, default 40.0.
double indicatorSize;

/// radius of loading, default 5.0.
double radius;

/// fontSize of loading, default 15.0.
double fontSize;

/// display duration of [showSuccess] [showError] [showInfo], default 2000ms.
Duration displayDuration;

/// color of loading status, only used for [EasyLoadingStyle.custom].
Color textColor;

/// color of loading indicator, only used for [EasyLoadingStyle.custom].
Color indicatorColor;

/// background color of loading, only used for [EasyLoadingStyle.custom].
Color backgroundColor;

/// mask color of loading, only used for [EasyLoadingMaskType.custom].
Color maskColor;

/// should allow user interactions while loading is displayed.
bool userInteractions;

/// success widget of loading
Widget successWidget;

/// error widget of loading
Widget errorWidget;

/// info widget of loading
Widget infoWidget;

because EasyLoading is a singleton, so you can custom loading style any where like this:

EasyLoading.instance
  ..displayDuration = const Duration(milliseconds: 2000)
  ..indicatorType = EasyLoadingIndicatorType.fadingCircle
  ..loadingStyle = EasyLoadingStyle.dark
  ..indicatorSize = 45.0
  ..radius = 10.0
  ..backgroundColor = Colors.green
  ..indicatorColor = Colors.yellow
  ..textColor = Colors.yellow
  ..maskColor = Colors.blue.withOpacity(0.5)
  ..userInteractions = true;

more indicatorType can see in flutter_spinkit showcase

Todo

  • [ ] add progress indicator
  • [ ] add custom animation

GitHub

Download the full project for this post from the following button

This source is fully free for all time

Download as zip

Comments are closed.

You're Offline!

Top