91 lines
3.0 KiB
Dart
91 lines
3.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../theme/app_colors.dart';
|
|
|
|
class GradientButton extends StatelessWidget {
|
|
final String text;
|
|
final VoidCallback? onPressed;
|
|
final double width;
|
|
final double height;
|
|
final bool isLoading;
|
|
|
|
const GradientButton({
|
|
super.key,
|
|
required this.text,
|
|
this.onPressed,
|
|
this.width = double.infinity,
|
|
this.height = 56.0,
|
|
this.isLoading = false,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// Determine if button is disabled strictly by onPressed being null
|
|
// But we still want to show gradient for disabled state? Usually disabled is grey.
|
|
// Let's stick to the design where it might just opacity down.
|
|
final bool isDisabled = onPressed == null || isLoading;
|
|
|
|
return Opacity(
|
|
opacity: isDisabled ? 0.7 : 1.0,
|
|
child: Container(
|
|
width: width,
|
|
height: height,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(height / 2),
|
|
gradient: AppColors.btnPrimaryGradient,
|
|
boxShadow: [
|
|
// 0 4px 20px rgba(99, 102, 241, 0.4)
|
|
BoxShadow(
|
|
color: const Color(0xFF6366F1).withOpacity(0.4),
|
|
offset: const Offset(0, 4),
|
|
blurRadius: 20,
|
|
),
|
|
// 0 0 40px rgba(139, 92, 246, 0.2)
|
|
BoxShadow(
|
|
color: const Color(0xFF8B5CF6).withOpacity(0.2),
|
|
offset: const Offset(0, 0),
|
|
blurRadius: 40,
|
|
),
|
|
// inset 0 1px 0 rgba(255, 255, 255, 0.2) -> Not directly supported in simple BoxShadow
|
|
// can use a top border or inner shadow container trick if needed.
|
|
// For now, these outer shadows are sufficient for the "Glow".
|
|
],
|
|
),
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
onTap: isDisabled ? null : onPressed,
|
|
borderRadius: BorderRadius.circular(height / 2),
|
|
splashColor: Colors.white.withOpacity(0.2),
|
|
highlightColor: Colors.white.withOpacity(0.1),
|
|
child: Center(
|
|
child: isLoading
|
|
? const SizedBox(
|
|
width: 24,
|
|
height: 24,
|
|
child: CircularProgressIndicator(
|
|
color: Colors.white,
|
|
strokeWidth: 2.5,
|
|
),
|
|
)
|
|
: Text(
|
|
text,
|
|
style: Theme.of(context).textTheme.labelLarge?.copyWith(
|
|
fontSize: 17,
|
|
fontWeight: FontWeight.w600,
|
|
shadows: [
|
|
const Shadow(
|
|
offset: Offset(0, 1),
|
|
blurRadius: 2,
|
|
color: Colors.black12,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|