runable
This commit is contained in:
Phuoc Nguyen
270
lib/shared/widgets/gradient_card.dart
Normal file
270
lib/shared/widgets/gradient_card.dart
Normal file
@@ -0,0 +1,270 @@
|
||||
/// 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,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user