2026-04-05-maplibra succsess for all and add navigation paage

This commit is contained in:
Hamza-Ayed
2026-04-05 02:50:22 +03:00
parent 8d5fefc9e3
commit 4d5800ff9b
11 changed files with 3512 additions and 1306 deletions

View File

@@ -1,5 +1,4 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:vibration/vibration.dart';
@@ -9,50 +8,175 @@ import '../../constant/colors.dart';
import '../../constant/style.dart';
import '../../main.dart';
class MyElevatedButton extends StatelessWidget {
class MyElevatedButton extends StatefulWidget {
final String title;
final VoidCallback onPressed;
final Color kolor;
final int vibrateDuration;
final IconData? icon;
final bool isLoading;
final double? height;
final double? fontSize;
const MyElevatedButton({
Key? key,
required this.title,
required this.onPressed,
this.kolor = AppColor.primaryColor,
this.vibrateDuration = 100,
this.vibrateDuration = 50, // Shorter = crisper feedback
this.icon,
this.isLoading = false,
this.height = 52,
this.fontSize,
}) : super(key: key);
@override
Widget build(BuildContext context) {
bool vibrate = box.read(BoxName.isvibrate) ?? true;
return ElevatedButton(
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(kolor),
shadowColor: WidgetStateProperty.all(Colors.transparent),
shape: WidgetStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
),
onPressed: () async {
// Handle haptic feedback for both iOS and Android
if (vibrate == true) {
if (Platform.isIOS) {
HapticFeedback.selectionClick();
} else if (Platform.isAndroid) {
await Vibration.vibrate(duration: vibrateDuration);
} else {}
}
State<MyElevatedButton> createState() => _MyElevatedButtonState();
}
// Ensure the onPressed callback is called after haptic feedback
onPressed();
class _MyElevatedButtonState extends State<MyElevatedButton>
with SingleTickerProviderStateMixin {
late final AnimationController _pressController;
bool _isVibrateEnabled = true;
@override
void initState() {
super.initState();
_pressController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 120),
reverseDuration: const Duration(milliseconds: 180),
);
_loadVibratePreference();
}
Future<void> _loadVibratePreference() async {
// Reactive to preference changes if needed later
setState(() {
_isVibrateEnabled = box.read(BoxName.isvibrate) ?? true;
});
}
@override
void dispose() {
_pressController.dispose();
super.dispose();
}
void _triggerHaptic() {
if (!_isVibrateEnabled) return;
// Unified approach: HapticFeedback works well on both platforms
if (Platform.isIOS) {
HapticFeedback.lightImpact();
} else if (Platform.isAndroid) {
// Try native haptic first, fallback to Vibration package if needed
HapticFeedback.mediumImpact();
// Optional stronger feedback:
// Vibration.vibrate(duration: widget.vibrateDuration);
}
}
void _handlePress() {
if (widget.isLoading) return;
_triggerHaptic();
_pressController.forward().then((_) => _pressController.reverse());
// Small delay ensures animation starts before callback
Future.delayed(const Duration(milliseconds: 80), widget.onPressed);
}
@override
Widget build(BuildContext context) {
final isEnabled = !widget.isLoading && widget.onPressed != () {};
return AnimatedBuilder(
animation: _pressController,
builder: (context, child) {
final scale = 1.0 - (_pressController.value * 0.03);
return Transform.scale(
scale: scale,
child: Container(
height: widget.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
boxShadow: isEnabled
? [
BoxShadow(
color: widget.kolor.withOpacity(0.25),
blurRadius: 12,
offset: const Offset(0, 4),
),
]
: null,
),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: WidgetStateProperty.resolveWith<Color>(
(states) {
if (!isEnabled) return widget.kolor.withOpacity(0.5);
if (states.contains(WidgetState.pressed)) {
return widget.kolor.withOpacity(0.92);
}
return widget.kolor;
},
),
elevation: WidgetStateProperty.resolveWith<double>(
(states) => isEnabled
? (states.contains(WidgetState.pressed) ? 2 : 6)
: 0,
),
shape: WidgetStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
padding: WidgetStateProperty.all(
const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
),
),
onPressed: isEnabled ? _handlePress : null,
child: _buildContent(),
),
),
);
},
child: Text(
title,
textAlign: TextAlign.center,
style: AppStyle.title.copyWith(color: AppColor.secondaryColor),
),
);
}
Widget _buildContent() {
if (widget.isLoading) {
return SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2.5,
valueColor: AlwaysStoppedAnimation<Color>(AppColor.secondaryColor),
),
);
}
final textStyle = AppStyle.title.copyWith(
color: AppColor.secondaryColor,
fontSize: widget.fontSize,
fontWeight: FontWeight.w600,
letterSpacing: 0.3,
);
if (widget.icon != null) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(widget.icon, size: 18, color: AppColor.secondaryColor),
const SizedBox(width: 8),
Text(widget.title, style: textStyle, textAlign: TextAlign.center),
],
);
}
return Text(widget.title, style: textStyle, textAlign: TextAlign.center);
}
}

