lionsdev/unionflow-server-impl-quarkus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
DahoudG
2025-08-20 21:00:35 +00:00
commit b2a23bdf89
583 changed files with 243074 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
unionflow-mobile-apps/lib/shared/widgets/avatars/sophisticated_avatar.dart Normal file
View File

@@ -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
View 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,
),
),
],
);
}
}

405
unionflow-mobile-apps/lib/shared/widgets/badges/status_badge.dart Normal file
View File

@@ -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,
);
}
}

383
unionflow-mobile-apps/lib/shared/widgets/buttons/button_group.dart Normal file
View File

@@ -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
View 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,
);
}
}

400
unionflow-mobile-apps/lib/shared/widgets/buttons/floating_action_button.dart Normal file
View File

@@ -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,
});
}

356
unionflow-mobile-apps/lib/shared/widgets/buttons/icon_button.dart Normal file
View File

@@ -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,
});
}

554
unionflow-mobile-apps/lib/shared/widgets/buttons/sophisticated_button.dart Normal file
View File

@@ -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,
});
}

322
unionflow-mobile-apps/lib/shared/widgets/cards/sophisticated_card.dart Normal file
View File

@@ -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
View 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
View 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
View 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();
}
}