loading_provider #

Flutter package for easily displaying loading overlays with customizable configurations.

Installation #

Add the following dependency to your pubspec.yaml file:

dependencies:
  loading_provider: ^1.0.0

Usage #

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: {
        'loading1': LoadingConfig(
          backgroundColor: Colors.blue.withOpacity(0.5),
          widget: const Text('Loading'),
        ),
      },
    ),
  );
}

ElevatedButton(
  onPressed: () async {
    var loading = context.loadingController
    loading.on(); // Show loading overlay
    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(
  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,
  child: Text('Loading...'),
);

Customization #

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

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

Author #

GitHub: Amit Hasan