View File

@@ -1,547 +1,292 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'dart:ui';
import '../../constant/colors.dart';
class SnackbarConfig {
static const duration = Duration(seconds: 4);
static const animationDuration = Duration(milliseconds: 400);
static const margin = EdgeInsets.symmetric(horizontal: 16, vertical: 12);
static const borderRadius = 16.0;
static const elevation = 0.0; // تقليل الارتفاع لأننا سنستخدم تأثيرات زجاجية
// ─────────────────────────────────────────────────────────────────────────────
// Snackbar variant definition
// ─────────────────────────────────────────────────────────────────────────────
enum _SnackVariant { success, error, info, warning }
// تأثير زجاجي
static const double blurStrength = 15.0;
static const double opacity = 0.85;
extension _VariantProps on _SnackVariant {
Color get baseColor => switch (this) {
_SnackVariant.success => const Color(0xFF1A9E5C),
_SnackVariant.error => const Color(0xFFD93025),
_SnackVariant.info => const Color(0xFF1A73E8),
_SnackVariant.warning => const Color(0xFFF29900),
};
// حدود شفافة
static final Border glassBorder = Border.all(
color: Colors.white.withOpacity(0.25),
width: 1.5,
);
Color get surfaceColor => switch (this) {
_SnackVariant.success => const Color(0xFFF0FBF5),
_SnackVariant.error => const Color(0xFFFEF2F1),
_SnackVariant.info => const Color(0xFFF0F6FF),
_SnackVariant.warning => const Color(0xFFFFF8E6),
};
// ظل أكثر نعومة وانتشار
static final List<BoxShadow> shadows = [
BoxShadow(
color: Colors.black.withOpacity(0.15),
blurRadius: 12,
spreadRadius: 1,
offset: const Offset(0, 4),
),
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 20,
spreadRadius: 0,
offset: const Offset(0, 2),
),
];
IconData get icon => switch (this) {
_SnackVariant.success => Icons.check_circle_rounded,
_SnackVariant.error => Icons.error_rounded,
_SnackVariant.info => Icons.info_rounded,
_SnackVariant.warning => Icons.warning_amber_rounded,
};
String get label => switch (this) {
_SnackVariant.success => 'Success',
_SnackVariant.error => 'Error',
_SnackVariant.info => 'Info',
_SnackVariant.warning => 'Warning',
};
HapticFeedbackType get haptic => switch (this) {
_SnackVariant.error => HapticFeedbackType.medium,
_SnackVariant.warning => HapticFeedbackType.medium,
_SnackVariant.success => HapticFeedbackType.light,
_SnackVariant.info => HapticFeedbackType.selection,
};
}
// تطبيق تأثير زجاجي باستخدام Container مخصص
class GlassSnackbar extends StatelessWidget {
final Color baseColor;
final Widget child;
enum HapticFeedbackType { light, medium, selection }
const GlassSnackbar({
required this.baseColor,
required this.child,
Key? key,
}) : super(key: key);
// ─────────────────────────────────────────────────────────────────────────────
// Core snackbar widget
// ─────────────────────────────────────────────────────────────────────────────
class _SnackContent extends StatefulWidget {
final String message;
final _SnackVariant variant;
const _SnackContent({required this.message, required this.variant});
@override
State<_SnackContent> createState() => _SnackContentState();
}
class _SnackContentState extends State<_SnackContent>
with TickerProviderStateMixin {
late final AnimationController _ctrl;
late final Animation<double> _scaleAnim;
late final Animation<double> _progressAnim;
static const Duration _displayDuration = Duration(seconds: 4);
@override
void initState() {
super.initState();
_ctrl = AnimationController(vsync: this, duration: _displayDuration);
_scaleAnim = CurvedAnimation(
parent: AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
)..forward(),
curve: Curves.elasticOut,
);
_progressAnim = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _ctrl, curve: Curves.linear),
);
_ctrl.forward();
}
@override
void dispose() {
_ctrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(SnackbarConfig.borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: SnackbarConfig.blurStrength,
sigmaY: SnackbarConfig.blurStrength,
),
child: Container(
decoration: BoxDecoration(
color: baseColor.withOpacity(SnackbarConfig.opacity),
borderRadius: BorderRadius.circular(SnackbarConfig.borderRadius),
border: SnackbarConfig.glassBorder,
boxShadow: SnackbarConfig.shadows,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
baseColor.withOpacity(SnackbarConfig.opacity + 0.05),
baseColor.withOpacity(SnackbarConfig.opacity - 0.05),
],
),
final v = widget.variant;
final accent = v.baseColor;
final surface = v.surfaceColor;
return Container(
margin: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: surface,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: accent.withOpacity(0.18), width: 1.2),
boxShadow: [
BoxShadow(
color: accent.withOpacity(0.12),
blurRadius: 20,
spreadRadius: -2,
offset: const Offset(0, 6),
),
child: child,
BoxShadow(
color: Colors.black.withOpacity(0.06),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(18),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// ── Main row ──────────────────────────────────────────────────
Padding(
padding: const EdgeInsets.fromLTRB(14, 14, 10, 12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Animated icon badge
ScaleTransition(
scale: _scaleAnim,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: accent.withOpacity(0.12),
shape: BoxShape.circle,
),
child: Icon(v.icon, color: accent, size: 22),
),
),
const SizedBox(width: 12),
// Text content
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
v.label.tr,
style: TextStyle(
color: accent,
fontSize: 13,
fontWeight: FontWeight.w700,
letterSpacing: 0.2,
),
),
const SizedBox(height: 3),
Text(
widget.message,
style: TextStyle(
color: Colors.grey[800],
fontSize: 13.5,
height: 1.4,
fontWeight: FontWeight.w400,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
// Close button
GestureDetector(
onTap: () {
HapticFeedback.lightImpact();
Get.closeCurrentSnackbar();
},
child: Container(
width: 30,
height: 30,
margin: const EdgeInsets.only(left: 6),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.1),
shape: BoxShape.circle,
),
child: Icon(
Icons.close_rounded,
size: 16,
color: Colors.grey[500],
),
),
),
],
),
),
// ── Thin progress strip ───────────────────────────────────────
AnimatedBuilder(
animation: _progressAnim,
builder: (_, __) => Stack(
children: [
// Track
Container(
height: 3,
color: accent.withOpacity(0.08),
),
// Fill
FractionallySizedBox(
widthFactor: _progressAnim.value,
child: Container(
height: 3,
decoration: BoxDecoration(
color: accent.withOpacity(0.45),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(4),
bottomRight: Radius.circular(4),
),
),
),
),
],
),
),
],
),
),
);
}
}
SnackbarController mySnackeBarError(String message) {
// تأثير اهتزاز للأخطاء
HapticFeedback.mediumImpact();
// ─────────────────────────────────────────────────────────────────────────────
// Internal dispatcher — single source of truth
// ─────────────────────────────────────────────────────────────────────────────
SnackbarController _show(_SnackVariant variant, String message) {
// Dismiss any existing snackbar first (no stacking)
if (Get.isSnackbarOpen) Get.closeCurrentSnackbar();
final Color errorBaseColor = AppColor.redColor;
switch (variant.haptic) {
case HapticFeedbackType.light:
HapticFeedback.lightImpact();
case HapticFeedbackType.medium:
HapticFeedback.mediumImpact();
case HapticFeedbackType.selection:
HapticFeedback.selectionClick();
}
return Get.snackbar(
'',
'',
snackPosition: SnackPosition.TOP,
margin: SnackbarConfig.margin,
duration: SnackbarConfig.duration,
animationDuration: SnackbarConfig.animationDuration,
borderRadius: SnackbarConfig.borderRadius,
backgroundColor: Colors.transparent, // شفاف لأننا سنستخدم حاوية مخصصة
barBlur: 0, // إيقاف تشويش الخلفية الافتراضي لأننا سنستخدم BlurFilter
overlayBlur: 1.5,
overlayColor: Colors.black12,
userInputForm: Form(
child: GlassSnackbar(
baseColor: errorBaseColor,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
child: Row(
children: [
// أيقونة متحركة
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 500),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: child,
);
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.25),
shape: BoxShape.circle,
),
child: const Icon(
Icons.error_rounded,
color: Colors.white,
size: 26,
),
),
),
const SizedBox(width: 16),
// محتوى النص
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Error'.tr,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 16,
letterSpacing: 0.3,
shadows: [
Shadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2,
),
],
),
),
const SizedBox(height: 4),
Text(
message,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
height: 1.3,
fontWeight: FontWeight.w400,
),
),
],
),
),
// زر الإغلاق
InkWell(
onTap: () {
HapticFeedback.lightImpact();
Get.closeCurrentSnackbar();
},
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
shape: BoxShape.circle,
),
child: const Icon(
Icons.close_rounded,
color: Colors.white,
size: 18,
),
),
),
],
),
),
),
),
backgroundColor: Colors.transparent,
margin: EdgeInsets.zero,
padding: EdgeInsets.zero,
duration: const Duration(seconds: 4),
animationDuration: const Duration(milliseconds: 380),
barBlur: 0,
overlayBlur: 0,
overlayColor: Colors.transparent,
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.easeOutBack,
dismissDirection: DismissDirection.up,
forwardAnimationCurve: Curves.easeOutCubic,
reverseAnimationCurve: Curves.easeInCubic,
snackStyle: SnackStyle.FLOATING,
userInputForm: Form(
child: _SnackContent(message: message, variant: variant),
),
);
}
SnackbarController mySnackbarSuccess(String message) {
// تأثير اهتزاز للنجاح
HapticFeedback.lightImpact();
// ─────────────────────────────────────────────────────────────────────────────
// Public API — drop-in replacements for the old functions
// ─────────────────────────────────────────────────────────────────────────────
SnackbarController mySnackbarSuccess(String message) =>
_show(_SnackVariant.success, message);
final Color successBaseColor = AppColor.greenColor;
SnackbarController mySnackeBarError(String message) =>
_show(_SnackVariant.error, message);
return Get.snackbar(
'',
'',
snackPosition: SnackPosition.TOP,
margin: SnackbarConfig.margin,
duration: SnackbarConfig.duration,
animationDuration: SnackbarConfig.animationDuration,
borderRadius: SnackbarConfig.borderRadius,
backgroundColor: Colors.transparent, // شفاف لأننا سنستخدم حاوية مخصصة
barBlur: 0, // إيقاف تشويش الخلفية الافتراضي لأننا سنستخدم BlurFilter
overlayBlur: 1.5,
overlayColor: Colors.black12,
userInputForm: Form(
child: GlassSnackbar(
baseColor: successBaseColor,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
child: Row(
children: [
// أيقونة متحركة
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 600),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: child,
);
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.25),
shape: BoxShape.circle,
),
child: const Icon(
Icons.check_circle_rounded,
color: Colors.white,
size: 26,
),
),
),
const SizedBox(width: 16),
// محتوى النص
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Success'.tr,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 16,
letterSpacing: 0.3,
shadows: [
Shadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2,
),
],
),
),
const SizedBox(height: 4),
Text(
message,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
height: 1.3,
fontWeight: FontWeight.w400,
),
),
],
),
),
// زر الإغلاق
InkWell(
onTap: () {
HapticFeedback.lightImpact();
Get.closeCurrentSnackbar();
},
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
shape: BoxShape.circle,
),
child: const Icon(
Icons.close_rounded,
color: Colors.white,
size: 18,
),
),
),
],
),
),
),
),
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.easeOutBack,
reverseAnimationCurve: Curves.easeInCubic,
);
}
SnackbarController mySnackbarInfo(String message) =>
_show(_SnackVariant.info, message);
// إضافة: دالة للمعلومات والتنبيهات
SnackbarController mySnackbarInfo(String message) {
// تأثير اهتزاز خفيف
HapticFeedback.selectionClick();
final Color infoBaseColor = Colors.blue;
return Get.snackbar(
'',
'',
snackPosition: SnackPosition.TOP,
margin: SnackbarConfig.margin,
duration: SnackbarConfig.duration,
animationDuration: SnackbarConfig.animationDuration,
borderRadius: SnackbarConfig.borderRadius,
backgroundColor: Colors.transparent, // شفاف لأننا سنستخدم حاوية مخصصة
barBlur: 0, // إيقاف تشويش الخلفية الافتراضي لأننا سنستخدم BlurFilter
overlayBlur: 1.5,
overlayColor: Colors.black12,
userInputForm: Form(
child: GlassSnackbar(
baseColor: infoBaseColor,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
child: Row(
children: [
// أيقونة متحركة
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 500),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: child,
);
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.25),
shape: BoxShape.circle,
),
child: const Icon(
Icons.info_rounded,
color: Colors.white,
size: 26,
),
),
),
const SizedBox(width: 16),
// محتوى النص
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Info'.tr,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 16,
letterSpacing: 0.3,
shadows: [
Shadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2,
),
],
),
),
const SizedBox(height: 4),
Text(
message,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
height: 1.3,
fontWeight: FontWeight.w400,
),
),
],
),
),
// زر الإغلاق
InkWell(
onTap: () {
HapticFeedback.lightImpact();
Get.closeCurrentSnackbar();
},
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
shape: BoxShape.circle,
),
child: const Icon(
Icons.close_rounded,
color: Colors.white,
size: 18,
),
),
),
],
),
),
),
),
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.easeOutBack,
reverseAnimationCurve: Curves.easeInCubic,
);
}
// إضافة: دالة للتحذيرات
SnackbarController mySnackbarWarning(String message) {
// تأثير اهتزاز متوسط
HapticFeedback.mediumImpact();
final Color warningBaseColor = Colors.orange;
return Get.snackbar(
'',
'',
snackPosition: SnackPosition.TOP,
margin: SnackbarConfig.margin,
duration: SnackbarConfig.duration,
animationDuration: SnackbarConfig.animationDuration,
borderRadius: SnackbarConfig.borderRadius,
backgroundColor: Colors.transparent, // شفاف لأننا سنستخدم حاوية مخصصة
barBlur: 0, // إيقاف تشويش الخلفية الافتراضي لأننا سنستخدم BlurFilter
overlayBlur: 1.5,
overlayColor: Colors.black12,
userInputForm: Form(
child: GlassSnackbar(
baseColor: warningBaseColor,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
child: Row(
children: [
// أيقونة متحركة
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 500),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: child,
);
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.25),
shape: BoxShape.circle,
),
child: const Icon(
Icons.warning_rounded,
color: Colors.white,
size: 26,
),
),
),
const SizedBox(width: 16),
// محتوى النص
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Warning'.tr,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: Colors.white,
fontSize: 16,
letterSpacing: 0.3,
shadows: [
Shadow(
color: Colors.black26,
offset: Offset(0, 1),
blurRadius: 2,
),
],
),
),
const SizedBox(height: 4),
Text(
message,
style: const TextStyle(
color: Colors.white,
fontSize: 14,
height: 1.3,
fontWeight: FontWeight.w400,
),
),
],
),
),
// زر الإغلاق
InkWell(
onTap: () {
HapticFeedback.lightImpact();
Get.closeCurrentSnackbar();
},
child: Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
shape: BoxShape.circle,
),
child: const Icon(
Icons.close_rounded,
color: Colors.white,
size: 18,
),
),
),
],
),
),
),
),
isDismissible: true,
dismissDirection: DismissDirection.horizontal,
forwardAnimationCurve: Curves.easeOutBack,
reverseAnimationCurve: Curves.easeInCubic,
);
}
SnackbarController mySnackbarWarning(String message) =>
_show(_SnackVariant.warning, message);

