buildLoadingOverlay method

@override Widget buildLoadingOverlay({ required Widget child, String? loadingKey = LoadingKey.global, Widget? loadingWidget, Duration timeout = const Duration(seconds: 30), })

Wraps a widget with a loading overlay that can be shown/hidden based on loading state.

Parameters:

• child: The widget to wrap with the loading overlay
• loadingKey: Optional key to manage multiple loading states (defaults to global)
• loadingWidget: Optional custom loading indicator widget

The loading state is managed by CommonBloc and can be controlled using:

// Show loading
bloc.showLoading(key: 'customKey');

// Hide loading
bloc.hideLoading(key: 'customKey');

Example usage:

@override
Widget buildPage(BuildContext context) {
  return buildLoadingOverlay(
    child: Scaffold(
      body: YourContent(),
    ),
    loadingKey: 'customKey',
    loadingWidget: CustomLoadingIndicator(),
  );
}

Features:

• Animated opacity transitions
• Support for multiple loading states
• Custom loading indicator support
• Efficient rebuilds using buildWhen

Implementation

@override
Widget buildLoadingOverlay({
  required Widget child,
  String? loadingKey = LoadingKey.global,
  Widget? loadingWidget,
  Duration timeout = const Duration(seconds: 30),
}) {
  return BlocBuilder<CommonBloc, CommonState>(
    buildWhen: (previous, current) =>
        previous.isLoading(key: loadingKey) !=
        current.isLoading(key: loadingKey),
    builder: (context, state) {
      if (state.isLoading(key: loadingKey)) {
        Future.delayed(timeout, () {
          if (mounted && state.isLoading(key: loadingKey)) {
            hideLoading(key: loadingKey);
          }
        });
      }
      return Stack(
        children: [
          child,
          if (state.isLoading(key: loadingKey))
            AnimatedOpacity(
              opacity: state.isLoading(key: loadingKey) ? 1.0 : 0.0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
              child: loadingWidget ?? buildPageLoading(),
            ),
        ],
      );
    },
  );
}