doc : CoreLoadingIndicator and CoreLoadingOverlay
This commit is contained in:
BIN
doc/CoreLoadingIndicator.png
Normal file
BIN
doc/CoreLoadingIndicator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
@@ -25,12 +25,32 @@ class HomePage extends GetView<HomeLogic> {
|
|||||||
SizedBox(height: 8.h),
|
SizedBox(height: 8.h),
|
||||||
WidelyUsedWidget(),
|
WidelyUsedWidget(),
|
||||||
SizedBox(height: 20),
|
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() {
|
InkWell mainInformation() {
|
||||||
return InkWell(
|
return InkWell(
|
||||||
onTap: () {
|
onTap: () {
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:rasadyar_core/core.dart';
|
import 'package:rasadyar_core/core.dart';
|
||||||
|
|
||||||
|
|
||||||
class BasePage extends GetView<BaseLogic> {
|
class BasePage extends GetView<BaseLogic> {
|
||||||
const BasePage({
|
const BasePage({
|
||||||
super.key,
|
super.key,
|
||||||
|
|||||||
@@ -2,14 +2,68 @@ import 'package:flutter/cupertino.dart';
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:rasadyar_core/core.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
|
/// Loading indicator variant types
|
||||||
enum CoreLoadingVariant {
|
enum CoreLoadingVariant {
|
||||||
/// Material Design circular progress indicator
|
/// Material Design circular progress indicator
|
||||||
material,
|
material,
|
||||||
|
|
||||||
/// iOS style activity indicator
|
/// iOS style activity indicator
|
||||||
cupertino,
|
cupertino,
|
||||||
|
|
||||||
/// Custom Lottie animation
|
/// Custom Lottie animation
|
||||||
lottie,
|
lottie,
|
||||||
|
|
||||||
/// Linear progress indicator
|
/// Linear progress indicator
|
||||||
linear,
|
linear,
|
||||||
}
|
}
|
||||||
@@ -18,49 +72,52 @@ enum CoreLoadingVariant {
|
|||||||
enum CoreLoadingSize {
|
enum CoreLoadingSize {
|
||||||
/// Small - 16x16
|
/// Small - 16x16
|
||||||
small,
|
small,
|
||||||
|
|
||||||
/// Medium - 24x24 (default)
|
/// Medium - 24x24 (default)
|
||||||
medium,
|
medium,
|
||||||
|
|
||||||
/// Large - 32x32
|
/// Large - 32x32
|
||||||
large,
|
large,
|
||||||
|
|
||||||
/// Extra large - 48x48
|
/// Extra large - 48x48
|
||||||
extraLarge,
|
extraLarge,
|
||||||
}
|
}
|
||||||
|
|
||||||
/// A unified loading indicator widget that replaces inconsistent loading patterns
|
/// A unified loading indicator widget that replaces inconsistent loading patterns
|
||||||
///
|
///
|
||||||
/// This widget provides consistent loading states across the entire app with
|
/// This widget provides consistent loading states across the entire app with
|
||||||
/// support for different variants, sizes, colors, and text labels.
|
/// support for different variants, sizes, colors, and text labels.
|
||||||
class CoreLoadingIndicator extends StatelessWidget {
|
class CoreLoadingIndicator extends StatelessWidget {
|
||||||
/// Loading indicator variant
|
/// Loading indicator variant
|
||||||
final CoreLoadingVariant variant;
|
final CoreLoadingVariant variant;
|
||||||
|
|
||||||
/// Size preset
|
/// Size preset
|
||||||
final CoreLoadingSize size;
|
final CoreLoadingSize size;
|
||||||
|
|
||||||
/// Custom width (overrides size preset)
|
/// Custom width (overrides size preset)
|
||||||
final double? width;
|
final double? width;
|
||||||
|
|
||||||
/// Custom height (overrides size preset)
|
/// Custom height (overrides size preset)
|
||||||
final double? height;
|
final double? height;
|
||||||
|
|
||||||
/// Indicator color
|
/// Indicator color
|
||||||
final Color? color;
|
final Color? color;
|
||||||
|
|
||||||
/// Progress value for determinate indicators (0.0 to 1.0)
|
/// Progress value for determinate indicators (0.0 to 1.0)
|
||||||
final double? value;
|
final double? value;
|
||||||
|
|
||||||
/// Stroke width for circular indicators
|
/// Stroke width for circular indicators
|
||||||
final double? strokeWidth;
|
final double? strokeWidth;
|
||||||
|
|
||||||
/// Loading text label
|
/// Loading text label
|
||||||
final String? label;
|
final String? label;
|
||||||
|
|
||||||
/// Text style for label
|
/// Text style for label
|
||||||
final TextStyle? labelStyle;
|
final TextStyle? labelStyle;
|
||||||
|
|
||||||
/// Spacing between indicator and label
|
/// Spacing between indicator and label
|
||||||
final double labelSpacing;
|
final double labelSpacing;
|
||||||
|
|
||||||
/// Label position relative to indicator
|
/// Label position relative to indicator
|
||||||
final CrossAxisAlignment labelAlignment;
|
final CrossAxisAlignment labelAlignment;
|
||||||
|
|
||||||
@@ -164,7 +221,7 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
|
|
||||||
Widget _buildIndicator() {
|
Widget _buildIndicator() {
|
||||||
final indicatorSize = _indicatorSize;
|
final indicatorSize = _indicatorSize;
|
||||||
|
|
||||||
switch (variant) {
|
switch (variant) {
|
||||||
case CoreLoadingVariant.material:
|
case CoreLoadingVariant.material:
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
@@ -176,7 +233,7 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
valueColor: AlwaysStoppedAnimation<Color>(_indicatorColor),
|
valueColor: AlwaysStoppedAnimation<Color>(_indicatorColor),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
case CoreLoadingVariant.cupertino:
|
case CoreLoadingVariant.cupertino:
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
width: indicatorSize.width,
|
width: indicatorSize.width,
|
||||||
@@ -186,7 +243,7 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
radius: indicatorSize.width * 0.4,
|
radius: indicatorSize.width * 0.4,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
case CoreLoadingVariant.linear:
|
case CoreLoadingVariant.linear:
|
||||||
return SizedBox(
|
return SizedBox(
|
||||||
width: width ?? 200.0,
|
width: width ?? 200.0,
|
||||||
@@ -197,7 +254,7 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
valueColor: AlwaysStoppedAnimation<Color>(_indicatorColor),
|
valueColor: AlwaysStoppedAnimation<Color>(_indicatorColor),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
case CoreLoadingVariant.lottie:
|
case CoreLoadingVariant.lottie:
|
||||||
try {
|
try {
|
||||||
return Assets.anim.loading.lottie(
|
return Assets.anim.loading.lottie(
|
||||||
@@ -220,12 +277,10 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
|
|
||||||
Widget _buildLabel() {
|
Widget _buildLabel() {
|
||||||
if (label == null) return const SizedBox.shrink();
|
if (label == null) return const SizedBox.shrink();
|
||||||
|
|
||||||
return Text(
|
return Text(
|
||||||
label!,
|
label!,
|
||||||
style: labelStyle ?? AppFonts.yekan14.copyWith(
|
style: labelStyle ?? AppFonts.yekan14.copyWith(color: AppColor.textColor),
|
||||||
color: AppColor.textColor,
|
|
||||||
),
|
|
||||||
textAlign: TextAlign.center,
|
textAlign: TextAlign.center,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -234,11 +289,11 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final indicator = _buildIndicator();
|
final indicator = _buildIndicator();
|
||||||
final labelWidget = _buildLabel();
|
final labelWidget = _buildLabel();
|
||||||
|
|
||||||
if (label == null) {
|
if (label == null) {
|
||||||
return indicator;
|
return indicator;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (variant == CoreLoadingVariant.linear) {
|
if (variant == CoreLoadingVariant.linear) {
|
||||||
return Column(
|
return Column(
|
||||||
crossAxisAlignment: labelAlignment,
|
crossAxisAlignment: labelAlignment,
|
||||||
@@ -250,7 +305,7 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return Column(
|
return Column(
|
||||||
crossAxisAlignment: labelAlignment,
|
crossAxisAlignment: labelAlignment,
|
||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
@@ -267,18 +322,16 @@ class CoreLoadingIndicator extends StatelessWidget {
|
|||||||
class CoreLoadingOverlay extends StatelessWidget {
|
class CoreLoadingOverlay extends StatelessWidget {
|
||||||
/// Loading indicator to display
|
/// Loading indicator to display
|
||||||
final CoreLoadingIndicator indicator;
|
final CoreLoadingIndicator indicator;
|
||||||
|
|
||||||
/// Background color of the overlay
|
/// Background color of the overlay
|
||||||
final Color backgroundColor;
|
final Color backgroundColor;
|
||||||
|
|
||||||
/// Whether the overlay should block user interaction
|
/// Whether the overlay should block user interaction
|
||||||
final bool barrierDismissible;
|
final bool barrierDismissible;
|
||||||
|
|
||||||
const CoreLoadingOverlay({
|
const CoreLoadingOverlay({
|
||||||
super.key,
|
super.key,
|
||||||
this.indicator = const CoreLoadingIndicator.lottie(
|
this.indicator = const CoreLoadingIndicator.lottie(label: 'در حال بارگذاری...'),
|
||||||
label: 'در حال بارگذاری...',
|
|
||||||
),
|
|
||||||
this.backgroundColor = Colors.black54,
|
this.backgroundColor = Colors.black54,
|
||||||
this.barrierDismissible = false,
|
this.barrierDismissible = false,
|
||||||
});
|
});
|
||||||
@@ -290,7 +343,7 @@ class CoreLoadingOverlay extends StatelessWidget {
|
|||||||
child: Center(child: indicator),
|
child: Center(child: indicator),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Shows a loading overlay on top of current screen
|
/// Shows a loading overlay on top of current screen
|
||||||
static void show(
|
static void show(
|
||||||
BuildContext context, {
|
BuildContext context, {
|
||||||
@@ -303,17 +356,15 @@ class CoreLoadingOverlay extends StatelessWidget {
|
|||||||
barrierDismissible: barrierDismissible,
|
barrierDismissible: barrierDismissible,
|
||||||
barrierColor: Colors.transparent,
|
barrierColor: Colors.transparent,
|
||||||
builder: (context) => CoreLoadingOverlay(
|
builder: (context) => CoreLoadingOverlay(
|
||||||
indicator: indicator ?? const CoreLoadingIndicator.lottie(
|
indicator: indicator ?? const CoreLoadingIndicator.lottie(label: 'در حال بارگذاری...'),
|
||||||
label: 'در حال بارگذاری...',
|
|
||||||
),
|
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
barrierDismissible: barrierDismissible,
|
barrierDismissible: barrierDismissible,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// Hides the currently displayed loading overlay
|
/// Hides the currently displayed loading overlay
|
||||||
static void hide(BuildContext context) {
|
static void hide(BuildContext context) {
|
||||||
Navigator.of(context).pop();
|
Navigator.of(context).pop();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user