doc : CoreLoadingIndicator and CoreLoadingOverlay

This commit is contained in:
2025-10-13 16:11:05 +03:30
parent ae022a5725
commit 4da738eef6
5 changed files with 105 additions and 33 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

View File

@@ -25,12 +25,32 @@ class HomePage extends GetView<HomeLogic> {
SizedBox(height: 8.h),
WidelyUsedWidget(),
SizedBox(height: 20),
Wrap(
spacing: 8,
children: [
buildColumn(CoreLoadingIndicator(), 'CoreLoadingIndicator'),
buildColumn(CoreLoadingIndicator.linear(), 'CoreLoadingIndicator.linear'),
buildColumn(CoreLoadingIndicator.lottie(), ' CoreLoadingIndicator.lottie'),
buildColumn(CoreLoadingIndicator.small(), ' CoreLoadingIndicator.small'),
buildColumn(CoreLoadingIndicator.cupertino(), 'CoreLoadingIndicator.cupertino'),
],
),
],
),
),
);
}
Widget buildColumn(Widget widget, String title) {
return Container(
height: 70.h,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
spacing: 8, children: [widget, Text(title)]));
}
InkWell mainInformation() {
return InkWell(
onTap: () {

View File

@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:rasadyar_core/core.dart';
class BasePage extends GetView<BaseLogic> {
const BasePage({
super.key,

View File

@@ -2,14 +2,68 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:rasadyar_core/core.dart';
///Documentation
/// A unified loading indicator widget with multiple variants and customization options
/// This widget provides consistent loading states across the entire app with
/// support for different variants, sizes, colors, and text labels.
/// Usage:
/// ```dart
/// CoreLoadingIndicator(
/// variant: CoreLoadingVariant.material,
/// size: CoreLoadingSize.medium,
/// color: Colors.blue,
/// label: 'Loading...',
/// )
/// ```
/// or use predefined constructors:
/// ```dart
/// CoreLoadingIndicator.small(color: Colors.red)
/// CoreLoadingIndicator.cupertino(size: CoreLoadingSize.large)
/// CoreLoadingIndicator.linear(value: 0.5)
/// CoreLoadingIndicator.lottie(size: CoreLoadingSize.extraLarge, label: 'Please wait')
/// ```
/// or show a full-screen overlay:
/// ```dart
/// CoreLoadingOverlay.show(context)
/// ```
/// or hide the overlay:
/// ```dart
/// CoreLoadingOverlay.hide(context)
/// ```
/// Parameters:
/// - variant: The type of loading indicator (material, cupertino, linear, lottie
/// - size: Preset sizes (small, medium, large, extraLarge)
/// - width, height: Custom dimensions (overrides size preset)
/// - color: Color of the indicator
/// - value: Progress value for determinate indicators (0.0 to 1.0
/// - strokeWidth: Stroke width for circular indicators
/// - label: Optional text label below the indicator
/// - labelStyle: Text style for the label
/// - labelSpacing: Spacing between indicator and label
/// - labelAlignment: Alignment of the label relative to the indicator
/// - backgroundColor: Background color for overlay
/// - barrierDismissible: Whether the overlay blocks user interaction
/// Note: Requires `lottie` package for Lottie animations
/// Example Lottie asset can be found in `assets/animations/loading.json`
/// Make sure to add it to your pubspec.yaml
/// ```yaml
/// assets:
/// - assets/animations/loading.json
/// ```
/// see widget in this link:
/// https://github.com/mirani95/rasadyarApp/blob/develop/doc/CoreLoadingIndicator.png
/// Loading indicator variant types
enum CoreLoadingVariant {
/// Material Design circular progress indicator
material,
/// iOS style activity indicator
cupertino,
/// Custom Lottie animation
lottie,
/// Linear progress indicator
linear,
}
@@ -18,49 +72,52 @@ enum CoreLoadingVariant {
enum CoreLoadingSize {
/// Small - 16x16
small,
/// Medium - 24x24 (default)
medium,
/// Large - 32x32
large,
/// Extra large - 48x48
extraLarge,
}
/// A unified loading indicator widget that replaces inconsistent loading patterns
///
///
/// This widget provides consistent loading states across the entire app with
/// support for different variants, sizes, colors, and text labels.
class CoreLoadingIndicator extends StatelessWidget {
/// Loading indicator variant
final CoreLoadingVariant variant;
/// Size preset
final CoreLoadingSize size;
/// Custom width (overrides size preset)
final double? width;
/// Custom height (overrides size preset)
final double? height;
/// Indicator color
final Color? color;
/// Progress value for determinate indicators (0.0 to 1.0)
final double? value;
/// Stroke width for circular indicators
final double? strokeWidth;
/// Loading text label
final String? label;
/// Text style for label
final TextStyle? labelStyle;
/// Spacing between indicator and label
final double labelSpacing;
/// Label position relative to indicator
final CrossAxisAlignment labelAlignment;
@@ -164,7 +221,7 @@ class CoreLoadingIndicator extends StatelessWidget {
Widget _buildIndicator() {
final indicatorSize = _indicatorSize;
switch (variant) {
case CoreLoadingVariant.material:
return SizedBox(
@@ -176,7 +233,7 @@ class CoreLoadingIndicator extends StatelessWidget {
valueColor: AlwaysStoppedAnimation<Color>(_indicatorColor),
),
);
case CoreLoadingVariant.cupertino:
return SizedBox(
width: indicatorSize.width,
@@ -186,7 +243,7 @@ class CoreLoadingIndicator extends StatelessWidget {
radius: indicatorSize.width * 0.4,
),
);
case CoreLoadingVariant.linear:
return SizedBox(
width: width ?? 200.0,
@@ -197,7 +254,7 @@ class CoreLoadingIndicator extends StatelessWidget {
valueColor: AlwaysStoppedAnimation<Color>(_indicatorColor),
),
);
case CoreLoadingVariant.lottie:
try {
return Assets.anim.loading.lottie(
@@ -220,12 +277,10 @@ class CoreLoadingIndicator extends StatelessWidget {
Widget _buildLabel() {
if (label == null) return const SizedBox.shrink();
return Text(
label!,
style: labelStyle ?? AppFonts.yekan14.copyWith(
color: AppColor.textColor,
),
style: labelStyle ?? AppFonts.yekan14.copyWith(color: AppColor.textColor),
textAlign: TextAlign.center,
);
}
@@ -234,11 +289,11 @@ class CoreLoadingIndicator extends StatelessWidget {
Widget build(BuildContext context) {
final indicator = _buildIndicator();
final labelWidget = _buildLabel();
if (label == null) {
return indicator;
}
if (variant == CoreLoadingVariant.linear) {
return Column(
crossAxisAlignment: labelAlignment,
@@ -250,7 +305,7 @@ class CoreLoadingIndicator extends StatelessWidget {
],
);
}
return Column(
crossAxisAlignment: labelAlignment,
mainAxisSize: MainAxisSize.min,
@@ -267,18 +322,16 @@ class CoreLoadingIndicator extends StatelessWidget {
class CoreLoadingOverlay extends StatelessWidget {
/// Loading indicator to display
final CoreLoadingIndicator indicator;
/// Background color of the overlay
final Color backgroundColor;
/// Whether the overlay should block user interaction
final bool barrierDismissible;
const CoreLoadingOverlay({
super.key,
this.indicator = const CoreLoadingIndicator.lottie(
label: 'در حال بارگذاری...',
),
this.indicator = const CoreLoadingIndicator.lottie(label: 'در حال بارگذاری...'),
this.backgroundColor = Colors.black54,
this.barrierDismissible = false,
});
@@ -290,7 +343,7 @@ class CoreLoadingOverlay extends StatelessWidget {
child: Center(child: indicator),
);
}
/// Shows a loading overlay on top of current screen
static void show(
BuildContext context, {
@@ -303,17 +356,15 @@ class CoreLoadingOverlay extends StatelessWidget {
barrierDismissible: barrierDismissible,
barrierColor: Colors.transparent,
builder: (context) => CoreLoadingOverlay(
indicator: indicator ?? const CoreLoadingIndicator.lottie(
label: 'در حال بارگذاری...',
),
indicator: indicator ?? const CoreLoadingIndicator.lottie(label: 'در حال بارگذاری...'),
backgroundColor: backgroundColor,
barrierDismissible: barrierDismissible,
),
);
}
/// Hides the currently displayed loading overlay
static void hide(BuildContext context) {
Navigator.of(context).pop();
}
}
}