Tuesday, September 26, 2023

Lightweight Loading widget for Flutter App

Most of the users are using default circular progress indicator in their mobile applications for wait or fetch data from server or showing while doing some calculation functions.But we can use some custom animation effects using some third party library called @flutter_easyloading.
For that we need to add flutter_easyloading plugins into pubspec.yaml .Please see the installation section for more details .

Installing

Add following to your package’s pubspec.yaml file:
Check following url to get latest version on Pub and replace below section

dependencies:
  flutter_easyloading: ^1.1.3

After save the @flutter_easyloading packages are automatically downloaded and included into your project.Add this to your package’s pubspec.yaml file:

Import

import 'package:flutter_easyloading/flutter_easyloading.dart';

Example

first, warp your app widget with FlutterEasyLoading:

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

Add following line of code

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

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

EasyLoading.showSuccess('Insertion Success!');

EasyLoading.showError('Failed to insert record');

EasyLoading.showInfo('Information.');

EasyLoading.showToast('Toast');

EasyLoading.dismiss();


Read more about customization about easyloading plugin checkout the below Github url.