272 lines
6.8 KiB
Dart
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.withValues(alpha: 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.withValues(alpha: 0.1),
|
|
Colors.white.withValues(alpha: 0.3),
|
|
Colors.white.withValues(alpha: 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,
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|