View File

@@ -1,68 +1,151 @@
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/material.dart';
import '../../constant/style.dart';
class MyCircularProgressIndicatorWithTimer extends StatelessWidget {
class MyCircularProgressIndicatorWithTimer extends StatefulWidget {
final Color backgroundColor;
final bool isLoading;
MyCircularProgressIndicatorWithTimer({
const MyCircularProgressIndicatorWithTimer({
Key? key,
this.backgroundColor = Colors.transparent,
this.backgroundColor = Colors.white,
required this.isLoading,
}) : super(key: key);
final StreamController<int> _streamController = StreamController<int>();
@override
State<MyCircularProgressIndicatorWithTimer> createState() =>
_MyCircularProgressIndicatorWithTimerState();
}
void startTimer() {
int _timeLeft = 60;
Timer.periodic(const Duration(seconds: 1), (timer) {
if (_timeLeft > 0 && isLoading) {
_streamController.add(_timeLeft);
_timeLeft--;
} else {
timer.cancel();
_streamController.close();
}
class _MyCircularProgressIndicatorWithTimerState
extends State<MyCircularProgressIndicatorWithTimer> {
Timer? _timer;
int _timeLeft = 60;
bool _isLowTime = false;
@override
void initState() {
super.initState();
if (widget.isLoading) _startTimer();
}
@override
void didUpdateWidget(
covariant MyCircularProgressIndicatorWithTimer oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.isLoading && !oldWidget.isLoading) {
_resetTimer();
_startTimer();
} else if (!widget.isLoading && oldWidget.isLoading) {
_cancelTimer();
}
}
void _startTimer() {
_cancelTimer(); // Ensure no duplicate timers
_timer = Timer.periodic(const Duration(seconds: 1), (_) {
if (!mounted) return;
setState(() {
if (_timeLeft > 0) {
_timeLeft--;
_isLowTime = _timeLeft <= 10;
} else {
_cancelTimer();
}
});
});
}
void _resetTimer() {
_cancelTimer();
setState(() {
_timeLeft = 60;
_isLowTime = false;
});
}
void _cancelTimer() {
_timer?.cancel();
_timer = null;
}
@override
void dispose() {
_cancelTimer();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (isLoading) {
startTimer();
}
if (!widget.isLoading) return const SizedBox.shrink();
final progress = _timeLeft / 60.0;
final timerColor = _isLowTime ? Colors.orangeAccent : Colors.blueAccent;
return Center(
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
color: backgroundColor,
color: widget.backgroundColor == Colors.transparent
? Colors.white.withOpacity(0.96)
: widget.backgroundColor,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 24,
spreadRadius: 2,
offset: const Offset(0, 8),
),
],
),
child: Stack(
alignment: Alignment.center,
children: [
const Center(child: CircularProgressIndicator()),
// Elegant circular progress ring
SizedBox(
width: 184,
height: 184,
child: CircularProgressIndicator(
value: progress,
strokeWidth: 6,
backgroundColor: Colors.grey.shade100,
valueColor: AlwaysStoppedAnimation<Color>(timerColor),
strokeCap: StrokeCap.round,
),
),
// Center content
Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Align(
alignment: Alignment.center,
// Subtle scale animation when time is low
AnimatedContainer(
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutCubic,
transform: Matrix4.identity()..scale(_isLowTime ? 1.08 : 1.0),
child: Image.asset(
'assets/images/logo.gif',
width: 140,
height: 140,
width: 96,
height: 96,
fit: BoxFit.contain,
),
),
const SizedBox(height: 10),
StreamBuilder<int>(
stream: _streamController.stream,
initialData: 60,
builder: (context, snapshot) {
return Text('${snapshot.data}', style: AppStyle.title);
},
const SizedBox(height: 14),
// Clean, modern timer text
AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
color: _isLowTime
? Colors.orangeAccent
: Colors.blueGrey.shade800,
letterSpacing: 1.2,
fontFeatures: const [FontFeature.tabularFigures()],
),
child: Text('${_timeLeft}s'),
),
],
),

View File

@@ -8,239 +8,501 @@ import '../../constant/colors.dart';
import '../../constant/style.dart';
import '../../controller/functions/tts.dart';
class DialogConfig {
static const Duration animationDuration = Duration(milliseconds: 200);
static const double blurStrength = 8.0;
static const double cornerRadius = 14.0;
static final BoxDecoration decoration = BoxDecoration(
borderRadius: BorderRadius.circular(cornerRadius),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(38), // 0.15 opacity
blurRadius: 16,
offset: const Offset(0, 8),
),
],
);
// ─────────────────────────────────────────────────────────────────────────────
// Config
// ─────────────────────────────────────────────────────────────────────────────
class _DC {
static const Duration animDuration = Duration(milliseconds: 280);
static const double blur = 20.0;
static const double radius = 24.0;
static const Color barrierColor = Color(0x66000000);
}
// ─────────────────────────────────────────────────────────────────────────────
// Shared animated wrapper — every dialog uses this
// ─────────────────────────────────────────────────────────────────────────────
class _DialogShell extends StatelessWidget {
final Widget child;
const _DialogShell({required this.child});
@override
Widget build(BuildContext context) {
return TweenAnimationBuilder<double>(
duration: _DC.animDuration,
tween: Tween(begin: 0.0, end: 1.0),
curve: Curves.easeOutBack,
builder: (_, v, c) => Transform.scale(
scale: 0.88 + (0.12 * v),
child: Opacity(opacity: v.clamp(0.0, 1.0), child: c),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: _DC.blur, sigmaY: _DC.blur),
child: Dialog(
backgroundColor: Colors.transparent,
insetPadding:
const EdgeInsets.symmetric(horizontal: 28, vertical: 40),
child: child,
),
),
);
}
}
// ─────────────────────────────────────────────────────────────────────────────
// Shared glass card
// ─────────────────────────────────────────────────────────────────────────────
class _GlassCard extends StatelessWidget {
final Widget child;
const _GlassCard({required this.child});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(_DC.radius),
gradient: LinearGradient(
colors: [
Colors.white.withOpacity(0.95),
Colors.white.withOpacity(0.88),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.18),
blurRadius: 40,
spreadRadius: -4,
offset: const Offset(0, 16),
),
BoxShadow(
color: AppColor.primaryColor.withOpacity(0.08),
blurRadius: 20,
offset: const Offset(0, 4),
),
],
border: Border.all(
color: Colors.white.withOpacity(0.6),
width: 1.2,
),
),
child: child,
);
}
}
// ─────────────────────────────────────────────────────────────────────────────
// Shared bottom action row
// ─────────────────────────────────────────────────────────────────────────────
class _ActionRow extends StatelessWidget {
final VoidCallback onCancel;
final VoidCallback onConfirm;
final String confirmLabel;
final bool isDestructive;
const _ActionRow({
required this.onCancel,
required this.onConfirm,
this.confirmLabel = 'OK',
this.isDestructive = false,
});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.grey.withOpacity(0.15), width: 1),
),
),
child: Row(
children: [
// Cancel
Expanded(
child: _ActionButton(
label: 'Cancel'.tr,
color: Colors.grey[600]!,
backgroundColor: Colors.grey.withOpacity(0.07),
onPressed: () {
HapticFeedback.lightImpact();
onCancel();
},
isLeft: true,
),
),
Container(width: 1, height: 52, color: Colors.grey.withOpacity(0.15)),
// Confirm
Expanded(
child: _ActionButton(
label: confirmLabel,
color: isDestructive ? AppColor.redColor : AppColor.primaryColor,
backgroundColor: isDestructive
? AppColor.redColor.withOpacity(0.07)
: AppColor.primaryColor.withOpacity(0.07),
onPressed: () {
HapticFeedback.mediumImpact();
onConfirm();
},
isLeft: false,
isBold: true,
),
),
],
),
);
}
}
class _ActionButton extends StatelessWidget {
final String label;
final Color color;
final Color backgroundColor;
final VoidCallback onPressed;
final bool isLeft;
final bool isBold;
const _ActionButton({
required this.label,
required this.color,
required this.backgroundColor,
required this.onPressed,
required this.isLeft,
this.isBold = false,
});
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: onPressed,
borderRadius: BorderRadius.only(
bottomLeft: isLeft ? const Radius.circular(_DC.radius) : Radius.zero,
bottomRight:
!isLeft ? const Radius.circular(_DC.radius) : Radius.zero,
),
child: Container(
height: 52,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.only(
bottomLeft:
isLeft ? const Radius.circular(_DC.radius) : Radius.zero,
bottomRight:
!isLeft ? const Radius.circular(_DC.radius) : Radius.zero,
),
),
alignment: Alignment.center,
child: Text(
label,
style: TextStyle(
color: color,
fontSize: 15,
fontWeight: isBold ? FontWeight.w700 : FontWeight.w500,
letterSpacing: -0.2,
),
),
),
),
);
}
}
// ─────────────────────────────────────────────────────────────────────────────
// TTS speak button
// ─────────────────────────────────────────────────────────────────────────────
class _SpeakButton extends StatefulWidget {
final List<String> texts;
const _SpeakButton({required this.texts});
@override
State<_SpeakButton> createState() => _SpeakButtonState();
}
class _SpeakButtonState extends State<_SpeakButton>
with SingleTickerProviderStateMixin {
bool _speaking = false;
late AnimationController _pulse;
@override
void initState() {
super.initState();
_pulse = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 900),
lowerBound: 0.92,
upperBound: 1.0,
);
}
@override
void dispose() {
_pulse.dispose();
super.dispose();
}
Future<void> _onTap() async {
if (_speaking) return;
HapticFeedback.selectionClick();
setState(() => _speaking = true);
_pulse.repeat(reverse: true);
final tts = Get.put(TextToSpeechController());
for (final t in widget.texts) {
await tts.speakText(t);
}
_pulse.stop();
_pulse.reset();
if (mounted) setState(() => _speaking = false);
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _onTap,
child: AnimatedBuilder(
animation: _pulse,
builder: (_, child) =>
Transform.scale(scale: _pulse.value, child: child),
child: AnimatedContainer(
duration: const Duration(milliseconds: 250),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: _speaking
? AppColor.primaryColor.withOpacity(0.15)
: AppColor.primaryColor.withOpacity(0.08),
borderRadius: BorderRadius.circular(30),
border: Border.all(
color: AppColor.primaryColor.withOpacity(_speaking ? 0.4 : 0.15),
width: 1,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_speaking
? CupertinoIcons.speaker_3_fill
: CupertinoIcons.speaker_2_fill,
color: AppColor.primaryColor,
size: 16,
),
const SizedBox(width: 6),
Text(
_speaking ? 'Speaking...'.tr : 'Listen'.tr,
style: TextStyle(
color: AppColor.primaryColor,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
);
}
}
// ─────────────────────────────────────────────────────────────────────────────
// MyDialog — title + text content
// ─────────────────────────────────────────────────────────────────────────────
class MyDialog extends GetxController {
void getDialog(String title, String? midTitle, VoidCallback onPressed) {
final textToSpeechController = Get.put(TextToSpeechController());
void getDialog(
String title,
String? midTitle,
VoidCallback onPressed, {
IconData? icon,
bool isDestructive = false,
}) {
HapticFeedback.mediumImpact();
Get.dialog(
TweenAnimationBuilder<double>(
duration: DialogConfig.animationDuration,
tween: Tween(begin: 0.0, end: 1.0),
builder: (context, value, child) {
return Transform.scale(
scale: 0.95 + (0.05 * value),
child: Opacity(opacity: value, child: child),
);
},
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: DialogConfig.blurStrength,
sigmaY: DialogConfig.blurStrength,
),
child: Theme(
data: ThemeData.light().copyWith(
dialogBackgroundColor: CupertinoColors.systemBackground,
),
child: CupertinoAlertDialog(
title: Column(
children: [
Text(
title,
style: AppStyle.title.copyWith(
fontSize: 20,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: AppColor.primaryColor,
),
),
const SizedBox(height: 8),
],
),
content: Column(
children: [
CupertinoButton(
padding: const EdgeInsets.all(8),
onPressed: () async {
HapticFeedback.selectionClick();
await textToSpeechController.speakText(title);
await textToSpeechController.speakText(midTitle!);
},
child: Container(
padding: const EdgeInsets.all(8),
_DialogShell(
child: _GlassCard(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// ── Body ──────────────────────────────────────────────
Padding(
padding: const EdgeInsets.fromLTRB(24, 28, 24, 20),
child: Column(
children: [
// Icon badge
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color:
AppColor.primaryColor.withAlpha(26), // 0.1 opacity
borderRadius: BorderRadius.circular(8),
shape: BoxShape.circle,
color: (isDestructive
? AppColor.redColor
: AppColor.primaryColor)
.withOpacity(0.1),
border: Border.all(
color: (isDestructive
? AppColor.redColor
: AppColor.primaryColor)
.withOpacity(0.2),
),
),
child: Icon(
CupertinoIcons.speaker_2_fill,
color: AppColor.primaryColor,
size: 24,
icon ??
(isDestructive
? Icons.warning_amber_rounded
: Icons.info_outline_rounded),
color: isDestructive
? AppColor.redColor
: AppColor.primaryColor,
size: 26,
),
),
),
const SizedBox(height: 8),
Text(
midTitle!,
style: AppStyle.title.copyWith(
fontSize: 16,
height: 1.3,
color: Colors.black87,
const SizedBox(height: 16),
// Title
Text(
title,
textAlign: TextAlign.center,
style: AppStyle.title.copyWith(
fontSize: 18,
fontWeight: FontWeight.w700,
letterSpacing: -0.4,
color: Colors.black87,
),
),
textAlign: TextAlign.center,
),
],
if (midTitle != null && midTitle.isNotEmpty) ...[
const SizedBox(height: 10),
Text(
midTitle,
textAlign: TextAlign.center,
style: AppStyle.subtitle.copyWith(
fontSize: 14.5,
height: 1.5,
color: Colors.grey[600],
),
),
const SizedBox(height: 16),
// TTS button
_SpeakButton(
texts: [title, if (midTitle.isNotEmpty) midTitle]),
],
],
),
),
actions: [
CupertinoDialogAction(
onPressed: () {
HapticFeedback.lightImpact();
Get.back();
},
child: Text(
'Cancel'.tr,
style: TextStyle(
color: AppColor.redColor,
fontWeight: FontWeight.w600,
fontSize: 17,
),
),
),
CupertinoDialogAction(
onPressed: () {
HapticFeedback.mediumImpact();
onPressed();
},
child: Text(
'OK'.tr,
style: TextStyle(
color: AppColor.greenColor,
fontWeight: FontWeight.w600,
fontSize: 17,
),
),
),
],
),
// ── Actions ───────────────────────────────────────────
_ActionRow(
onCancel: () => Get.back(),
onConfirm: onPressed,
confirmLabel: 'OK'.tr,
isDestructive: isDestructive,
),
],
),
),
),
barrierDismissible: true,
barrierColor: Colors.black.withAlpha(102), // 0.4 opacity
barrierColor: _DC.barrierColor,
);
}
}
// ─────────────────────────────────────────────────────────────────────────────
// MyDialogContent — title + arbitrary widget content
// ─────────────────────────────────────────────────────────────────────────────
class MyDialogContent extends GetxController {
void getDialog(String title, Widget? content, VoidCallback onPressed) {
final textToSpeechController = Get.put(TextToSpeechController());
void getDialog(
String title,
Widget? content,
VoidCallback onPressed, {
IconData? icon,
bool isDestructive = false,
String confirmLabel = 'OK',
}) {
HapticFeedback.mediumImpact();
Get.dialog(
TweenAnimationBuilder<double>(
duration: DialogConfig.animationDuration,
tween: Tween(begin: 0.0, end: 1.0),
builder: (context, value, child) {
return Transform.scale(
scale: 0.95 + (0.05 * value),
child: Opacity(opacity: value, child: child),
);
},
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: DialogConfig.blurStrength,
sigmaY: DialogConfig.blurStrength,
),
child: Theme(
data: ThemeData.light().copyWith(
dialogBackgroundColor: CupertinoColors.systemBackground,
),
child: CupertinoAlertDialog(
title: Column(
children: [
Text(
title,
style: AppStyle.title.copyWith(
fontSize: 20,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: AppColor.primaryColor,
_DialogShell(
child: _GlassCard(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// ── Body ──────────────────────────────────────────────
Padding(
padding: const EdgeInsets.fromLTRB(24, 28, 24, 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header row: icon + title + TTS
Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: (isDestructive
? AppColor.redColor
: AppColor.primaryColor)
.withOpacity(0.1),
),
child: Icon(
icon ??
(isDestructive
? Icons.warning_amber_rounded
: Icons.tune_rounded),
color: isDestructive
? AppColor.redColor
: AppColor.primaryColor,
size: 22,
),
),
const SizedBox(width: 12),
Expanded(
child: Text(
title,
style: AppStyle.title.copyWith(
fontSize: 17,
fontWeight: FontWeight.w700,
letterSpacing: -0.3,
color: Colors.black87,
),
),
),
_SpeakButton(texts: [title]),
],
),
),
const SizedBox(height: 8),
],
),
content: Column(
children: [
CupertinoButton(
padding: const EdgeInsets.all(8),
onPressed: () async {
HapticFeedback.selectionClick();
await textToSpeechController.speakText(title);
},
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color:
AppColor.primaryColor.withAlpha(26), // 0.1 opacity
borderRadius: BorderRadius.circular(8),
),
child: Icon(
CupertinoIcons.headphones,
color: AppColor.primaryColor,
size: 24,
// Divider
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Divider(
height: 1,
color: Colors.grey.withOpacity(0.15),
),
),
),
const SizedBox(height: 12),
content!,
],
// Content
if (content != null) content,
],
),
),
actions: [
CupertinoDialogAction(
onPressed: () {
HapticFeedback.lightImpact();
Get.back();
},
child: Text(
'Cancel',
style: TextStyle(
color: AppColor.redColor,
fontWeight: FontWeight.w600,
fontSize: 17,
),
),
),
CupertinoDialogAction(
onPressed: () {
HapticFeedback.mediumImpact();
onPressed();
},
child: Text(
'OK'.tr,
style: TextStyle(
color: AppColor.greenColor,
fontWeight: FontWeight.w600,
fontSize: 17,
),
),
),
],
),
// ── Actions ───────────────────────────────────────────
_ActionRow(
onCancel: () => Get.back(),
onConfirm: onPressed,
confirmLabel: confirmLabel.tr,
isDestructive: isDestructive,
),
],
),
),
),
barrierDismissible: true,
barrierColor: Colors.black.withAlpha(102), // 0.4 opacity
barrierColor: _DC.barrierColor,
);
}
}