Files
worker/lib/shared/widgets/gradient_card.dart
2025-11-07 11:52:06 +07:00

272 lines
6.8 KiB
Dart

/// Gradient Card Widget
///
/// Reusable card with gradient background used for member cards
/// and other gradient-based UI elements.
library;
import 'package:flutter/material.dart';
import '../../core/constants/ui_constants.dart';
/// Card with gradient background
class GradientCard extends StatelessWidget {
final Widget child;
final Gradient gradient;
final double borderRadius;
final double elevation;
final EdgeInsets padding;
final double? width;
final double? height;
final VoidCallback? onTap;
final List<BoxShadow>? shadows;
const GradientCard({
super.key,
required this.child,
required this.gradient,
this.borderRadius = AppRadius.card,
this.elevation = AppElevation.card,
this.padding = const EdgeInsets.all(AppSpacing.md),
this.width,
this.height,
this.onTap,
this.shadows,
});
@override
Widget build(BuildContext context) {
final cardContent = Container(
width: width,
height: height,
padding: padding,
decoration: BoxDecoration(
gradient: gradient,
borderRadius: BorderRadius.circular(borderRadius),
boxShadow:
shadows ??
[
BoxShadow(
color: Colors.black.withOpacity(0.1 * (elevation / 4)),
blurRadius: elevation,
offset: Offset(0, elevation / 2),
),
],
),
child: child,
);
if (onTap != null) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(borderRadius),
child: cardContent,
);
}
return cardContent;
}
}
/// Diamond tier gradient card
class DiamondGradientCard extends StatelessWidget {
final Widget child;
final double borderRadius;
final double elevation;
final EdgeInsets padding;
final double? width;
final double? height;
final VoidCallback? onTap;
const DiamondGradientCard({
super.key,
required this.child,
this.borderRadius = MemberCardSpecs.borderRadius,
this.elevation = MemberCardSpecs.elevation,
this.padding = MemberCardSpecs.padding,
this.width = MemberCardSpecs.width,
this.height = MemberCardSpecs.height,
this.onTap,
});
@override
Widget build(BuildContext context) {
return GradientCard(
gradient: const LinearGradient(
colors: [Color(0xFF4A00E0), Color(0xFF8E2DE2)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: borderRadius,
elevation: elevation,
padding: padding,
width: width,
height: height,
onTap: onTap,
child: child,
);
}
}
/// Platinum tier gradient card
class PlatinumGradientCard extends StatelessWidget {
final Widget child;
final double borderRadius;
final double elevation;
final EdgeInsets padding;
final double? width;
final double? height;
final VoidCallback? onTap;
const PlatinumGradientCard({
super.key,
required this.child,
this.borderRadius = MemberCardSpecs.borderRadius,
this.elevation = MemberCardSpecs.elevation,
this.padding = MemberCardSpecs.padding,
this.width = MemberCardSpecs.width,
this.height = MemberCardSpecs.height,
this.onTap,
});
@override
Widget build(BuildContext context) {
return GradientCard(
gradient: const LinearGradient(
colors: [Color(0xFF7F8C8D), Color(0xFFBDC3C7)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: borderRadius,
elevation: elevation,
padding: padding,
width: width,
height: height,
onTap: onTap,
child: child,
);
}
}
/// Gold tier gradient card
class GoldGradientCard extends StatelessWidget {
final Widget child;
final double borderRadius;
final double elevation;
final EdgeInsets padding;
final double? width;
final double? height;
final VoidCallback? onTap;
const GoldGradientCard({
super.key,
required this.child,
this.borderRadius = MemberCardSpecs.borderRadius,
this.elevation = MemberCardSpecs.elevation,
this.padding = MemberCardSpecs.padding,
this.width = MemberCardSpecs.width,
this.height = MemberCardSpecs.height,
this.onTap,
});
@override
Widget build(BuildContext context) {
return GradientCard(
gradient: const LinearGradient(
colors: [Color(0xFFf7b733), Color(0xFFfc4a1a)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: borderRadius,
elevation: elevation,
padding: padding,
width: width,
height: height,
onTap: onTap,
child: child,
);
}
}
/// Animated gradient card with shimmer effect
class ShimmerGradientCard extends StatefulWidget {
final Widget child;
final Gradient gradient;
final double borderRadius;
final double elevation;
final EdgeInsets padding;
final double? width;
final double? height;
final Duration shimmerDuration;
const ShimmerGradientCard({
super.key,
required this.child,
required this.gradient,
this.borderRadius = AppRadius.card,
this.elevation = AppElevation.card,
this.padding = const EdgeInsets.all(AppSpacing.md),
this.width,
this.height,
this.shimmerDuration = AppDuration.shimmer,
});
@override
State<ShimmerGradientCard> createState() => _ShimmerGradientCardState();
}
class _ShimmerGradientCardState extends State<ShimmerGradientCard>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: widget.shimmerDuration,
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return ShaderMask(
shaderCallback: (bounds) {
return LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.white.withOpacity(0.1),
Colors.white.withOpacity(0.3),
Colors.white.withOpacity(0.1),
],
stops: [
_controller.value - 0.3,
_controller.value,
_controller.value + 0.3,
],
).createShader(bounds);
},
blendMode: BlendMode.srcATop,
child: GradientCard(
gradient: widget.gradient,
borderRadius: widget.borderRadius,
elevation: widget.elevation,
padding: widget.padding,
width: widget.width,
height: widget.height,
child: widget.child,
),
);
},
);
}
}