LoadingDialog class

A loading dialog widget that displays an animated loading indicator.

This widget provides a visual feedback mechanism to indicate that an operation is in progress. It uses Lottie animations for smooth, engaging loading animations that enhance the user experience.

Features

• Animated Loading: Uses Lottie animations for smooth loading indicators
• Consistent Design: Follows SDK design patterns and styling
• Automatic Logging: Logs when the dialog is displayed for debugging
• Lightweight: Minimal resource usage during loading states
• Customizable Size: Configurable dimensions for different use cases

Usage Example

// Show loading dialog
showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) => const LoadingDialog(),
);

// Hide loading dialog
Navigator.of(context).pop();

// Or use with async operations
Future<void> processPayment() async {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => const LoadingDialog(),
  );

  try {
    await paymentService.processPayment();
  } finally {
    Navigator.of(context).pop(); // Hide loading dialog
  }
}

Animation Details

The loading animation is loaded from the SDK's assets:

• Asset Path: lib/assets/json/lottiefiles/app_loader.json
• Package: amwal_pay_sdk
• Format: Lottie JSON animation file
• Style: Consistent with SDK branding and design

Best Practices

When using this loading dialog:

• Set barrierDismissible: false to prevent accidental dismissal
• Always hide the dialog when the operation completes
• Use try-finally blocks to ensure dialog is hidden even on errors
• Consider the loading duration to avoid showing very brief loading states

Accessibility

The loading dialog provides visual feedback but consider:

• Adding screen reader announcements for longer operations
• Providing progress indicators for operations with known duration
• Including cancel options for operations that can be interrupted