loading_provider 0.0.9

Flutter package for easily displaying loading overlays with customizable configurations.

loading_provider

Flutter package for easily displaying loading overlays with customizable configurations.

1. Import the package:

import 'package:loading_provider/loading_provider.dart';

2. Wrap your MaterialApp or root widget with LoadingProvider:

void main() {
  runApp(
    LoadingProvider(
      appBuilder: (context, builder) => MaterialApp(
        home: const Home(),
        builder: builder,
      ),
      loadings: {  // Provide loading configurations with name to use later to show different loadings.
        'loading1': LoadingConfig(
          backgroundColor: Colors.blue.withOpacity(0.5),
          widget: const Text('Loading'),
        ),
        // add other loadings
      },
    ),
  );
}

ElevatedButton(
  onPressed: () async {
    var loading = context.loadingController
    loading.on(); // Show loading overlay. It will use default loading
    await Future.delayed(const Duration(seconds: 3));
    loading.off(); // Hide loading overlay
    loading.on('loading1');  // with name to use specific loading provided in [LoadingProvider]
    await Future.delayed(const Duration(seconds: 3));
    loading.off(); // Hide loading overlay
  },
  child: const Text('Loading'),
),

3. Use the LoadingBuilder widget to show loading overlays:

LoadingBuilder(
  config: const LoadingConfig(), // Optional or it will used default loading
  builder: (context, setLoading) {
    return ElevatedButton(
      onPressed: () async {
        setLoading(true); // Show loading overlay
        await Future.delayed(Duration(seconds: 2));
        setLoading(false); // Hide loading overlay
      },
      child: Text('Show Loading'),
    );
  },
);

4. Use the LoadingWidget widget to show loading overlays:

LoadingWidget(
  isLoading: true,
  config: const LoadingConfig(), // Optional or it will used default loading
  child: Text('Loading...'),
);

Customization

You can customize the loading overlay by providing a LoadingConfig object with your desired configurations:

LoadingConfig(
  backgroundColor: Colors.blue.withValues(alpha: 0.5),
  widget: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation(Colors.white),
  ),
)

---

Author

GitHub: Amit Hasan