flutter_app_loading_indicator 0.0.3 copy "flutter_app_loading_indicator: ^0.0.3" to clipboard
flutter_app_loading_indicator: ^0.0.3 copied to clipboard

A package for custom loading indicator for app, you can also add lottie or app logo

AppLoading #

pub package license AppLoading Demo

A customizable, easy-to-use loading overlay for Flutter applications using Lottie animations.

Features #

  • 🎭 Lottie animation support for visually appealing loading indicators
  • 🎨 Customizable background color for the overlay
  • 🔄 Singleton pattern for consistent usage across your app
  • 🚀 Simple show/dismiss API with BuildContext extensions for ease of use
  • 🛡️ Handles edge cases like multiple show calls or dismissing non-existent overlays
  • 📏 Adjustable animation size

Getting started #

To use this package, add app_loading as a dependency in your pubspec.yaml file:

dependencies:
  app_loading: ^1.0.0

Then, run:

flutter pub get

You'll also need to add your Lottie animation file to your pubspec.yaml:

assets:
  - assets/your_loading_animation.json

Usage #

Initialization #

First, initialize AppLoading in your main.dart file:

import 'package:app_loading/app_loading.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());

///Initialise loader
 AppLoading.initialize(
    lottieAssetName: 'assets/your_loading_animation.json',
    backgroundColor: Colors.black.withOpacity(0.5),
  );
}

Showing the loading overlay #

You can show the loading overlay from anywhere in your app using the BuildContext extension:

context.showLoading();

If you need to customize the size of the Lottie animation:

context.showLoading(width: 200, height: 200);

Dismissing the loading overlay #

To dismiss the loading overlay:

context.dismissLoading();

Example #

Here's a simple example of how to use AppLoading in a button press:

import 'package:flutter/material.dart';
import 'package:app_loading/app_loading.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AppLoading Example')),
      body: Center(
        child: ElevatedButton(
          child: Text('Load Data'),
          onPressed: () async {
            context.showLoading();
            try {
              await Future.delayed(Duration(seconds: 3)); // Simulating an async operation
              // Your actual data loading logic here
            } finally {
              context.dismissLoading();
            }
          },
        ),
      ),
    );
  }
}

Advanced Usage #

Custom Initialization #

You can customize the AppLoading instance further by passing additional parameters during initialization:

AppLoading.initialize(
  lottieAssetName: 'assets/your_loading_animation.json',
  backgroundColor: Colors.blue.withOpacity(0.3),
  defaultWidth: 150,
  defaultHeight: 150,
);

Checking Overlay Status #

You can check if the overlay is currently visible:

bool isVisible = AppLoading.instance.isOverlayVisible;

Troubleshooting #

If you encounter issues, ensure that:

  1. You've properly initialized AppLoading in your main() function.
  2. Your Lottie asset is correctly referenced in your pubspec.yaml file.
  3. You're calling showLoading() and dismissLoading() on a valid BuildContext.

Contributing #

Contributions are welcome! If you encounter any bugs or have feature requests, please file an issue on the GitHub repository.

For substantial changes, please open an issue first to discuss what you would like to change. Ensure to update tests as appropriate.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments #


Made with ❤️ by Abhishek Kumar

0
likes
110
pub points
0%
popularity

Publisher

unverified uploader

A package for custom loading indicator for app, you can also add lottie or app logo

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, lottie

More

Packages that depend on flutter_app_loading_indicator