simple_loading 1.0.0
simple_loading: ^1.0.0 copied to clipboard
simple_loading is a simple and customizable Flutter package that helps you easily add various styles of loading indicators (such as Lottie, Circular, Linear) to your app
simple_loading #
A highly customizable and simple Flutter package to display elegant loading indicators and spinners, with support for Lottie animations and standard Flutter widgets.
🚀 Installation #
Add this to your pubspec.yaml:
dependencies:
simple_loading: <latest_version>
Then run:
flutter pub get
📦 Import #
import 'package:simple_loading/simple_loading.dart';
💡 Usage Example #
Basic Lottie Loading #
The default loader is a Lottie animation. It will automatically dismiss after the specified time.
ElevatedButton(
onPressed: () {
SimpleLoading.show(context, seconds: 3);
},
child: const Text('Show Lottie for 3s'),
)
Customizing Loaders #
You can choose from various loading types and customize their properties.
// Show a red circular loader with a custom stroke width
ElevatedButton(
onPressed: () {
SimpleLoading.show(
context,
loadingType: Type.circular,
indicatorColor: Colors.red,
strokeWidth: 8.0,
);
Future.delayed(const Duration(seconds: 3), () => SimpleLoading.close());
},
child: const Text('Show Circular Loader'),
)
// Show a linear loader with a custom color and background
ElevatedButton(
onPressed: () {
SimpleLoading.show(
context,
loadingType: Type.linear,
indicatorColor: Colors.blue,
indicatorBackgroundColor: Colors.yellow.withOpacity(0.5),
);
Future.delayed(const Duration(seconds: 3), () => SimpleLoading.close());
},
child: const Text('Show Linear Loader'),
)
// Show a Cupertino-style loader
ElevatedButton(
onPressed: () {
SimpleLoading.show(context, loadingType: Type.cupertino);
Future.delayed(const Duration(seconds: 3), () => SimpleLoading.close());
},
child: const Text('Show Cupertino Loader'),
)
🛠 Customization Options #
You can customize the loader using the following parameters in SimpleLoading.show():
loadingType: The type of loading indicator (Type.lottie,Type.circular, etc.)lottiePath: Custom path for a Lottie animationsize: Size of the loading containerbackgroundColor: Background color of the loading containerborderRadius: Roundness of the container cornersseconds: Auto-dismiss the loader after this many secondsindicatorColor: Color of thecircular,linear, orcupertinoindicatorsindicatorBackgroundColor: Background color forLinearProgressIndicatorstrokeWidth: Thickness of thecircularindicator's stroke
🔌 Supported Loading Types #
The package includes a built-in Type enum for easy selection:
Type.lottie
Type.circular
Type.linear
Type.cupertino
Type.refresh
📂 Example with Custom Lottie Animation #
📂 Add Assets #
Make sure to include your custom Lottie asset in pubspec.yaml:
flutter:
assets:
- assets/lottie/your_custom_animation.json
💡 Usage #
Then, provide the custom path when calling SimpleLoading.show():
SimpleLoading.show(
context,
lottiePath: 'assets/lottie/your_custom_animation.json',
);