flutter_app_loading_indicator 0.0.1 flutter_app_loading_indicator: ^0.0.1 copied to clipboard
A package for custom loading indicator for app, you can also add lottie or app logo
AppLoading #
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() {
AppLoading.initialize(
lottieAssetName: 'assets/your_loading_animation.json',
backgroundColor: Colors.black.withOpacity(0.5),
);
runApp(MyApp());
}
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:
- You've properly initialized AppLoading in your
main()
function. - Your Lottie asset is correctly referenced in your
pubspec.yaml
file. - You're calling
showLoading()
anddismissLoading()
on a validBuildContext
.
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 #
- Lottie for Flutter for providing the Lottie animation support.
- Flutter for the amazing cross-platform framework.
Made with ❤️ by Abhishek Kumar