first commit
This commit is contained in:
DahoudG
291
unionflow-mobile-apps/lib/shared/theme/app_theme.dart
Normal file
291
unionflow-mobile-apps/lib/shared/theme/app_theme.dart
Normal file
@@ -0,0 +1,291 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
class AppTheme {
|
||||
// Couleurs principales UnionFlow
|
||||
static const Color primaryColor = Color(0xFF2196F3);
|
||||
static const Color primaryLight = Color(0xFF64B5F6);
|
||||
static const Color primaryDark = Color(0xFF1976D2);
|
||||
|
||||
static const Color secondaryColor = Color(0xFF4CAF50);
|
||||
static const Color secondaryLight = Color(0xFF81C784);
|
||||
static const Color secondaryDark = Color(0xFF388E3C);
|
||||
|
||||
static const Color accentColor = Color(0xFFFF9800);
|
||||
static const Color errorColor = Color(0xFFE53935);
|
||||
static const Color warningColor = Color(0xFFFFC107);
|
||||
static const Color successColor = Color(0xFF4CAF50);
|
||||
static const Color infoColor = Color(0xFF2196F3);
|
||||
|
||||
// Couleurs neutres
|
||||
static const Color backgroundLight = Color(0xFFFAFAFA);
|
||||
static const Color backgroundDark = Color(0xFF121212);
|
||||
static const Color surfaceLight = Color(0xFFFFFFFF);
|
||||
static const Color surfaceDark = Color(0xFF1E1E1E);
|
||||
|
||||
static const Color textPrimary = Color(0xFF212121);
|
||||
static const Color textSecondary = Color(0xFF757575);
|
||||
static const Color textHint = Color(0xFFBDBDBD);
|
||||
static const Color textWhite = Color(0xFFFFFFFF);
|
||||
|
||||
// Bordures et dividers
|
||||
static const Color borderColor = Color(0xFFE0E0E0);
|
||||
static const Color dividerColor = Color(0xFFBDBDBD);
|
||||
|
||||
// Thème clair
|
||||
static ThemeData get lightTheme {
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.light,
|
||||
primarySwatch: _createMaterialColor(primaryColor),
|
||||
colorScheme: const ColorScheme.light(
|
||||
primary: primaryColor,
|
||||
onPrimary: textWhite,
|
||||
secondary: secondaryColor,
|
||||
onSecondary: textWhite,
|
||||
error: errorColor,
|
||||
onError: textWhite,
|
||||
surface: surfaceLight,
|
||||
onSurface: textPrimary,
|
||||
background: backgroundLight,
|
||||
onBackground: textPrimary,
|
||||
),
|
||||
|
||||
// AppBar
|
||||
appBarTheme: const AppBarTheme(
|
||||
elevation: 0,
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: textWhite,
|
||||
centerTitle: true,
|
||||
systemOverlayStyle: SystemUiOverlayStyle.light,
|
||||
titleTextStyle: TextStyle(
|
||||
color: textWhite,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
|
||||
// Cards
|
||||
cardTheme: CardTheme(
|
||||
elevation: 2,
|
||||
shadowColor: Colors.black.withOpacity(0.1),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
color: surfaceLight,
|
||||
),
|
||||
|
||||
// Boutons
|
||||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: primaryColor,
|
||||
foregroundColor: textWhite,
|
||||
elevation: 2,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
textStyle: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
side: const BorderSide(color: primaryColor, width: 2),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
textStyle: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
textButtonTheme: TextButtonThemeData(
|
||||
style: TextButton.styleFrom(
|
||||
foregroundColor: primaryColor,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
textStyle: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Champs de saisie
|
||||
inputDecorationTheme: InputDecorationTheme(
|
||||
filled: true,
|
||||
fillColor: surfaceLight,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(color: borderColor),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(color: borderColor),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(color: primaryColor, width: 2),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(color: errorColor),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
hintStyle: const TextStyle(color: textHint),
|
||||
),
|
||||
|
||||
// Navigation bottom
|
||||
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
|
||||
backgroundColor: surfaceLight,
|
||||
selectedItemColor: primaryColor,
|
||||
unselectedItemColor: textSecondary,
|
||||
type: BottomNavigationBarType.fixed,
|
||||
elevation: 8,
|
||||
),
|
||||
|
||||
// Chip
|
||||
chipTheme: ChipThemeData(
|
||||
backgroundColor: primaryLight.withOpacity(0.1),
|
||||
selectedColor: primaryColor,
|
||||
labelStyle: const TextStyle(color: textPrimary),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
),
|
||||
|
||||
// Divider
|
||||
dividerTheme: const DividerThemeData(
|
||||
color: dividerColor,
|
||||
thickness: 1,
|
||||
),
|
||||
|
||||
// Typography
|
||||
textTheme: _textTheme,
|
||||
);
|
||||
}
|
||||
|
||||
// Thème sombre (pour plus tard)
|
||||
static ThemeData get darkTheme {
|
||||
return lightTheme.copyWith(
|
||||
brightness: Brightness.dark,
|
||||
scaffoldBackgroundColor: backgroundDark,
|
||||
// TODO: Implémenter le thème sombre complet
|
||||
);
|
||||
}
|
||||
|
||||
// Création d'un MaterialColor à partir d'une Color
|
||||
static MaterialColor _createMaterialColor(Color color) {
|
||||
List strengths = <double>[.05];
|
||||
Map<int, Color> swatch = <int, Color>{};
|
||||
final int r = color.red, g = color.green, b = color.blue;
|
||||
|
||||
for (int i = 1; i < 10; i++) {
|
||||
strengths.add(0.1 * i);
|
||||
}
|
||||
for (var strength in strengths) {
|
||||
final double ds = 0.5 - strength;
|
||||
swatch[(strength * 1000).round()] = Color.fromRGBO(
|
||||
r + ((ds < 0 ? r : (255 - r)) * ds).round(),
|
||||
g + ((ds < 0 ? g : (255 - g)) * ds).round(),
|
||||
b + ((ds < 0 ? b : (255 - b)) * ds).round(),
|
||||
1,
|
||||
);
|
||||
}
|
||||
return MaterialColor(color.value, swatch);
|
||||
}
|
||||
|
||||
// Typographie
|
||||
static const TextTheme _textTheme = TextTheme(
|
||||
displayLarge: TextStyle(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textPrimary,
|
||||
),
|
||||
displayMedium: TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textPrimary,
|
||||
),
|
||||
displaySmall: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textPrimary,
|
||||
),
|
||||
headlineLarge: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: textPrimary,
|
||||
),
|
||||
headlineMedium: TextStyle(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: textPrimary,
|
||||
),
|
||||
headlineSmall: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: textPrimary,
|
||||
),
|
||||
titleLarge: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: textPrimary,
|
||||
),
|
||||
titleMedium: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: textPrimary,
|
||||
),
|
||||
titleSmall: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: textPrimary,
|
||||
),
|
||||
bodyLarge: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: textPrimary,
|
||||
),
|
||||
bodyMedium: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: textPrimary,
|
||||
),
|
||||
bodySmall: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: textSecondary,
|
||||
),
|
||||
labelLarge: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: textPrimary,
|
||||
),
|
||||
labelMedium: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: textSecondary,
|
||||
),
|
||||
labelSmall: TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: textHint,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Extensions pour faciliter l'utilisation
|
||||
extension ThemeExtension on BuildContext {
|
||||
ThemeData get theme => Theme.of(this);
|
||||
ColorScheme get colors => Theme.of(this).colorScheme;
|
||||
TextTheme get textTheme => Theme.of(this).textTheme;
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
import '../badges/status_badge.dart';
|
||||
import '../badges/count_badge.dart';
|
||||
|
||||
enum AvatarSize {
|
||||
tiny,
|
||||
small,
|
||||
medium,
|
||||
large,
|
||||
extraLarge,
|
||||
}
|
||||
|
||||
enum AvatarShape {
|
||||
circle,
|
||||
rounded,
|
||||
square,
|
||||
}
|
||||
|
||||
enum AvatarVariant {
|
||||
standard,
|
||||
gradient,
|
||||
outlined,
|
||||
glass,
|
||||
}
|
||||
|
||||
class SophisticatedAvatar extends StatefulWidget {
|
||||
final String? imageUrl;
|
||||
final String? initials;
|
||||
final IconData? icon;
|
||||
final AvatarSize size;
|
||||
final AvatarShape shape;
|
||||
final AvatarVariant variant;
|
||||
final Color? backgroundColor;
|
||||
final Color? foregroundColor;
|
||||
final Gradient? gradient;
|
||||
final VoidCallback? onTap;
|
||||
final Widget? badge;
|
||||
final bool showOnlineStatus;
|
||||
final bool isOnline;
|
||||
final Widget? overlay;
|
||||
final bool animated;
|
||||
final List<BoxShadow>? customShadow;
|
||||
final Border? border;
|
||||
|
||||
const SophisticatedAvatar({
|
||||
super.key,
|
||||
this.imageUrl,
|
||||
this.initials,
|
||||
this.icon,
|
||||
this.size = AvatarSize.medium,
|
||||
this.shape = AvatarShape.circle,
|
||||
this.variant = AvatarVariant.standard,
|
||||
this.backgroundColor,
|
||||
this.foregroundColor,
|
||||
this.gradient,
|
||||
this.onTap,
|
||||
this.badge,
|
||||
this.showOnlineStatus = false,
|
||||
this.isOnline = false,
|
||||
this.overlay,
|
||||
this.animated = true,
|
||||
this.customShadow,
|
||||
this.border,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SophisticatedAvatar> createState() => _SophisticatedAvatarState();
|
||||
}
|
||||
|
||||
class _SophisticatedAvatarState extends State<SophisticatedAvatar>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _rotationAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.95,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_rotationAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 0.1,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = _getSize();
|
||||
final borderRadius = _getBorderRadius(size);
|
||||
|
||||
Widget avatar = AnimatedBuilder(
|
||||
animation: _animationController,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: widget.animated ? _scaleAnimation.value : 1.0,
|
||||
child: Transform.rotate(
|
||||
angle: widget.animated ? _rotationAnimation.value : 0.0,
|
||||
child: Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: _getDecoration(size, borderRadius),
|
||||
child: ClipRRect(
|
||||
borderRadius: borderRadius,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
_buildContent(),
|
||||
if (widget.overlay != null) widget.overlay!,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
// Wrap with gesture detector if onTap is provided
|
||||
if (widget.onTap != null) {
|
||||
avatar = GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
onTapDown: widget.animated ? (_) => _animationController.forward() : null,
|
||||
onTapUp: widget.animated ? (_) => _animationController.reverse() : null,
|
||||
onTapCancel: widget.animated ? () => _animationController.reverse() : null,
|
||||
child: avatar,
|
||||
);
|
||||
}
|
||||
|
||||
// Add badges and status indicators
|
||||
return Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
avatar,
|
||||
|
||||
// Online status indicator
|
||||
if (widget.showOnlineStatus)
|
||||
Positioned(
|
||||
bottom: size * 0.05,
|
||||
right: size * 0.05,
|
||||
child: Container(
|
||||
width: size * 0.25,
|
||||
height: size * 0.25,
|
||||
decoration: BoxDecoration(
|
||||
color: widget.isOnline ? AppTheme.successColor : AppTheme.textHint,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(
|
||||
color: Colors.white,
|
||||
width: size * 0.02,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Custom badge
|
||||
if (widget.badge != null)
|
||||
Positioned(
|
||||
top: -size * 0.1,
|
||||
right: -size * 0.1,
|
||||
child: widget.badge!,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
double _getSize() {
|
||||
switch (widget.size) {
|
||||
case AvatarSize.tiny:
|
||||
return 24;
|
||||
case AvatarSize.small:
|
||||
return 32;
|
||||
case AvatarSize.medium:
|
||||
return 48;
|
||||
case AvatarSize.large:
|
||||
return 64;
|
||||
case AvatarSize.extraLarge:
|
||||
return 96;
|
||||
}
|
||||
}
|
||||
|
||||
BorderRadius _getBorderRadius(double size) {
|
||||
switch (widget.shape) {
|
||||
case AvatarShape.circle:
|
||||
return BorderRadius.circular(size / 2);
|
||||
case AvatarShape.rounded:
|
||||
return BorderRadius.circular(size * 0.2);
|
||||
case AvatarShape.square:
|
||||
return BorderRadius.zero;
|
||||
}
|
||||
}
|
||||
|
||||
double _getFontSize() {
|
||||
switch (widget.size) {
|
||||
case AvatarSize.tiny:
|
||||
return 10;
|
||||
case AvatarSize.small:
|
||||
return 12;
|
||||
case AvatarSize.medium:
|
||||
return 18;
|
||||
case AvatarSize.large:
|
||||
return 24;
|
||||
case AvatarSize.extraLarge:
|
||||
return 36;
|
||||
}
|
||||
}
|
||||
|
||||
double _getIconSize() {
|
||||
switch (widget.size) {
|
||||
case AvatarSize.tiny:
|
||||
return 12;
|
||||
case AvatarSize.small:
|
||||
return 16;
|
||||
case AvatarSize.medium:
|
||||
return 24;
|
||||
case AvatarSize.large:
|
||||
return 32;
|
||||
case AvatarSize.extraLarge:
|
||||
return 48;
|
||||
}
|
||||
}
|
||||
|
||||
Decoration _getDecoration(double size, BorderRadius borderRadius) {
|
||||
switch (widget.variant) {
|
||||
case AvatarVariant.standard:
|
||||
return BoxDecoration(
|
||||
color: widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
borderRadius: borderRadius,
|
||||
border: widget.border,
|
||||
boxShadow: widget.customShadow ?? [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
case AvatarVariant.gradient:
|
||||
return BoxDecoration(
|
||||
gradient: widget.gradient ?? LinearGradient(
|
||||
colors: [
|
||||
widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
(widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.7),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: borderRadius,
|
||||
border: widget.border,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: (widget.backgroundColor ?? AppTheme.primaryColor)
|
||||
.withOpacity(0.3),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, 6),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
case AvatarVariant.outlined:
|
||||
return BoxDecoration(
|
||||
color: Colors.transparent,
|
||||
borderRadius: borderRadius,
|
||||
border: widget.border ?? Border.all(
|
||||
color: widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
width: 2,
|
||||
),
|
||||
);
|
||||
|
||||
case AvatarVariant.glass:
|
||||
return BoxDecoration(
|
||||
color: (widget.backgroundColor ?? Colors.white).withOpacity(0.2),
|
||||
borderRadius: borderRadius,
|
||||
border: Border.all(
|
||||
color: Colors.white.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildContent() {
|
||||
final foregroundColor = widget.foregroundColor ?? Colors.white;
|
||||
|
||||
if (widget.imageUrl != null && widget.imageUrl!.isNotEmpty) {
|
||||
return Image.network(
|
||||
widget.imageUrl!,
|
||||
fit: BoxFit.cover,
|
||||
errorBuilder: (context, error, stackTrace) => _buildFallback(foregroundColor),
|
||||
);
|
||||
}
|
||||
|
||||
return _buildFallback(foregroundColor);
|
||||
}
|
||||
|
||||
Widget _buildFallback(Color foregroundColor) {
|
||||
if (widget.initials != null && widget.initials!.isNotEmpty) {
|
||||
return Center(
|
||||
child: Text(
|
||||
widget.initials!.toUpperCase(),
|
||||
style: TextStyle(
|
||||
color: foregroundColor,
|
||||
fontSize: _getFontSize(),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (widget.icon != null) {
|
||||
return Center(
|
||||
child: Icon(
|
||||
widget.icon,
|
||||
color: foregroundColor,
|
||||
size: _getIconSize(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Center(
|
||||
child: Icon(
|
||||
Icons.person,
|
||||
color: foregroundColor,
|
||||
size: _getIconSize(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Predefined avatar variants
|
||||
class CircleAvatar extends SophisticatedAvatar {
|
||||
const CircleAvatar({
|
||||
super.key,
|
||||
super.imageUrl,
|
||||
super.initials,
|
||||
super.icon,
|
||||
super.size,
|
||||
super.backgroundColor,
|
||||
super.foregroundColor,
|
||||
super.onTap,
|
||||
super.badge,
|
||||
super.showOnlineStatus,
|
||||
super.isOnline,
|
||||
}) : super(shape: AvatarShape.circle);
|
||||
}
|
||||
|
||||
class RoundedAvatar extends SophisticatedAvatar {
|
||||
const RoundedAvatar({
|
||||
super.key,
|
||||
super.imageUrl,
|
||||
super.initials,
|
||||
super.icon,
|
||||
super.size,
|
||||
super.backgroundColor,
|
||||
super.foregroundColor,
|
||||
super.onTap,
|
||||
super.badge,
|
||||
}) : super(shape: AvatarShape.rounded);
|
||||
}
|
||||
|
||||
class GradientAvatar extends SophisticatedAvatar {
|
||||
const GradientAvatar({
|
||||
super.key,
|
||||
super.imageUrl,
|
||||
super.initials,
|
||||
super.icon,
|
||||
super.size,
|
||||
super.gradient,
|
||||
super.onTap,
|
||||
super.badge,
|
||||
super.showOnlineStatus,
|
||||
super.isOnline,
|
||||
}) : super(variant: AvatarVariant.gradient);
|
||||
}
|
||||
202
unionflow-mobile-apps/lib/shared/widgets/badges/count_badge.dart
Normal file
202
unionflow-mobile-apps/lib/shared/widgets/badges/count_badge.dart
Normal file
@@ -0,0 +1,202 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
class CountBadge extends StatefulWidget {
|
||||
final int count;
|
||||
final Color? backgroundColor;
|
||||
final Color? textColor;
|
||||
final double? size;
|
||||
final bool showZero;
|
||||
final bool animated;
|
||||
final String? suffix;
|
||||
final int? maxCount;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const CountBadge({
|
||||
super.key,
|
||||
required this.count,
|
||||
this.backgroundColor,
|
||||
this.textColor,
|
||||
this.size,
|
||||
this.showZero = false,
|
||||
this.animated = true,
|
||||
this.suffix,
|
||||
this.maxCount,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<CountBadge> createState() => _CountBadgeState();
|
||||
}
|
||||
|
||||
class _CountBadgeState extends State<CountBadge>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _bounceAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 600),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 1.0,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: const Interval(0.0, 0.5, curve: Curves.elasticOut),
|
||||
));
|
||||
|
||||
_bounceAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 1.2,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: const Interval(0.5, 1.0, curve: Curves.elasticInOut),
|
||||
));
|
||||
|
||||
if (widget.animated) {
|
||||
_animationController.forward();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(CountBadge oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (widget.count != oldWidget.count && widget.animated) {
|
||||
_animationController.reset();
|
||||
_animationController.forward();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (!widget.showZero && widget.count == 0) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final displayText = _getDisplayText();
|
||||
final size = widget.size ?? 20;
|
||||
final backgroundColor = widget.backgroundColor ?? AppTheme.errorColor;
|
||||
final textColor = widget.textColor ?? Colors.white;
|
||||
|
||||
Widget badge = Container(
|
||||
constraints: BoxConstraints(
|
||||
minWidth: size,
|
||||
minHeight: size,
|
||||
),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: displayText.length > 1 ? size * 0.2 : 0,
|
||||
vertical: 2,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: backgroundColor,
|
||||
borderRadius: BorderRadius.circular(size / 2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: backgroundColor.withOpacity(0.4),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
border: Border.all(
|
||||
color: Colors.white,
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
displayText,
|
||||
style: TextStyle(
|
||||
color: textColor,
|
||||
fontSize: size * 0.6,
|
||||
fontWeight: FontWeight.bold,
|
||||
height: 1.0,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.animated) {
|
||||
badge = AnimatedBuilder(
|
||||
animation: _animationController,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: _scaleAnimation.value * _bounceAnimation.value,
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
child: badge,
|
||||
);
|
||||
}
|
||||
|
||||
if (widget.onTap != null) {
|
||||
badge = GestureDetector(
|
||||
onTap: widget.onTap,
|
||||
child: badge,
|
||||
);
|
||||
}
|
||||
|
||||
return badge;
|
||||
}
|
||||
|
||||
String _getDisplayText() {
|
||||
if (widget.maxCount != null && widget.count > widget.maxCount!) {
|
||||
return '${widget.maxCount}+';
|
||||
}
|
||||
|
||||
final countText = widget.count.toString();
|
||||
return widget.suffix != null ? '$countText${widget.suffix}' : countText;
|
||||
}
|
||||
}
|
||||
|
||||
class NotificationBadge extends StatelessWidget {
|
||||
final Widget child;
|
||||
final int count;
|
||||
final Color? badgeColor;
|
||||
final double? size;
|
||||
final Offset offset;
|
||||
final bool showZero;
|
||||
|
||||
const NotificationBadge({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.count,
|
||||
this.badgeColor,
|
||||
this.size,
|
||||
this.offset = const Offset(0, 0),
|
||||
this.showZero = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
child,
|
||||
if (showZero || count > 0)
|
||||
Positioned(
|
||||
top: offset.dy,
|
||||
right: offset.dx,
|
||||
child: CountBadge(
|
||||
count: count,
|
||||
backgroundColor: badgeColor,
|
||||
size: size,
|
||||
showZero: showZero,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,405 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
enum BadgeType {
|
||||
success,
|
||||
warning,
|
||||
error,
|
||||
info,
|
||||
neutral,
|
||||
premium,
|
||||
new_,
|
||||
}
|
||||
|
||||
enum BadgeSize {
|
||||
small,
|
||||
medium,
|
||||
large,
|
||||
}
|
||||
|
||||
enum BadgeVariant {
|
||||
filled,
|
||||
outlined,
|
||||
ghost,
|
||||
gradient,
|
||||
}
|
||||
|
||||
class StatusBadge extends StatelessWidget {
|
||||
final String text;
|
||||
final BadgeType type;
|
||||
final BadgeSize size;
|
||||
final BadgeVariant variant;
|
||||
final IconData? icon;
|
||||
final VoidCallback? onTap;
|
||||
final bool animated;
|
||||
final String? tooltip;
|
||||
final Widget? customIcon;
|
||||
final bool showPulse;
|
||||
|
||||
const StatusBadge({
|
||||
super.key,
|
||||
required this.text,
|
||||
this.type = BadgeType.neutral,
|
||||
this.size = BadgeSize.medium,
|
||||
this.variant = BadgeVariant.filled,
|
||||
this.icon,
|
||||
this.onTap,
|
||||
this.animated = true,
|
||||
this.tooltip,
|
||||
this.customIcon,
|
||||
this.showPulse = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final config = _getBadgeConfig();
|
||||
|
||||
Widget badge = AnimatedContainer(
|
||||
duration: animated ? const Duration(milliseconds: 200) : Duration.zero,
|
||||
padding: _getPadding(),
|
||||
decoration: _getDecoration(config),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null || customIcon != null) ...[
|
||||
_buildIcon(config),
|
||||
SizedBox(width: _getIconSpacing()),
|
||||
],
|
||||
if (showPulse) ...[
|
||||
_buildPulseIndicator(config.primaryColor),
|
||||
SizedBox(width: _getIconSpacing()),
|
||||
],
|
||||
Text(
|
||||
text,
|
||||
style: _getTextStyle(config),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
if (onTap != null) {
|
||||
badge = Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(_getBorderRadius()),
|
||||
child: badge,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (tooltip != null) {
|
||||
badge = Tooltip(
|
||||
message: tooltip!,
|
||||
child: badge,
|
||||
);
|
||||
}
|
||||
|
||||
return badge;
|
||||
}
|
||||
|
||||
_BadgeConfig _getBadgeConfig() {
|
||||
switch (type) {
|
||||
case BadgeType.success:
|
||||
return _BadgeConfig(
|
||||
primaryColor: AppTheme.successColor,
|
||||
backgroundColor: AppTheme.successColor.withOpacity(0.1),
|
||||
borderColor: AppTheme.successColor.withOpacity(0.3),
|
||||
);
|
||||
case BadgeType.warning:
|
||||
return _BadgeConfig(
|
||||
primaryColor: AppTheme.warningColor,
|
||||
backgroundColor: AppTheme.warningColor.withOpacity(0.1),
|
||||
borderColor: AppTheme.warningColor.withOpacity(0.3),
|
||||
);
|
||||
case BadgeType.error:
|
||||
return _BadgeConfig(
|
||||
primaryColor: AppTheme.errorColor,
|
||||
backgroundColor: AppTheme.errorColor.withOpacity(0.1),
|
||||
borderColor: AppTheme.errorColor.withOpacity(0.3),
|
||||
);
|
||||
case BadgeType.info:
|
||||
return _BadgeConfig(
|
||||
primaryColor: AppTheme.infoColor,
|
||||
backgroundColor: AppTheme.infoColor.withOpacity(0.1),
|
||||
borderColor: AppTheme.infoColor.withOpacity(0.3),
|
||||
);
|
||||
case BadgeType.premium:
|
||||
return _BadgeConfig(
|
||||
primaryColor: const Color(0xFFFFD700),
|
||||
backgroundColor: const Color(0xFFFFD700).withOpacity(0.1),
|
||||
borderColor: const Color(0xFFFFD700).withOpacity(0.3),
|
||||
);
|
||||
case BadgeType.new_:
|
||||
return _BadgeConfig(
|
||||
primaryColor: const Color(0xFFFF6B6B),
|
||||
backgroundColor: const Color(0xFFFF6B6B).withOpacity(0.1),
|
||||
borderColor: const Color(0xFFFF6B6B).withOpacity(0.3),
|
||||
);
|
||||
default:
|
||||
return _BadgeConfig(
|
||||
primaryColor: AppTheme.textSecondary,
|
||||
backgroundColor: AppTheme.textSecondary.withOpacity(0.1),
|
||||
borderColor: AppTheme.textSecondary.withOpacity(0.3),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
EdgeInsets _getPadding() {
|
||||
switch (size) {
|
||||
case BadgeSize.small:
|
||||
return const EdgeInsets.symmetric(horizontal: 8, vertical: 2);
|
||||
case BadgeSize.medium:
|
||||
return const EdgeInsets.symmetric(horizontal: 12, vertical: 4);
|
||||
case BadgeSize.large:
|
||||
return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
|
||||
}
|
||||
}
|
||||
|
||||
double _getBorderRadius() {
|
||||
switch (size) {
|
||||
case BadgeSize.small:
|
||||
return 12;
|
||||
case BadgeSize.medium:
|
||||
return 16;
|
||||
case BadgeSize.large:
|
||||
return 20;
|
||||
}
|
||||
}
|
||||
|
||||
double _getFontSize() {
|
||||
switch (size) {
|
||||
case BadgeSize.small:
|
||||
return 10;
|
||||
case BadgeSize.medium:
|
||||
return 12;
|
||||
case BadgeSize.large:
|
||||
return 14;
|
||||
}
|
||||
}
|
||||
|
||||
double _getIconSize() {
|
||||
switch (size) {
|
||||
case BadgeSize.small:
|
||||
return 12;
|
||||
case BadgeSize.medium:
|
||||
return 14;
|
||||
case BadgeSize.large:
|
||||
return 16;
|
||||
}
|
||||
}
|
||||
|
||||
double _getIconSpacing() {
|
||||
switch (size) {
|
||||
case BadgeSize.small:
|
||||
return 4;
|
||||
case BadgeSize.medium:
|
||||
return 6;
|
||||
case BadgeSize.large:
|
||||
return 8;
|
||||
}
|
||||
}
|
||||
|
||||
Decoration _getDecoration(_BadgeConfig config) {
|
||||
switch (variant) {
|
||||
case BadgeVariant.filled:
|
||||
return BoxDecoration(
|
||||
color: config.primaryColor,
|
||||
borderRadius: BorderRadius.circular(_getBorderRadius()),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: config.primaryColor.withOpacity(0.3),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
);
|
||||
case BadgeVariant.outlined:
|
||||
return BoxDecoration(
|
||||
color: Colors.transparent,
|
||||
border: Border.all(color: config.borderColor, width: 1),
|
||||
borderRadius: BorderRadius.circular(_getBorderRadius()),
|
||||
);
|
||||
case BadgeVariant.ghost:
|
||||
return BoxDecoration(
|
||||
color: config.backgroundColor,
|
||||
borderRadius: BorderRadius.circular(_getBorderRadius()),
|
||||
);
|
||||
case BadgeVariant.gradient:
|
||||
return BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
config.primaryColor,
|
||||
config.primaryColor.withOpacity(0.7),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(_getBorderRadius()),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: config.primaryColor.withOpacity(0.3),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TextStyle _getTextStyle(_BadgeConfig config) {
|
||||
Color textColor;
|
||||
switch (variant) {
|
||||
case BadgeVariant.filled:
|
||||
case BadgeVariant.gradient:
|
||||
textColor = Colors.white;
|
||||
break;
|
||||
default:
|
||||
textColor = config.primaryColor;
|
||||
}
|
||||
|
||||
return TextStyle(
|
||||
fontSize: _getFontSize(),
|
||||
fontWeight: FontWeight.w600,
|
||||
color: textColor,
|
||||
letterSpacing: 0.2,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIcon(_BadgeConfig config) {
|
||||
Color iconColor;
|
||||
switch (variant) {
|
||||
case BadgeVariant.filled:
|
||||
case BadgeVariant.gradient:
|
||||
iconColor = Colors.white;
|
||||
break;
|
||||
default:
|
||||
iconColor = config.primaryColor;
|
||||
}
|
||||
|
||||
if (customIcon != null) {
|
||||
return customIcon!;
|
||||
}
|
||||
|
||||
return Icon(
|
||||
icon,
|
||||
size: _getIconSize(),
|
||||
color: iconColor,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPulseIndicator(Color color) {
|
||||
if (!showPulse) {
|
||||
return Container(
|
||||
width: _getIconSize() * 0.6,
|
||||
height: _getIconSize() * 0.6,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return _PulseWidget(
|
||||
size: _getIconSize() * 0.6,
|
||||
color: color,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BadgeConfig {
|
||||
final Color primaryColor;
|
||||
final Color backgroundColor;
|
||||
final Color borderColor;
|
||||
|
||||
_BadgeConfig({
|
||||
required this.primaryColor,
|
||||
required this.backgroundColor,
|
||||
required this.borderColor,
|
||||
});
|
||||
}
|
||||
|
||||
// Pulse animation widget
|
||||
class _PulseWidget extends StatefulWidget {
|
||||
final double size;
|
||||
final Color color;
|
||||
|
||||
const _PulseWidget({
|
||||
required this.size,
|
||||
required this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
State<_PulseWidget> createState() => _PulseWidgetState();
|
||||
}
|
||||
|
||||
class _PulseWidgetState extends State<_PulseWidget>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
late Animation<double> _animation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
duration: const Duration(milliseconds: 1000),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_animation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 1.0,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _controller,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_controller.repeat(reverse: true);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedBuilder(
|
||||
animation: _animation,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: 0.8 + (_animation.value * 0.4),
|
||||
child: Container(
|
||||
width: widget.size,
|
||||
height: widget.size,
|
||||
decoration: BoxDecoration(
|
||||
color: widget.color.withOpacity(1.0 - _animation.value * 0.5),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Extension for easy badge creation
|
||||
extension BadgeBuilder on String {
|
||||
StatusBadge toBadge({
|
||||
BadgeType type = BadgeType.neutral,
|
||||
BadgeSize size = BadgeSize.medium,
|
||||
BadgeVariant variant = BadgeVariant.filled,
|
||||
IconData? icon,
|
||||
VoidCallback? onTap,
|
||||
}) {
|
||||
return StatusBadge(
|
||||
text: this,
|
||||
type: type,
|
||||
size: size,
|
||||
variant: variant,
|
||||
icon: icon,
|
||||
onTap: onTap,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
enum ButtonGroupVariant {
|
||||
segmented,
|
||||
toggle,
|
||||
tabs,
|
||||
chips,
|
||||
}
|
||||
|
||||
class ButtonGroupOption {
|
||||
final String text;
|
||||
final IconData? icon;
|
||||
final String value;
|
||||
final bool disabled;
|
||||
final Widget? badge;
|
||||
|
||||
const ButtonGroupOption({
|
||||
required this.text,
|
||||
required this.value,
|
||||
this.icon,
|
||||
this.disabled = false,
|
||||
this.badge,
|
||||
});
|
||||
}
|
||||
|
||||
class SophisticatedButtonGroup extends StatefulWidget {
|
||||
final List<ButtonGroupOption> options;
|
||||
final String? selectedValue;
|
||||
final List<String>? selectedValues; // For multi-select
|
||||
final Function(String)? onSelectionChanged;
|
||||
final Function(List<String>)? onMultiSelectionChanged;
|
||||
final ButtonGroupVariant variant;
|
||||
final bool multiSelect;
|
||||
final Color? backgroundColor;
|
||||
final Color? selectedColor;
|
||||
final Color? unselectedColor;
|
||||
final double? height;
|
||||
final EdgeInsets? padding;
|
||||
final bool animated;
|
||||
final bool fullWidth;
|
||||
|
||||
const SophisticatedButtonGroup({
|
||||
super.key,
|
||||
required this.options,
|
||||
this.selectedValue,
|
||||
this.selectedValues,
|
||||
this.onSelectionChanged,
|
||||
this.onMultiSelectionChanged,
|
||||
this.variant = ButtonGroupVariant.segmented,
|
||||
this.multiSelect = false,
|
||||
this.backgroundColor,
|
||||
this.selectedColor,
|
||||
this.unselectedColor,
|
||||
this.height,
|
||||
this.padding,
|
||||
this.animated = true,
|
||||
this.fullWidth = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SophisticatedButtonGroup> createState() => _SophisticatedButtonGroupState();
|
||||
}
|
||||
|
||||
class _SophisticatedButtonGroupState extends State<SophisticatedButtonGroup>
|
||||
with TickerProviderStateMixin {
|
||||
late AnimationController _slideController;
|
||||
late Animation<double> _slideAnimation;
|
||||
|
||||
String? _internalSelectedValue;
|
||||
List<String> _internalSelectedValues = [];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_slideController = AnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_slideAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 1.0,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _slideController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_internalSelectedValue = widget.selectedValue;
|
||||
_internalSelectedValues = widget.selectedValues ?? [];
|
||||
|
||||
if (widget.animated) {
|
||||
_slideController.forward();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(SophisticatedButtonGroup oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
|
||||
if (widget.selectedValue != oldWidget.selectedValue) {
|
||||
_internalSelectedValue = widget.selectedValue;
|
||||
}
|
||||
|
||||
if (widget.selectedValues != oldWidget.selectedValues) {
|
||||
_internalSelectedValues = widget.selectedValues ?? [];
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_slideController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
switch (widget.variant) {
|
||||
case ButtonGroupVariant.segmented:
|
||||
return _buildSegmentedGroup();
|
||||
case ButtonGroupVariant.toggle:
|
||||
return _buildToggleGroup();
|
||||
case ButtonGroupVariant.tabs:
|
||||
return _buildTabsGroup();
|
||||
case ButtonGroupVariant.chips:
|
||||
return _buildChipsGroup();
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildSegmentedGroup() {
|
||||
return AnimatedBuilder(
|
||||
animation: _slideAnimation,
|
||||
builder: (context, child) {
|
||||
return Container(
|
||||
height: widget.height ?? 48,
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.backgroundColor ?? AppTheme.backgroundLight,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
border: Border.all(
|
||||
color: AppTheme.textHint.withOpacity(0.2),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: widget.options.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final option = entry.value;
|
||||
final isSelected = _isSelected(option.value);
|
||||
|
||||
return Expanded(
|
||||
child: _buildSegmentedButton(option, isSelected, index),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSegmentedButton(ButtonGroupOption option, bool isSelected, int index) {
|
||||
return AnimatedContainer(
|
||||
duration: widget.animated ? const Duration(milliseconds: 200) : Duration.zero,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? (widget.selectedColor ?? AppTheme.primaryColor)
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
boxShadow: isSelected ? [
|
||||
BoxShadow(
|
||||
color: (widget.selectedColor ?? AppTheme.primaryColor).withOpacity(0.3),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
] : null,
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: option.disabled ? null : () => _handleSelection(option.value),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
padding: widget.padding ?? const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
child: _buildButtonContent(option, isSelected),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildToggleGroup() {
|
||||
return Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: widget.options.map((option) {
|
||||
final isSelected = _isSelected(option.value);
|
||||
return _buildToggleButton(option, isSelected);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildToggleButton(ButtonGroupOption option, bool isSelected) {
|
||||
return AnimatedContainer(
|
||||
duration: widget.animated ? const Duration(milliseconds: 200) : Duration.zero,
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? (widget.selectedColor ?? AppTheme.primaryColor)
|
||||
: (widget.backgroundColor ?? Colors.transparent),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
border: Border.all(
|
||||
color: isSelected
|
||||
? (widget.selectedColor ?? AppTheme.primaryColor)
|
||||
: AppTheme.textHint.withOpacity(0.3),
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: option.disabled ? null : () => _handleSelection(option.value),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: _buildButtonContent(option, isSelected),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTabsGroup() {
|
||||
return Container(
|
||||
height: widget.height ?? 44,
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
bottom: BorderSide(
|
||||
color: AppTheme.textHint.withOpacity(0.2),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: widget.options.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
final option = entry.value;
|
||||
final isSelected = _isSelected(option.value);
|
||||
|
||||
return widget.fullWidth
|
||||
? Expanded(child: _buildTabButton(option, isSelected))
|
||||
: _buildTabButton(option, isSelected);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTabButton(ButtonGroupOption option, bool isSelected) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 4),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: option.disabled ? null : () => _handleSelection(option.value),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
border: Border(
|
||||
bottom: BorderSide(
|
||||
color: isSelected
|
||||
? (widget.selectedColor ?? AppTheme.primaryColor)
|
||||
: Colors.transparent,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: _buildButtonContent(option, isSelected),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildChipsGroup() {
|
||||
return Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: widget.options.map((option) {
|
||||
final isSelected = _isSelected(option.value);
|
||||
return _buildChip(option, isSelected);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildChip(ButtonGroupOption option, bool isSelected) {
|
||||
return FilterChip(
|
||||
label: _buildButtonContent(option, isSelected),
|
||||
selected: isSelected,
|
||||
onSelected: option.disabled ? null : (selected) => _handleSelection(option.value),
|
||||
backgroundColor: widget.backgroundColor,
|
||||
selectedColor: widget.selectedColor ?? AppTheme.primaryColor,
|
||||
checkmarkColor: Colors.white,
|
||||
labelStyle: TextStyle(
|
||||
color: isSelected ? Colors.white : (widget.unselectedColor ?? AppTheme.textPrimary),
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildButtonContent(ButtonGroupOption option, bool isSelected) {
|
||||
final color = isSelected
|
||||
? Colors.white
|
||||
: (widget.unselectedColor ?? AppTheme.textSecondary);
|
||||
|
||||
if (option.icon != null) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
option.icon,
|
||||
size: 16,
|
||||
color: color,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
option.text,
|
||||
style: TextStyle(
|
||||
color: color,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
if (option.badge != null) ...[
|
||||
const SizedBox(width: 6),
|
||||
option.badge!,
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return Text(
|
||||
option.text,
|
||||
style: TextStyle(
|
||||
color: color,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
);
|
||||
}
|
||||
|
||||
bool _isSelected(String value) {
|
||||
if (widget.multiSelect) {
|
||||
return _internalSelectedValues.contains(value);
|
||||
}
|
||||
return _internalSelectedValue == value;
|
||||
}
|
||||
|
||||
void _handleSelection(String value) {
|
||||
HapticFeedback.selectionClick();
|
||||
|
||||
if (widget.multiSelect) {
|
||||
setState(() {
|
||||
if (_internalSelectedValues.contains(value)) {
|
||||
_internalSelectedValues.remove(value);
|
||||
} else {
|
||||
_internalSelectedValues.add(value);
|
||||
}
|
||||
});
|
||||
widget.onMultiSelectionChanged?.call(_internalSelectedValues);
|
||||
} else {
|
||||
setState(() {
|
||||
_internalSelectedValue = value;
|
||||
});
|
||||
widget.onSelectionChanged?.call(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
303
unionflow-mobile-apps/lib/shared/widgets/buttons/buttons.dart
Normal file
303
unionflow-mobile-apps/lib/shared/widgets/buttons/buttons.dart
Normal file
@@ -0,0 +1,303 @@
|
||||
// Export all sophisticated button components
|
||||
export 'sophisticated_button.dart';
|
||||
export 'floating_action_button.dart';
|
||||
export 'icon_button.dart';
|
||||
export 'button_group.dart';
|
||||
|
||||
// Predefined button styles for quick usage
|
||||
import 'package:flutter/material.dart';
|
||||
import 'sophisticated_button.dart';
|
||||
import 'floating_action_button.dart';
|
||||
import 'icon_button.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
// Quick button factory methods
|
||||
class QuickButtons {
|
||||
// Primary buttons
|
||||
static Widget primary({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
bool loading = false,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.primary,
|
||||
size: size,
|
||||
loading: loading,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget secondary({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
bool loading = false,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.secondary,
|
||||
size: size,
|
||||
loading: loading,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget outline({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
Color? color,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.outline,
|
||||
size: size,
|
||||
backgroundColor: color,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget ghost({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
Color? color,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.ghost,
|
||||
size: size,
|
||||
backgroundColor: color,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget gradient({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
Gradient? gradient,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.gradient,
|
||||
size: size,
|
||||
gradient: gradient,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget glass({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.glass,
|
||||
size: size,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget danger({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.danger,
|
||||
size: size,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget success({
|
||||
required String text,
|
||||
required VoidCallback onPressed,
|
||||
IconData? icon,
|
||||
ButtonSize size = ButtonSize.medium,
|
||||
}) {
|
||||
return SophisticatedButton(
|
||||
text: text,
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: ButtonVariant.success,
|
||||
size: size,
|
||||
);
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
static Widget iconPrimary({
|
||||
required IconData icon,
|
||||
required VoidCallback onPressed,
|
||||
double? size,
|
||||
String? tooltip,
|
||||
int? notificationCount,
|
||||
}) {
|
||||
return SophisticatedIconButton(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: IconButtonVariant.filled,
|
||||
backgroundColor: AppTheme.primaryColor,
|
||||
size: size,
|
||||
tooltip: tooltip,
|
||||
notificationCount: notificationCount,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget iconSecondary({
|
||||
required IconData icon,
|
||||
required VoidCallback onPressed,
|
||||
double? size,
|
||||
String? tooltip,
|
||||
int? notificationCount,
|
||||
}) {
|
||||
return SophisticatedIconButton(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: IconButtonVariant.filled,
|
||||
backgroundColor: AppTheme.secondaryColor,
|
||||
size: size,
|
||||
tooltip: tooltip,
|
||||
notificationCount: notificationCount,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget iconOutline({
|
||||
required IconData icon,
|
||||
required VoidCallback onPressed,
|
||||
double? size,
|
||||
String? tooltip,
|
||||
Color? color,
|
||||
}) {
|
||||
return SophisticatedIconButton(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: IconButtonVariant.outlined,
|
||||
foregroundColor: color ?? AppTheme.primaryColor,
|
||||
borderColor: color ?? AppTheme.primaryColor,
|
||||
size: size,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget iconGhost({
|
||||
required IconData icon,
|
||||
required VoidCallback onPressed,
|
||||
double? size,
|
||||
String? tooltip,
|
||||
Color? color,
|
||||
}) {
|
||||
return SophisticatedIconButton(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: IconButtonVariant.ghost,
|
||||
backgroundColor: color ?? AppTheme.primaryColor,
|
||||
size: size,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget iconGradient({
|
||||
required IconData icon,
|
||||
required VoidCallback onPressed,
|
||||
double? size,
|
||||
String? tooltip,
|
||||
Gradient? gradient,
|
||||
}) {
|
||||
return SophisticatedIconButton(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: IconButtonVariant.gradient,
|
||||
gradient: gradient,
|
||||
size: size,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
|
||||
// FAB buttons
|
||||
static Widget fab({
|
||||
required VoidCallback onPressed,
|
||||
IconData icon = Icons.add,
|
||||
FABVariant variant = FABVariant.primary,
|
||||
FABSize size = FABSize.regular,
|
||||
String? tooltip,
|
||||
}) {
|
||||
return SophisticatedFAB(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: variant,
|
||||
size: size,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget fabExtended({
|
||||
required String label,
|
||||
required VoidCallback onPressed,
|
||||
IconData icon = Icons.add,
|
||||
FABVariant variant = FABVariant.primary,
|
||||
String? tooltip,
|
||||
}) {
|
||||
return SophisticatedFAB(
|
||||
icon: icon,
|
||||
label: label,
|
||||
onPressed: onPressed,
|
||||
variant: variant,
|
||||
size: FABSize.extended,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget fabGradient({
|
||||
required VoidCallback onPressed,
|
||||
IconData icon = Icons.add,
|
||||
FABSize size = FABSize.regular,
|
||||
Gradient? gradient,
|
||||
String? tooltip,
|
||||
}) {
|
||||
return SophisticatedFAB(
|
||||
icon: icon,
|
||||
onPressed: onPressed,
|
||||
variant: FABVariant.gradient,
|
||||
size: size,
|
||||
gradient: gradient,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
|
||||
static Widget fabMorphing({
|
||||
required VoidCallback onPressed,
|
||||
required List<IconData> icons,
|
||||
FABSize size = FABSize.regular,
|
||||
Duration morphingDuration = const Duration(seconds: 2),
|
||||
String? tooltip,
|
||||
}) {
|
||||
return SophisticatedFAB(
|
||||
onPressed: onPressed,
|
||||
variant: FABVariant.morphing,
|
||||
size: size,
|
||||
morphingIcons: icons,
|
||||
morphingDuration: morphingDuration,
|
||||
tooltip: tooltip,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,400 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
enum FABVariant {
|
||||
primary,
|
||||
secondary,
|
||||
gradient,
|
||||
glass,
|
||||
morphing,
|
||||
}
|
||||
|
||||
enum FABSize {
|
||||
small,
|
||||
regular,
|
||||
large,
|
||||
extended,
|
||||
}
|
||||
|
||||
class SophisticatedFAB extends StatefulWidget {
|
||||
final IconData? icon;
|
||||
final String? label;
|
||||
final VoidCallback? onPressed;
|
||||
final FABVariant variant;
|
||||
final FABSize size;
|
||||
final Color? backgroundColor;
|
||||
final Color? foregroundColor;
|
||||
final Gradient? gradient;
|
||||
final bool animated;
|
||||
final bool showPulse;
|
||||
final List<IconData>? morphingIcons;
|
||||
final Duration morphingDuration;
|
||||
final String? tooltip;
|
||||
|
||||
const SophisticatedFAB({
|
||||
super.key,
|
||||
this.icon,
|
||||
this.label,
|
||||
this.onPressed,
|
||||
this.variant = FABVariant.primary,
|
||||
this.size = FABSize.regular,
|
||||
this.backgroundColor,
|
||||
this.foregroundColor,
|
||||
this.gradient,
|
||||
this.animated = true,
|
||||
this.showPulse = false,
|
||||
this.morphingIcons,
|
||||
this.morphingDuration = const Duration(seconds: 2),
|
||||
this.tooltip,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SophisticatedFAB> createState() => _SophisticatedFABState();
|
||||
}
|
||||
|
||||
class _SophisticatedFABState extends State<SophisticatedFAB>
|
||||
with TickerProviderStateMixin {
|
||||
late AnimationController _scaleController;
|
||||
late AnimationController _rotationController;
|
||||
late AnimationController _pulseController;
|
||||
late AnimationController _morphingController;
|
||||
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _rotationAnimation;
|
||||
late Animation<double> _pulseAnimation;
|
||||
|
||||
int _currentMorphingIndex = 0;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_scaleController = AnimationController(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_rotationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_pulseController = AnimationController(
|
||||
duration: const Duration(milliseconds: 1500),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_morphingController = AnimationController(
|
||||
duration: widget.morphingDuration,
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.9,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _scaleController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_rotationAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 1.0,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _rotationController,
|
||||
curve: Curves.elasticOut,
|
||||
));
|
||||
|
||||
_pulseAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 1.2,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _pulseController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
if (widget.showPulse) {
|
||||
_pulseController.repeat(reverse: true);
|
||||
}
|
||||
|
||||
if (widget.morphingIcons != null && widget.morphingIcons!.isNotEmpty) {
|
||||
_startMorphing();
|
||||
}
|
||||
}
|
||||
|
||||
void _startMorphing() {
|
||||
_morphingController.addListener(() {
|
||||
if (_morphingController.isCompleted) {
|
||||
setState(() {
|
||||
_currentMorphingIndex =
|
||||
(_currentMorphingIndex + 1) % widget.morphingIcons!.length;
|
||||
});
|
||||
_morphingController.reset();
|
||||
_morphingController.forward();
|
||||
}
|
||||
});
|
||||
_morphingController.forward();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_scaleController.dispose();
|
||||
_rotationController.dispose();
|
||||
_pulseController.dispose();
|
||||
_morphingController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final config = _getFABConfig();
|
||||
|
||||
Widget fab = AnimatedBuilder(
|
||||
animation: Listenable.merge([
|
||||
_scaleController,
|
||||
_rotationController,
|
||||
_pulseController,
|
||||
]),
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: widget.animated
|
||||
? _scaleAnimation.value * (widget.showPulse ? _pulseAnimation.value : 1.0)
|
||||
: 1.0,
|
||||
child: Transform.rotate(
|
||||
angle: widget.animated ? _rotationAnimation.value * 0.1 : 0.0,
|
||||
child: Container(
|
||||
width: _getSize(),
|
||||
height: _getSize(),
|
||||
decoration: _getDecoration(config),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: _handleTap,
|
||||
onTapDown: widget.animated ? (_) => _scaleController.forward() : null,
|
||||
onTapUp: widget.animated ? (_) => _scaleController.reverse() : null,
|
||||
onTapCancel: widget.animated ? () => _scaleController.reverse() : null,
|
||||
customBorder: const CircleBorder(),
|
||||
child: _buildContent(config),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
if (widget.tooltip != null) {
|
||||
fab = Tooltip(
|
||||
message: widget.tooltip!,
|
||||
child: fab,
|
||||
);
|
||||
}
|
||||
|
||||
return fab;
|
||||
}
|
||||
|
||||
Widget _buildContent(_FABConfig config) {
|
||||
if (widget.size == FABSize.extended && widget.label != null) {
|
||||
return _buildExtendedContent(config);
|
||||
}
|
||||
|
||||
return Center(
|
||||
child: _buildIcon(config),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildExtendedContent(_FABConfig config) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_buildIcon(config),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
widget.label!,
|
||||
style: TextStyle(
|
||||
color: config.foregroundColor,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIcon(_FABConfig config) {
|
||||
IconData iconToShow = widget.icon ?? Icons.add;
|
||||
|
||||
if (widget.morphingIcons != null && widget.morphingIcons!.isNotEmpty) {
|
||||
iconToShow = widget.morphingIcons![_currentMorphingIndex];
|
||||
}
|
||||
|
||||
return AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 300),
|
||||
transitionBuilder: (child, animation) {
|
||||
return ScaleTransition(
|
||||
scale: animation,
|
||||
child: RotationTransition(
|
||||
turns: animation,
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Icon(
|
||||
iconToShow,
|
||||
key: ValueKey(iconToShow),
|
||||
color: config.foregroundColor,
|
||||
size: _getIconSize(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
_FABConfig _getFABConfig() {
|
||||
switch (widget.variant) {
|
||||
case FABVariant.primary:
|
||||
return _FABConfig(
|
||||
backgroundColor: widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
foregroundColor: widget.foregroundColor ?? Colors.white,
|
||||
hasElevation: true,
|
||||
);
|
||||
|
||||
case FABVariant.secondary:
|
||||
return _FABConfig(
|
||||
backgroundColor: widget.backgroundColor ?? AppTheme.secondaryColor,
|
||||
foregroundColor: widget.foregroundColor ?? Colors.white,
|
||||
hasElevation: true,
|
||||
);
|
||||
|
||||
case FABVariant.gradient:
|
||||
return _FABConfig(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: widget.foregroundColor ?? Colors.white,
|
||||
hasElevation: true,
|
||||
useGradient: true,
|
||||
);
|
||||
|
||||
case FABVariant.glass:
|
||||
return _FABConfig(
|
||||
backgroundColor: Colors.white.withOpacity(0.2),
|
||||
foregroundColor: widget.foregroundColor ?? AppTheme.textPrimary,
|
||||
borderColor: Colors.white.withOpacity(0.3),
|
||||
hasElevation: true,
|
||||
isGlass: true,
|
||||
);
|
||||
|
||||
case FABVariant.morphing:
|
||||
return _FABConfig(
|
||||
backgroundColor: widget.backgroundColor ?? AppTheme.accentColor,
|
||||
foregroundColor: widget.foregroundColor ?? Colors.white,
|
||||
hasElevation: true,
|
||||
isMorphing: true,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Decoration _getDecoration(_FABConfig config) {
|
||||
if (config.useGradient) {
|
||||
return BoxDecoration(
|
||||
gradient: widget.gradient ?? LinearGradient(
|
||||
colors: [
|
||||
widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
(widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.7),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: config.hasElevation ? _getShadow(config) : null,
|
||||
);
|
||||
}
|
||||
|
||||
return BoxDecoration(
|
||||
color: config.backgroundColor,
|
||||
shape: BoxShape.circle,
|
||||
border: config.borderColor != null
|
||||
? Border.all(color: config.borderColor!, width: 1)
|
||||
: null,
|
||||
boxShadow: config.hasElevation ? _getShadow(config) : null,
|
||||
);
|
||||
}
|
||||
|
||||
List<BoxShadow> _getShadow(_FABConfig config) {
|
||||
final shadowColor = config.useGradient
|
||||
? (widget.backgroundColor ?? AppTheme.primaryColor)
|
||||
: config.backgroundColor;
|
||||
|
||||
return [
|
||||
BoxShadow(
|
||||
color: shadowColor.withOpacity(0.4),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
BoxShadow(
|
||||
color: shadowColor.withOpacity(0.2),
|
||||
blurRadius: 40,
|
||||
offset: const Offset(0, 16),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
double _getSize() {
|
||||
switch (widget.size) {
|
||||
case FABSize.small:
|
||||
return 40;
|
||||
case FABSize.regular:
|
||||
return 56;
|
||||
case FABSize.large:
|
||||
return 72;
|
||||
case FABSize.extended:
|
||||
return 56; // Height for extended FAB
|
||||
}
|
||||
}
|
||||
|
||||
double _getIconSize() {
|
||||
switch (widget.size) {
|
||||
case FABSize.small:
|
||||
return 20;
|
||||
case FABSize.regular:
|
||||
return 24;
|
||||
case FABSize.large:
|
||||
return 32;
|
||||
case FABSize.extended:
|
||||
return 24;
|
||||
}
|
||||
}
|
||||
|
||||
void _handleTap() {
|
||||
HapticFeedback.lightImpact();
|
||||
|
||||
if (widget.animated) {
|
||||
_rotationController.forward().then((_) {
|
||||
_rotationController.reverse();
|
||||
});
|
||||
}
|
||||
|
||||
widget.onPressed?.call();
|
||||
}
|
||||
}
|
||||
|
||||
class _FABConfig {
|
||||
final Color backgroundColor;
|
||||
final Color foregroundColor;
|
||||
final Color? borderColor;
|
||||
final bool hasElevation;
|
||||
final bool useGradient;
|
||||
final bool isGlass;
|
||||
final bool isMorphing;
|
||||
|
||||
_FABConfig({
|
||||
required this.backgroundColor,
|
||||
required this.foregroundColor,
|
||||
this.borderColor,
|
||||
this.hasElevation = false,
|
||||
this.useGradient = false,
|
||||
this.isGlass = false,
|
||||
this.isMorphing = false,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,356 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
import '../badges/count_badge.dart';
|
||||
|
||||
enum IconButtonVariant {
|
||||
standard,
|
||||
filled,
|
||||
outlined,
|
||||
ghost,
|
||||
gradient,
|
||||
glass,
|
||||
}
|
||||
|
||||
enum IconButtonShape {
|
||||
circle,
|
||||
rounded,
|
||||
square,
|
||||
}
|
||||
|
||||
class SophisticatedIconButton extends StatefulWidget {
|
||||
final IconData icon;
|
||||
final VoidCallback? onPressed;
|
||||
final VoidCallback? onLongPress;
|
||||
final IconButtonVariant variant;
|
||||
final IconButtonShape shape;
|
||||
final double? size;
|
||||
final Color? backgroundColor;
|
||||
final Color? foregroundColor;
|
||||
final Color? borderColor;
|
||||
final Gradient? gradient;
|
||||
final bool animated;
|
||||
final bool disabled;
|
||||
final String? tooltip;
|
||||
final Widget? badge;
|
||||
final int? notificationCount;
|
||||
final bool showPulse;
|
||||
|
||||
const SophisticatedIconButton({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.onPressed,
|
||||
this.onLongPress,
|
||||
this.variant = IconButtonVariant.standard,
|
||||
this.shape = IconButtonShape.circle,
|
||||
this.size,
|
||||
this.backgroundColor,
|
||||
this.foregroundColor,
|
||||
this.borderColor,
|
||||
this.gradient,
|
||||
this.animated = true,
|
||||
this.disabled = false,
|
||||
this.tooltip,
|
||||
this.badge,
|
||||
this.notificationCount,
|
||||
this.showPulse = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SophisticatedIconButton> createState() => _SophisticatedIconButtonState();
|
||||
}
|
||||
|
||||
class _SophisticatedIconButtonState extends State<SophisticatedIconButton>
|
||||
with TickerProviderStateMixin {
|
||||
late AnimationController _pressController;
|
||||
late AnimationController _pulseController;
|
||||
late AnimationController _rotationController;
|
||||
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _pulseAnimation;
|
||||
late Animation<double> _rotationAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_pressController = AnimationController(
|
||||
duration: const Duration(milliseconds: 100),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_pulseController = AnimationController(
|
||||
duration: const Duration(milliseconds: 1000),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_rotationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.9,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _pressController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_pulseAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 1.1,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _pulseController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_rotationAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 0.25,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _rotationController,
|
||||
curve: Curves.elasticOut,
|
||||
));
|
||||
|
||||
if (widget.showPulse) {
|
||||
_pulseController.repeat(reverse: true);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pressController.dispose();
|
||||
_pulseController.dispose();
|
||||
_rotationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final config = _getButtonConfig();
|
||||
final buttonSize = widget.size ?? 48.0;
|
||||
final iconSize = buttonSize * 0.5;
|
||||
|
||||
Widget button = AnimatedBuilder(
|
||||
animation: Listenable.merge([_pressController, _pulseController, _rotationController]),
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: widget.animated
|
||||
? _scaleAnimation.value * (widget.showPulse ? _pulseAnimation.value : 1.0)
|
||||
: 1.0,
|
||||
child: Transform.rotate(
|
||||
angle: widget.animated ? _rotationAnimation.value : 0.0,
|
||||
child: Container(
|
||||
width: buttonSize,
|
||||
height: buttonSize,
|
||||
decoration: _getDecoration(config, buttonSize),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: widget.disabled ? null : _handleTap,
|
||||
onLongPress: widget.disabled ? null : widget.onLongPress,
|
||||
onTapDown: widget.animated && !widget.disabled ? (_) => _pressController.forward() : null,
|
||||
onTapUp: widget.animated && !widget.disabled ? (_) => _pressController.reverse() : null,
|
||||
onTapCancel: widget.animated && !widget.disabled ? () => _pressController.reverse() : null,
|
||||
customBorder: _getInkWellBorder(buttonSize),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
widget.icon,
|
||||
size: iconSize,
|
||||
color: widget.disabled
|
||||
? AppTheme.textHint
|
||||
: config.foregroundColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
// Add badge if provided
|
||||
if (widget.badge != null || widget.notificationCount != null) {
|
||||
button = Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
button,
|
||||
if (widget.notificationCount != null)
|
||||
Positioned(
|
||||
top: -8,
|
||||
right: -8,
|
||||
child: CountBadge(
|
||||
count: widget.notificationCount!,
|
||||
size: 18,
|
||||
),
|
||||
),
|
||||
if (widget.badge != null)
|
||||
Positioned(
|
||||
top: -4,
|
||||
right: -4,
|
||||
child: widget.badge!,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (widget.tooltip != null) {
|
||||
button = Tooltip(
|
||||
message: widget.tooltip!,
|
||||
child: button,
|
||||
);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
_IconButtonConfig _getButtonConfig() {
|
||||
switch (widget.variant) {
|
||||
case IconButtonVariant.standard:
|
||||
return _IconButtonConfig(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: widget.foregroundColor ?? AppTheme.textPrimary,
|
||||
hasElevation: false,
|
||||
);
|
||||
|
||||
case IconButtonVariant.filled:
|
||||
return _IconButtonConfig(
|
||||
backgroundColor: widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
foregroundColor: widget.foregroundColor ?? Colors.white,
|
||||
hasElevation: true,
|
||||
);
|
||||
|
||||
case IconButtonVariant.outlined:
|
||||
return _IconButtonConfig(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: widget.foregroundColor ?? AppTheme.primaryColor,
|
||||
borderColor: widget.borderColor ?? AppTheme.primaryColor,
|
||||
hasElevation: false,
|
||||
);
|
||||
|
||||
case IconButtonVariant.ghost:
|
||||
return _IconButtonConfig(
|
||||
backgroundColor: (widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.1),
|
||||
foregroundColor: widget.foregroundColor ?? AppTheme.primaryColor,
|
||||
hasElevation: false,
|
||||
);
|
||||
|
||||
case IconButtonVariant.gradient:
|
||||
return _IconButtonConfig(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: widget.foregroundColor ?? Colors.white,
|
||||
hasElevation: true,
|
||||
useGradient: true,
|
||||
);
|
||||
|
||||
case IconButtonVariant.glass:
|
||||
return _IconButtonConfig(
|
||||
backgroundColor: Colors.white.withOpacity(0.2),
|
||||
foregroundColor: widget.foregroundColor ?? AppTheme.textPrimary,
|
||||
borderColor: Colors.white.withOpacity(0.3),
|
||||
hasElevation: true,
|
||||
isGlass: true,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Decoration _getDecoration(_IconButtonConfig config, double size) {
|
||||
final borderRadius = _getBorderRadius(size);
|
||||
|
||||
if (config.useGradient) {
|
||||
return BoxDecoration(
|
||||
gradient: widget.gradient ?? LinearGradient(
|
||||
colors: [
|
||||
widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
(widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.7),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: borderRadius,
|
||||
boxShadow: config.hasElevation ? _getShadow(config, size) : null,
|
||||
);
|
||||
}
|
||||
|
||||
return BoxDecoration(
|
||||
color: config.backgroundColor,
|
||||
borderRadius: borderRadius,
|
||||
border: config.borderColor != null
|
||||
? Border.all(color: config.borderColor!, width: 1.5)
|
||||
: null,
|
||||
boxShadow: config.hasElevation && !widget.disabled ? _getShadow(config, size) : null,
|
||||
);
|
||||
}
|
||||
|
||||
BorderRadius _getBorderRadius(double size) {
|
||||
switch (widget.shape) {
|
||||
case IconButtonShape.circle:
|
||||
return BorderRadius.circular(size / 2);
|
||||
case IconButtonShape.rounded:
|
||||
return BorderRadius.circular(size * 0.25);
|
||||
case IconButtonShape.square:
|
||||
return BorderRadius.circular(8);
|
||||
}
|
||||
}
|
||||
|
||||
ShapeBorder _getInkWellBorder(double size) {
|
||||
switch (widget.shape) {
|
||||
case IconButtonShape.circle:
|
||||
return const CircleBorder();
|
||||
case IconButtonShape.rounded:
|
||||
return RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(size * 0.25),
|
||||
);
|
||||
case IconButtonShape.square:
|
||||
return RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
List<BoxShadow> _getShadow(_IconButtonConfig config, double size) {
|
||||
final shadowColor = config.useGradient
|
||||
? (widget.backgroundColor ?? AppTheme.primaryColor)
|
||||
: config.backgroundColor;
|
||||
|
||||
return [
|
||||
BoxShadow(
|
||||
color: shadowColor.withOpacity(0.3),
|
||||
blurRadius: size * 0.3,
|
||||
offset: Offset(0, size * 0.1),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
void _handleTap() {
|
||||
HapticFeedback.selectionClick();
|
||||
|
||||
if (widget.animated) {
|
||||
_rotationController.forward().then((_) {
|
||||
_rotationController.reverse();
|
||||
});
|
||||
}
|
||||
|
||||
widget.onPressed?.call();
|
||||
}
|
||||
}
|
||||
|
||||
class _IconButtonConfig {
|
||||
final Color backgroundColor;
|
||||
final Color foregroundColor;
|
||||
final Color? borderColor;
|
||||
final bool hasElevation;
|
||||
final bool useGradient;
|
||||
final bool isGlass;
|
||||
|
||||
_IconButtonConfig({
|
||||
required this.backgroundColor,
|
||||
required this.foregroundColor,
|
||||
this.borderColor,
|
||||
this.hasElevation = false,
|
||||
this.useGradient = false,
|
||||
this.isGlass = false,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,554 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
enum ButtonVariant {
|
||||
primary,
|
||||
secondary,
|
||||
outline,
|
||||
ghost,
|
||||
gradient,
|
||||
glass,
|
||||
danger,
|
||||
success,
|
||||
}
|
||||
|
||||
enum ButtonSize {
|
||||
small,
|
||||
medium,
|
||||
large,
|
||||
extraLarge,
|
||||
}
|
||||
|
||||
enum ButtonShape {
|
||||
rounded,
|
||||
circular,
|
||||
square,
|
||||
}
|
||||
|
||||
class SophisticatedButton extends StatefulWidget {
|
||||
final String? text;
|
||||
final Widget? child;
|
||||
final IconData? icon;
|
||||
final IconData? suffixIcon;
|
||||
final VoidCallback? onPressed;
|
||||
final VoidCallback? onLongPress;
|
||||
final ButtonVariant variant;
|
||||
final ButtonSize size;
|
||||
final ButtonShape shape;
|
||||
final Color? backgroundColor;
|
||||
final Color? foregroundColor;
|
||||
final Gradient? gradient;
|
||||
final bool loading;
|
||||
final bool disabled;
|
||||
final bool animated;
|
||||
final bool showRipple;
|
||||
final double? width;
|
||||
final double? height;
|
||||
final EdgeInsets? padding;
|
||||
final List<BoxShadow>? customShadow;
|
||||
final String? tooltip;
|
||||
final bool hapticFeedback;
|
||||
|
||||
const SophisticatedButton({
|
||||
super.key,
|
||||
this.text,
|
||||
this.child,
|
||||
this.icon,
|
||||
this.suffixIcon,
|
||||
this.onPressed,
|
||||
this.onLongPress,
|
||||
this.variant = ButtonVariant.primary,
|
||||
this.size = ButtonSize.medium,
|
||||
this.shape = ButtonShape.rounded,
|
||||
this.backgroundColor,
|
||||
this.foregroundColor,
|
||||
this.gradient,
|
||||
this.loading = false,
|
||||
this.disabled = false,
|
||||
this.animated = true,
|
||||
this.showRipple = true,
|
||||
this.width,
|
||||
this.height,
|
||||
this.padding,
|
||||
this.customShadow,
|
||||
this.tooltip,
|
||||
this.hapticFeedback = true,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SophisticatedButton> createState() => _SophisticatedButtonState();
|
||||
}
|
||||
|
||||
class _SophisticatedButtonState extends State<SophisticatedButton>
|
||||
with TickerProviderStateMixin {
|
||||
late AnimationController _pressController;
|
||||
late AnimationController _loadingController;
|
||||
late AnimationController _shimmerController;
|
||||
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _shadowAnimation;
|
||||
late Animation<double> _loadingAnimation;
|
||||
late Animation<double> _shimmerAnimation;
|
||||
|
||||
bool _isPressed = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_pressController = AnimationController(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_loadingController = AnimationController(
|
||||
duration: const Duration(milliseconds: 1000),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_shimmerController = AnimationController(
|
||||
duration: const Duration(milliseconds: 2000),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.95,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _pressController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_shadowAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.7,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _pressController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_loadingAnimation = Tween<double>(
|
||||
begin: 0.0,
|
||||
end: 1.0,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _loadingController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_shimmerAnimation = Tween<double>(
|
||||
begin: -1.0,
|
||||
end: 2.0,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _shimmerController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
if (widget.loading) {
|
||||
_loadingController.repeat();
|
||||
}
|
||||
|
||||
// Shimmer effect for premium buttons
|
||||
if (widget.variant == ButtonVariant.gradient) {
|
||||
_shimmerController.repeat();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(SophisticatedButton oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
|
||||
if (widget.loading != oldWidget.loading) {
|
||||
if (widget.loading) {
|
||||
_loadingController.repeat();
|
||||
} else {
|
||||
_loadingController.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pressController.dispose();
|
||||
_loadingController.dispose();
|
||||
_shimmerController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final config = _getButtonConfig();
|
||||
final isDisabled = widget.disabled || widget.loading;
|
||||
|
||||
Widget button = AnimatedBuilder(
|
||||
animation: Listenable.merge([_pressController, _loadingController, _shimmerController]),
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: widget.animated ? _scaleAnimation.value : 1.0,
|
||||
child: Container(
|
||||
width: widget.width,
|
||||
height: widget.height ?? _getHeight(),
|
||||
padding: widget.padding ?? _getPadding(),
|
||||
decoration: _getDecoration(config),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: isDisabled ? null : _handleTap,
|
||||
onLongPress: isDisabled ? null : widget.onLongPress,
|
||||
onTapDown: widget.animated && !isDisabled ? (_) => _pressController.forward() : null,
|
||||
onTapUp: widget.animated && !isDisabled ? (_) => _pressController.reverse() : null,
|
||||
onTapCancel: widget.animated && !isDisabled ? () => _pressController.reverse() : null,
|
||||
borderRadius: _getBorderRadius(),
|
||||
splashColor: widget.showRipple ? config.foregroundColor.withOpacity(0.2) : Colors.transparent,
|
||||
highlightColor: widget.showRipple ? config.foregroundColor.withOpacity(0.1) : Colors.transparent,
|
||||
child: _buildContent(config),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
if (widget.tooltip != null) {
|
||||
button = Tooltip(
|
||||
message: widget.tooltip!,
|
||||
child: button,
|
||||
);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
|
||||
Widget _buildContent(_ButtonConfig config) {
|
||||
final hasIcon = widget.icon != null;
|
||||
final hasSuffixIcon = widget.suffixIcon != null;
|
||||
final hasText = widget.text != null || widget.child != null;
|
||||
|
||||
if (widget.loading) {
|
||||
return _buildLoadingContent(config);
|
||||
}
|
||||
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
if (hasIcon) ...[
|
||||
_buildIcon(widget.icon!, config),
|
||||
if (hasText) SizedBox(width: _getIconSpacing()),
|
||||
],
|
||||
if (hasText) ...[
|
||||
Flexible(child: _buildText(config)),
|
||||
],
|
||||
if (hasSuffixIcon) ...[
|
||||
if (hasText || hasIcon) SizedBox(width: _getIconSpacing()),
|
||||
_buildIcon(widget.suffixIcon!, config),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLoadingContent(_ButtonConfig config) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: _getIconSize(),
|
||||
height: _getIconSize(),
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(config.foregroundColor),
|
||||
),
|
||||
),
|
||||
if (widget.text != null) ...[
|
||||
SizedBox(width: _getIconSpacing()),
|
||||
Text(
|
||||
'Chargement...',
|
||||
style: _getTextStyle(config),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIcon(IconData icon, _ButtonConfig config) {
|
||||
return Icon(
|
||||
icon,
|
||||
size: _getIconSize(),
|
||||
color: config.foregroundColor,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildText(_ButtonConfig config) {
|
||||
if (widget.child != null) {
|
||||
return DefaultTextStyle(
|
||||
style: _getTextStyle(config),
|
||||
child: widget.child!,
|
||||
);
|
||||
}
|
||||
|
||||
return Text(
|
||||
widget.text!,
|
||||
style: _getTextStyle(config),
|
||||
textAlign: TextAlign.center,
|
||||
);
|
||||
}
|
||||
|
||||
_ButtonConfig _getButtonConfig() {
|
||||
final isDisabled = widget.disabled || widget.loading;
|
||||
|
||||
switch (widget.variant) {
|
||||
case ButtonVariant.primary:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.backgroundColor ?? AppTheme.primaryColor),
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textSecondary
|
||||
: (widget.foregroundColor ?? Colors.white),
|
||||
hasElevation: true,
|
||||
);
|
||||
|
||||
case ButtonVariant.secondary:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: isDisabled
|
||||
? AppTheme.backgroundLight
|
||||
: (widget.backgroundColor ?? AppTheme.secondaryColor),
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.foregroundColor ?? Colors.white),
|
||||
hasElevation: true,
|
||||
);
|
||||
|
||||
case ButtonVariant.outline:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.foregroundColor ?? AppTheme.primaryColor),
|
||||
borderColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.backgroundColor ?? AppTheme.primaryColor),
|
||||
hasElevation: false,
|
||||
);
|
||||
|
||||
case ButtonVariant.ghost:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: isDisabled
|
||||
? Colors.transparent
|
||||
: (widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.1),
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.foregroundColor ?? AppTheme.primaryColor),
|
||||
hasElevation: false,
|
||||
);
|
||||
|
||||
case ButtonVariant.gradient:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: Colors.transparent,
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.foregroundColor ?? Colors.white),
|
||||
hasElevation: true,
|
||||
useGradient: true,
|
||||
);
|
||||
|
||||
case ButtonVariant.glass:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: isDisabled
|
||||
? Colors.grey.withOpacity(0.1)
|
||||
: Colors.white.withOpacity(0.2),
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: (widget.foregroundColor ?? AppTheme.textPrimary),
|
||||
borderColor: Colors.white.withOpacity(0.3),
|
||||
hasElevation: true,
|
||||
isGlass: true,
|
||||
);
|
||||
|
||||
case ButtonVariant.danger:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: AppTheme.errorColor,
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textSecondary
|
||||
: Colors.white,
|
||||
hasElevation: true,
|
||||
);
|
||||
|
||||
case ButtonVariant.success:
|
||||
return _ButtonConfig(
|
||||
backgroundColor: isDisabled
|
||||
? AppTheme.textHint
|
||||
: AppTheme.successColor,
|
||||
foregroundColor: isDisabled
|
||||
? AppTheme.textSecondary
|
||||
: Colors.white,
|
||||
hasElevation: true,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Decoration _getDecoration(_ButtonConfig config) {
|
||||
final borderRadius = _getBorderRadius();
|
||||
final isDisabled = widget.disabled || widget.loading;
|
||||
|
||||
if (config.useGradient && !isDisabled) {
|
||||
return BoxDecoration(
|
||||
gradient: widget.gradient ?? LinearGradient(
|
||||
colors: [
|
||||
widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
(widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.7),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: borderRadius,
|
||||
boxShadow: config.hasElevation ? _getShadow(config) : null,
|
||||
);
|
||||
}
|
||||
|
||||
return BoxDecoration(
|
||||
color: config.backgroundColor,
|
||||
borderRadius: borderRadius,
|
||||
border: config.borderColor != null
|
||||
? Border.all(color: config.borderColor!, width: 1.5)
|
||||
: null,
|
||||
boxShadow: config.hasElevation && !isDisabled ? _getShadow(config) : null,
|
||||
);
|
||||
}
|
||||
|
||||
List<BoxShadow> _getShadow(_ButtonConfig config) {
|
||||
if (widget.customShadow != null) {
|
||||
return widget.customShadow!.map((shadow) => BoxShadow(
|
||||
color: shadow.color.withOpacity(shadow.color.opacity * _shadowAnimation.value),
|
||||
blurRadius: shadow.blurRadius * _shadowAnimation.value,
|
||||
offset: shadow.offset * _shadowAnimation.value,
|
||||
spreadRadius: shadow.spreadRadius,
|
||||
)).toList();
|
||||
}
|
||||
|
||||
final shadowColor = config.useGradient
|
||||
? (widget.backgroundColor ?? AppTheme.primaryColor)
|
||||
: config.backgroundColor;
|
||||
|
||||
return [
|
||||
BoxShadow(
|
||||
color: shadowColor.withOpacity(0.3 * _shadowAnimation.value),
|
||||
blurRadius: 15 * _shadowAnimation.value,
|
||||
offset: Offset(0, 8 * _shadowAnimation.value),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
BorderRadius _getBorderRadius() {
|
||||
switch (widget.shape) {
|
||||
case ButtonShape.rounded:
|
||||
return BorderRadius.circular(_getHeight() / 2);
|
||||
case ButtonShape.circular:
|
||||
return BorderRadius.circular(_getHeight());
|
||||
case ButtonShape.square:
|
||||
return BorderRadius.circular(8);
|
||||
}
|
||||
}
|
||||
|
||||
double _getHeight() {
|
||||
switch (widget.size) {
|
||||
case ButtonSize.small:
|
||||
return 32;
|
||||
case ButtonSize.medium:
|
||||
return 44;
|
||||
case ButtonSize.large:
|
||||
return 56;
|
||||
case ButtonSize.extraLarge:
|
||||
return 72;
|
||||
}
|
||||
}
|
||||
|
||||
EdgeInsets _getPadding() {
|
||||
switch (widget.size) {
|
||||
case ButtonSize.small:
|
||||
return const EdgeInsets.symmetric(horizontal: 16, vertical: 6);
|
||||
case ButtonSize.medium:
|
||||
return const EdgeInsets.symmetric(horizontal: 24, vertical: 12);
|
||||
case ButtonSize.large:
|
||||
return const EdgeInsets.symmetric(horizontal: 32, vertical: 16);
|
||||
case ButtonSize.extraLarge:
|
||||
return const EdgeInsets.symmetric(horizontal: 40, vertical: 20);
|
||||
}
|
||||
}
|
||||
|
||||
double _getFontSize() {
|
||||
switch (widget.size) {
|
||||
case ButtonSize.small:
|
||||
return 14;
|
||||
case ButtonSize.medium:
|
||||
return 16;
|
||||
case ButtonSize.large:
|
||||
return 18;
|
||||
case ButtonSize.extraLarge:
|
||||
return 20;
|
||||
}
|
||||
}
|
||||
|
||||
double _getIconSize() {
|
||||
switch (widget.size) {
|
||||
case ButtonSize.small:
|
||||
return 16;
|
||||
case ButtonSize.medium:
|
||||
return 20;
|
||||
case ButtonSize.large:
|
||||
return 24;
|
||||
case ButtonSize.extraLarge:
|
||||
return 28;
|
||||
}
|
||||
}
|
||||
|
||||
double _getIconSpacing() {
|
||||
switch (widget.size) {
|
||||
case ButtonSize.small:
|
||||
return 6;
|
||||
case ButtonSize.medium:
|
||||
return 8;
|
||||
case ButtonSize.large:
|
||||
return 10;
|
||||
case ButtonSize.extraLarge:
|
||||
return 12;
|
||||
}
|
||||
}
|
||||
|
||||
TextStyle _getTextStyle(_ButtonConfig config) {
|
||||
return TextStyle(
|
||||
fontSize: _getFontSize(),
|
||||
fontWeight: FontWeight.w600,
|
||||
color: config.foregroundColor,
|
||||
letterSpacing: 0.5,
|
||||
);
|
||||
}
|
||||
|
||||
void _handleTap() {
|
||||
if (widget.hapticFeedback) {
|
||||
HapticFeedback.lightImpact();
|
||||
}
|
||||
widget.onPressed?.call();
|
||||
}
|
||||
}
|
||||
|
||||
class _ButtonConfig {
|
||||
final Color backgroundColor;
|
||||
final Color foregroundColor;
|
||||
final Color? borderColor;
|
||||
final bool hasElevation;
|
||||
final bool useGradient;
|
||||
final bool isGlass;
|
||||
|
||||
_ButtonConfig({
|
||||
required this.backgroundColor,
|
||||
required this.foregroundColor,
|
||||
this.borderColor,
|
||||
this.hasElevation = false,
|
||||
this.useGradient = false,
|
||||
this.isGlass = false,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,322 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../../theme/app_theme.dart';
|
||||
|
||||
enum CardVariant {
|
||||
elevated,
|
||||
outlined,
|
||||
filled,
|
||||
glass,
|
||||
gradient,
|
||||
}
|
||||
|
||||
enum CardSize {
|
||||
compact,
|
||||
standard,
|
||||
expanded,
|
||||
}
|
||||
|
||||
class SophisticatedCard extends StatefulWidget {
|
||||
final Widget child;
|
||||
final CardVariant variant;
|
||||
final CardSize size;
|
||||
final Color? backgroundColor;
|
||||
final Color? borderColor;
|
||||
final Gradient? gradient;
|
||||
final List<BoxShadow>? customShadow;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onLongPress;
|
||||
final bool animated;
|
||||
final bool showRipple;
|
||||
final EdgeInsets? padding;
|
||||
final EdgeInsets? margin;
|
||||
final double? elevation;
|
||||
final BorderRadius? borderRadius;
|
||||
final Widget? header;
|
||||
final Widget? footer;
|
||||
final bool blurBackground;
|
||||
|
||||
const SophisticatedCard({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.variant = CardVariant.elevated,
|
||||
this.size = CardSize.standard,
|
||||
this.backgroundColor,
|
||||
this.borderColor,
|
||||
this.gradient,
|
||||
this.customShadow,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
this.animated = true,
|
||||
this.showRipple = true,
|
||||
this.padding,
|
||||
this.margin,
|
||||
this.elevation,
|
||||
this.borderRadius,
|
||||
this.header,
|
||||
this.footer,
|
||||
this.blurBackground = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<SophisticatedCard> createState() => _SophisticatedCardState();
|
||||
}
|
||||
|
||||
class _SophisticatedCardState extends State<SophisticatedCard>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _shadowAnimation;
|
||||
|
||||
bool _isPressed = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.98,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_shadowAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.7,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final borderRadius = widget.borderRadius ?? _getDefaultBorderRadius();
|
||||
final padding = widget.padding ?? _getDefaultPadding();
|
||||
final margin = widget.margin ?? EdgeInsets.zero;
|
||||
|
||||
Widget card = AnimatedBuilder(
|
||||
animation: _animationController,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: widget.animated ? _scaleAnimation.value : 1.0,
|
||||
child: Container(
|
||||
margin: margin,
|
||||
decoration: _getDecoration(borderRadius),
|
||||
child: ClipRRect(
|
||||
borderRadius: borderRadius,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.header != null) ...[
|
||||
widget.header!,
|
||||
const Divider(height: 1),
|
||||
],
|
||||
Flexible(
|
||||
child: Padding(
|
||||
padding: padding,
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
if (widget.footer != null) ...[
|
||||
const Divider(height: 1),
|
||||
widget.footer!,
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
if (widget.onTap != null || widget.onLongPress != null) {
|
||||
card = InkWell(
|
||||
onTap: widget.onTap != null ? _handleTap : null,
|
||||
onLongPress: widget.onLongPress,
|
||||
onTapDown: widget.animated ? (_) => _animationController.forward() : null,
|
||||
onTapUp: widget.animated ? (_) => _animationController.reverse() : null,
|
||||
onTapCancel: widget.animated ? () => _animationController.reverse() : null,
|
||||
borderRadius: borderRadius,
|
||||
splashColor: widget.showRipple ? null : Colors.transparent,
|
||||
highlightColor: widget.showRipple ? null : Colors.transparent,
|
||||
child: card,
|
||||
);
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
EdgeInsets _getDefaultPadding() {
|
||||
switch (widget.size) {
|
||||
case CardSize.compact:
|
||||
return const EdgeInsets.all(12);
|
||||
case CardSize.standard:
|
||||
return const EdgeInsets.all(16);
|
||||
case CardSize.expanded:
|
||||
return const EdgeInsets.all(24);
|
||||
}
|
||||
}
|
||||
|
||||
BorderRadius _getDefaultBorderRadius() {
|
||||
switch (widget.size) {
|
||||
case CardSize.compact:
|
||||
return BorderRadius.circular(12);
|
||||
case CardSize.standard:
|
||||
return BorderRadius.circular(16);
|
||||
case CardSize.expanded:
|
||||
return BorderRadius.circular(20);
|
||||
}
|
||||
}
|
||||
|
||||
double _getDefaultElevation() {
|
||||
switch (widget.variant) {
|
||||
case CardVariant.elevated:
|
||||
return widget.elevation ?? 8;
|
||||
case CardVariant.glass:
|
||||
return 12;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
Decoration _getDecoration(BorderRadius borderRadius) {
|
||||
final elevation = _getDefaultElevation();
|
||||
|
||||
switch (widget.variant) {
|
||||
case CardVariant.elevated:
|
||||
return BoxDecoration(
|
||||
color: widget.backgroundColor ?? Colors.white,
|
||||
borderRadius: borderRadius,
|
||||
boxShadow: widget.customShadow ?? [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1 * _shadowAnimation.value),
|
||||
blurRadius: elevation * _shadowAnimation.value,
|
||||
offset: Offset(0, elevation * 0.5 * _shadowAnimation.value),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
case CardVariant.outlined:
|
||||
return BoxDecoration(
|
||||
color: widget.backgroundColor ?? Colors.white,
|
||||
borderRadius: borderRadius,
|
||||
border: Border.all(
|
||||
color: widget.borderColor ?? AppTheme.textHint.withOpacity(0.2),
|
||||
width: 1,
|
||||
),
|
||||
);
|
||||
|
||||
case CardVariant.filled:
|
||||
return BoxDecoration(
|
||||
color: widget.backgroundColor ?? AppTheme.backgroundLight,
|
||||
borderRadius: borderRadius,
|
||||
);
|
||||
|
||||
case CardVariant.glass:
|
||||
return BoxDecoration(
|
||||
color: (widget.backgroundColor ?? Colors.white).withOpacity(0.9),
|
||||
borderRadius: borderRadius,
|
||||
border: Border.all(
|
||||
color: Colors.white.withOpacity(0.3),
|
||||
width: 1,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1 * _shadowAnimation.value),
|
||||
blurRadius: 20 * _shadowAnimation.value,
|
||||
offset: Offset(0, 8 * _shadowAnimation.value),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
case CardVariant.gradient:
|
||||
return BoxDecoration(
|
||||
gradient: widget.gradient ?? LinearGradient(
|
||||
colors: [
|
||||
widget.backgroundColor ?? AppTheme.primaryColor,
|
||||
(widget.backgroundColor ?? AppTheme.primaryColor).withOpacity(0.8),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: borderRadius,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: (widget.backgroundColor ?? AppTheme.primaryColor)
|
||||
.withOpacity(0.3 * _shadowAnimation.value),
|
||||
blurRadius: 15 * _shadowAnimation.value,
|
||||
offset: Offset(0, 8 * _shadowAnimation.value),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void _handleTap() {
|
||||
if (widget.animated) {
|
||||
HapticFeedback.lightImpact();
|
||||
}
|
||||
widget.onTap?.call();
|
||||
}
|
||||
}
|
||||
|
||||
// Predefined card variants
|
||||
class ElevatedCard extends SophisticatedCard {
|
||||
const ElevatedCard({
|
||||
super.key,
|
||||
required super.child,
|
||||
super.onTap,
|
||||
super.padding,
|
||||
super.margin,
|
||||
super.elevation,
|
||||
}) : super(variant: CardVariant.elevated);
|
||||
}
|
||||
|
||||
class OutlinedCard extends SophisticatedCard {
|
||||
const OutlinedCard({
|
||||
super.key,
|
||||
required super.child,
|
||||
super.onTap,
|
||||
super.padding,
|
||||
super.margin,
|
||||
super.borderColor,
|
||||
}) : super(variant: CardVariant.outlined);
|
||||
}
|
||||
|
||||
class GlassCard extends SophisticatedCard {
|
||||
const GlassCard({
|
||||
super.key,
|
||||
required super.child,
|
||||
super.onTap,
|
||||
super.padding,
|
||||
super.margin,
|
||||
}) : super(variant: CardVariant.glass);
|
||||
}
|
||||
|
||||
class GradientCard extends SophisticatedCard {
|
||||
const GradientCard({
|
||||
super.key,
|
||||
required super.child,
|
||||
super.onTap,
|
||||
super.padding,
|
||||
super.margin,
|
||||
super.gradient,
|
||||
super.backgroundColor,
|
||||
}) : super(variant: CardVariant.gradient);
|
||||
}
|
||||
213
unionflow-mobile-apps/lib/shared/widgets/coming_soon_page.dart
Normal file
213
unionflow-mobile-apps/lib/shared/widgets/coming_soon_page.dart
Normal file
@@ -0,0 +1,213 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
class ComingSoonPage extends StatelessWidget {
|
||||
final String title;
|
||||
final String description;
|
||||
final IconData icon;
|
||||
final Color color;
|
||||
final List<String>? features;
|
||||
|
||||
const ComingSoonPage({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.description,
|
||||
required this.icon,
|
||||
required this.color,
|
||||
this.features,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: AppTheme.backgroundLight,
|
||||
body: SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// Icône principale
|
||||
Container(
|
||||
width: 120,
|
||||
height: 120,
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
color,
|
||||
color.withOpacity(0.7),
|
||||
],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(60),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: color.withOpacity(0.3),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 10),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
size: 60,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Titre
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
fontSize: 28,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppTheme.textPrimary,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Description
|
||||
Text(
|
||||
description,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
color: AppTheme.textSecondary,
|
||||
height: 1.5,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Fonctionnalités à venir (si fournies)
|
||||
if (features != null) ...[
|
||||
Container(
|
||||
padding: const EdgeInsets.all(20),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.upcoming,
|
||||
color: color,
|
||||
size: 20,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
const Text(
|
||||
'Fonctionnalités à venir',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppTheme.textPrimary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
...features!.map((feature) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: BoxDecoration(
|
||||
color: color,
|
||||
borderRadius: BorderRadius.circular(3),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
feature,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)).toList(),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
],
|
||||
|
||||
// Badge "En développement"
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [
|
||||
AppTheme.infoColor,
|
||||
AppTheme.infoColor.withOpacity(0.8),
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(25),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppTheme.infoColor.withOpacity(0.3),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.construction,
|
||||
color: Colors.white,
|
||||
size: 16,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
const Text(
|
||||
'En cours de développement',
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Message d'encouragement
|
||||
Text(
|
||||
'Cette fonctionnalité sera bientôt disponible.\nMerci pour votre patience !',
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: AppTheme.textHint,
|
||||
height: 1.4,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
248
unionflow-mobile-apps/lib/shared/widgets/custom_text_field.dart
Normal file
248
unionflow-mobile-apps/lib/shared/widgets/custom_text_field.dart
Normal file
@@ -0,0 +1,248 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
class CustomTextField extends StatefulWidget {
|
||||
final TextEditingController controller;
|
||||
final String label;
|
||||
final String? hintText;
|
||||
final IconData? prefixIcon;
|
||||
final Widget? suffixIcon;
|
||||
final bool obscureText;
|
||||
final TextInputType keyboardType;
|
||||
final TextInputAction textInputAction;
|
||||
final String? Function(String?)? validator;
|
||||
final void Function(String)? onChanged;
|
||||
final void Function(String)? onFieldSubmitted;
|
||||
final bool enabled;
|
||||
final int maxLines;
|
||||
final int? maxLength;
|
||||
final List<TextInputFormatter>? inputFormatters;
|
||||
final bool autofocus;
|
||||
|
||||
const CustomTextField({
|
||||
super.key,
|
||||
required this.controller,
|
||||
required this.label,
|
||||
this.hintText,
|
||||
this.prefixIcon,
|
||||
this.suffixIcon,
|
||||
this.obscureText = false,
|
||||
this.keyboardType = TextInputType.text,
|
||||
this.textInputAction = TextInputAction.done,
|
||||
this.validator,
|
||||
this.onChanged,
|
||||
this.onFieldSubmitted,
|
||||
this.enabled = true,
|
||||
this.maxLines = 1,
|
||||
this.maxLength,
|
||||
this.inputFormatters,
|
||||
this.autofocus = false,
|
||||
});
|
||||
|
||||
@override
|
||||
State<CustomTextField> createState() => _CustomTextFieldState();
|
||||
}
|
||||
|
||||
class _CustomTextFieldState extends State<CustomTextField>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<Color?> _borderColorAnimation;
|
||||
late Animation<Color?> _labelColorAnimation;
|
||||
|
||||
bool _isFocused = false;
|
||||
String? _errorText;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_borderColorAnimation = ColorTween(
|
||||
begin: AppTheme.borderColor,
|
||||
end: AppTheme.primaryColor,
|
||||
).animate(_animationController);
|
||||
|
||||
_labelColorAnimation = ColorTween(
|
||||
begin: AppTheme.textSecondary,
|
||||
end: AppTheme.primaryColor,
|
||||
).animate(_animationController);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedBuilder(
|
||||
animation: _animationController,
|
||||
builder: (context, child) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Label
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Text(
|
||||
widget.label,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: _labelColorAnimation.value,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Champ de saisie
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: _isFocused
|
||||
? [
|
||||
BoxShadow(
|
||||
color: AppTheme.primaryColor.withOpacity(0.1),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
]
|
||||
: null,
|
||||
),
|
||||
child: TextFormField(
|
||||
controller: widget.controller,
|
||||
obscureText: widget.obscureText,
|
||||
keyboardType: widget.keyboardType,
|
||||
textInputAction: widget.textInputAction,
|
||||
enabled: widget.enabled,
|
||||
maxLines: widget.maxLines,
|
||||
maxLength: widget.maxLength,
|
||||
inputFormatters: widget.inputFormatters,
|
||||
autofocus: widget.autofocus,
|
||||
validator: (value) {
|
||||
final error = widget.validator?.call(value);
|
||||
setState(() {
|
||||
_errorText = error;
|
||||
});
|
||||
return error;
|
||||
},
|
||||
onChanged: widget.onChanged,
|
||||
onFieldSubmitted: widget.onFieldSubmitted,
|
||||
onTap: () {
|
||||
setState(() {
|
||||
_isFocused = true;
|
||||
});
|
||||
_animationController.forward();
|
||||
},
|
||||
onTapOutside: (_) {
|
||||
setState(() {
|
||||
_isFocused = false;
|
||||
});
|
||||
_animationController.reverse();
|
||||
FocusScope.of(context).unfocus();
|
||||
},
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
color: AppTheme.textPrimary,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
hintText: widget.hintText,
|
||||
hintStyle: const TextStyle(
|
||||
color: AppTheme.textHint,
|
||||
fontSize: 16,
|
||||
),
|
||||
prefixIcon: widget.prefixIcon != null
|
||||
? Icon(
|
||||
widget.prefixIcon,
|
||||
color: _isFocused
|
||||
? AppTheme.primaryColor
|
||||
: AppTheme.textHint,
|
||||
)
|
||||
: null,
|
||||
suffixIcon: widget.suffixIcon,
|
||||
filled: true,
|
||||
fillColor: widget.enabled
|
||||
? Colors.white
|
||||
: AppTheme.backgroundLight,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: _borderColorAnimation.value ?? AppTheme.borderColor,
|
||||
width: _isFocused ? 2 : 1,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: _errorText != null
|
||||
? AppTheme.errorColor
|
||||
: AppTheme.borderColor,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: _errorText != null
|
||||
? AppTheme.errorColor
|
||||
: AppTheme.primaryColor,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
errorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(
|
||||
color: AppTheme.errorColor,
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(
|
||||
color: AppTheme.errorColor,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
contentPadding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 16,
|
||||
),
|
||||
counterText: '',
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Message d'erreur
|
||||
if (_errorText != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 8, left: 4),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.error_outline,
|
||||
size: 16,
|
||||
color: AppTheme.errorColor,
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
Expanded(
|
||||
child: Text(
|
||||
_errorText!,
|
||||
style: const TextStyle(
|
||||
color: AppTheme.errorColor,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
203
unionflow-mobile-apps/lib/shared/widgets/loading_button.dart
Normal file
203
unionflow-mobile-apps/lib/shared/widgets/loading_button.dart
Normal file
@@ -0,0 +1,203 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
class LoadingButton extends StatefulWidget {
|
||||
final VoidCallback? onPressed;
|
||||
final String text;
|
||||
final bool isLoading;
|
||||
final double? width;
|
||||
final double height;
|
||||
final Color? backgroundColor;
|
||||
final Color? textColor;
|
||||
final IconData? icon;
|
||||
final bool enabled;
|
||||
|
||||
const LoadingButton({
|
||||
super.key,
|
||||
required this.onPressed,
|
||||
required this.text,
|
||||
this.isLoading = false,
|
||||
this.width,
|
||||
this.height = 48,
|
||||
this.backgroundColor,
|
||||
this.textColor,
|
||||
this.icon,
|
||||
this.enabled = true,
|
||||
});
|
||||
|
||||
@override
|
||||
State<LoadingButton> createState() => _LoadingButtonState();
|
||||
}
|
||||
|
||||
class _LoadingButtonState extends State<LoadingButton>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _animationController;
|
||||
late Animation<double> _scaleAnimation;
|
||||
late Animation<double> _opacityAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animationController = AnimationController(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
vsync: this,
|
||||
);
|
||||
|
||||
_scaleAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.95,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
|
||||
_opacityAnimation = Tween<double>(
|
||||
begin: 1.0,
|
||||
end: 0.8,
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeInOut,
|
||||
));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
bool get _isEnabled => widget.enabled && !widget.isLoading && widget.onPressed != null;
|
||||
|
||||
Color get _backgroundColor {
|
||||
if (!_isEnabled) {
|
||||
return AppTheme.textHint.withOpacity(0.3);
|
||||
}
|
||||
return widget.backgroundColor ?? AppTheme.primaryColor;
|
||||
}
|
||||
|
||||
Color get _textColor {
|
||||
if (!_isEnabled) {
|
||||
return AppTheme.textHint;
|
||||
}
|
||||
return widget.textColor ?? Colors.white;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AnimatedBuilder(
|
||||
animation: _animationController,
|
||||
builder: (context, child) {
|
||||
return Transform.scale(
|
||||
scale: _scaleAnimation.value,
|
||||
child: Opacity(
|
||||
opacity: _opacityAnimation.value,
|
||||
child: Container(
|
||||
width: widget.width,
|
||||
height: widget.height,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
boxShadow: _isEnabled
|
||||
? [
|
||||
BoxShadow(
|
||||
color: _backgroundColor.withOpacity(0.3),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 4),
|
||||
),
|
||||
]
|
||||
: null,
|
||||
),
|
||||
child: ElevatedButton(
|
||||
onPressed: _isEnabled ? _handlePressed : null,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: _backgroundColor,
|
||||
foregroundColor: _textColor,
|
||||
elevation: 0,
|
||||
shadowColor: Colors.transparent,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
),
|
||||
child: _buildButtonContent(),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildButtonContent() {
|
||||
if (widget.isLoading) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
valueColor: AlwaysStoppedAnimation<Color>(_textColor),
|
||||
strokeWidth: 2,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
'Chargement...',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: _textColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (widget.icon != null) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
widget.icon,
|
||||
size: 20,
|
||||
color: _textColor,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
widget.text,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: _textColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return Text(
|
||||
widget.text,
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: _textColor,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _handlePressed() {
|
||||
if (!_isEnabled) return;
|
||||
|
||||
// Animation de pression
|
||||
_animationController.forward().then((_) {
|
||||
_animationController.reverse();
|
||||
});
|
||||
|
||||
// Vibration tactile
|
||||
HapticFeedback.lightImpact();
|
||||
|
||||
// Callback
|
||||
widget.onPressed?.call();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user