2026-04-06 redesign splash screen and drawer menu
This commit is contained in:
Hamza-Ayed
@@ -1,167 +1,469 @@
|
||||
import 'dart:math';
|
||||
import 'package:animated_text_kit/animated_text_kit.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:Intaleq/constant/colors.dart';
|
||||
import 'package:Intaleq/constant/style.dart';
|
||||
import 'package:Intaleq/constant/box_name.dart';
|
||||
import 'package:Intaleq/main.dart';
|
||||
|
||||
import 'controller/home/splash_screen_controlle.dart';
|
||||
|
||||
// شاشة بداية بتصميم جديد وحركات وألوان محسّنة
|
||||
class SplashScreen extends StatelessWidget {
|
||||
const SplashScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// تهيئة الكنترولر
|
||||
final SplashScreenController controller = Get.put(SplashScreenController());
|
||||
final size = MediaQuery.of(context).size;
|
||||
|
||||
// تعريف الألوان المستخدمة في حركة اسم التطبيق
|
||||
// ألوان الـ colorize — سيان كهربائي → أبيض → ذهبي عنبري
|
||||
const colorizeColors = [
|
||||
Color(0xFF00D4FF),
|
||||
Colors.white,
|
||||
Color(0xFF89D4CF), // لون تركواز فاتح
|
||||
Color(0xFF734AE8), // لون بنفسجي مشرق
|
||||
Colors.white,
|
||||
Color(0xFFFFB700),
|
||||
Color(0xFF00D4FF),
|
||||
];
|
||||
|
||||
return SafeArea(
|
||||
child: Scaffold(
|
||||
body: Container(
|
||||
// --- تحسين الألوان ---
|
||||
// تم استخدام تدرج لوني جديد أكثر حيوية وعصرية
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
Color(0xFF2E3192), // أزرق داكن
|
||||
Color(0xFF1BFFFF), // سماوي ساطع
|
||||
],
|
||||
backgroundColor: const Color(0xFF060B18),
|
||||
body: Stack(
|
||||
children: [
|
||||
// ── طبقة الشبكة الهندسية ──────────────────────────────────
|
||||
Positioned.fill(
|
||||
child: CustomPaint(painter: _GridPainter()),
|
||||
),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
// دوائر زخرفية لإضافة عمق للتصميم
|
||||
_buildDecorativeCircles(),
|
||||
|
||||
// المحتوى الرئيسي مع الحركات المتتالية
|
||||
Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// --- حركة اسم التطبيق ---
|
||||
// تم إلغاء الشعار واستبداله بحركة نصية ملونة لكلمة "Intaleq"
|
||||
FadeTransition(
|
||||
opacity: controller.titleFadeAnimation,
|
||||
child: ScaleTransition(
|
||||
scale: controller.titleScaleAnimation,
|
||||
child: AnimatedTextKit(
|
||||
animatedTexts: [
|
||||
ColorizeAnimatedText(
|
||||
'Intaleq',
|
||||
textStyle: AppStyle.headTitle.copyWith(
|
||||
fontSize: 65.0, // تكبير حجم الخط
|
||||
fontWeight: FontWeight.bold,
|
||||
shadows: [
|
||||
const Shadow(
|
||||
blurRadius: 15.0,
|
||||
color: Colors.black38,
|
||||
offset: Offset(0, 3.0),
|
||||
),
|
||||
],
|
||||
),
|
||||
colors: colorizeColors,
|
||||
speed: const Duration(milliseconds: 300),
|
||||
),
|
||||
],
|
||||
isRepeatingAnimation: false,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
|
||||
// --- حركة الشعار النصي ---
|
||||
FadeTransition(
|
||||
opacity: controller.taglineFadeAnimation,
|
||||
child: SlideTransition(
|
||||
position: controller.taglineSlideAnimation,
|
||||
child: Text(
|
||||
'Your Journey Begins Here'.tr,
|
||||
style: AppStyle.title.copyWith(
|
||||
color: AppColor.writeColor.withOpacity(0.9),
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
// ── توهج سماوي — أعلى اليمين ─────────────────────────────
|
||||
Positioned(
|
||||
top: -size.height * 0.18,
|
||||
right: -size.width * 0.25,
|
||||
child: Container(
|
||||
width: size.width * 0.85,
|
||||
height: size.width * 0.85,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(colors: [
|
||||
const Color(0xFF00D4FF).withOpacity(0.11),
|
||||
Colors.transparent,
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// قسم سفلي لشريط التقدم ومعلومات الإصدار
|
||||
Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: FadeTransition(
|
||||
opacity: controller.footerFadeAnimation,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
bottom: 40.0, left: 40, right: 40),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: Obx(() => LinearProgressIndicator(
|
||||
value: controller.progress.value,
|
||||
backgroundColor:
|
||||
AppColor.writeColor.withOpacity(0.2),
|
||||
valueColor: const AlwaysStoppedAnimation<Color>(
|
||||
AppColor.writeColor),
|
||||
minHeight: 5,
|
||||
)),
|
||||
// ── توهج أزرق غامق — أسفل اليسار ────────────────────────
|
||||
Positioned(
|
||||
bottom: -size.height * 0.12,
|
||||
left: -size.width * 0.22,
|
||||
child: Container(
|
||||
width: size.width * 0.75,
|
||||
height: size.width * 0.75,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(colors: [
|
||||
const Color(0xFF0052FF).withOpacity(0.09),
|
||||
Colors.transparent,
|
||||
]),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// ── المحتوى الرئيسي ───────────────────────────────────────
|
||||
Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// ── حلقات مدارية + اسم التطبيق ───────────────────
|
||||
FadeTransition(
|
||||
opacity: controller.titleFadeAnimation,
|
||||
child: ScaleTransition(
|
||||
scale: controller.titleScaleAnimation,
|
||||
child: SizedBox(
|
||||
width: 220,
|
||||
height: 220,
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
// الحلقة الخارجية — تدور ببطء
|
||||
AnimatedBuilder(
|
||||
animation: controller.orbitAnimation,
|
||||
builder: (_, __) => Transform.rotate(
|
||||
angle: controller.orbitAnimation.value * 2 * pi,
|
||||
child: CustomPaint(
|
||||
painter: _OrbitalRingPainter(
|
||||
radius: 100,
|
||||
dotColor: const Color(0xFF00D4FF),
|
||||
lineOpacity: 0.22,
|
||||
dotSize: 5.5,
|
||||
),
|
||||
size: const Size(220, 220),
|
||||
),
|
||||
),
|
||||
),
|
||||
// الحلقة الداخلية — تدور عكسياً
|
||||
AnimatedBuilder(
|
||||
animation: controller.orbitAnimation,
|
||||
builder: (_, __) => Transform.rotate(
|
||||
angle: -controller.orbitAnimation.value *
|
||||
2 *
|
||||
pi *
|
||||
0.65,
|
||||
child: CustomPaint(
|
||||
painter: _OrbitalRingPainter(
|
||||
radius: 73,
|
||||
dotColor: const Color(0xFFFFB700),
|
||||
lineOpacity: 0.14,
|
||||
dotSize: 4,
|
||||
dashCount: 20,
|
||||
),
|
||||
size: const Size(220, 220),
|
||||
),
|
||||
),
|
||||
),
|
||||
// النقطة المركزية المضيئة
|
||||
AnimatedBuilder(
|
||||
animation: controller.glowAnimation,
|
||||
builder: (_, __) => Container(
|
||||
width: 8,
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: const Color(0xFF00D4FF),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF00D4FF)
|
||||
.withOpacity(0.25 +
|
||||
controller.glowAnimation.value *
|
||||
0.35),
|
||||
blurRadius: 20 +
|
||||
controller.glowAnimation.value * 20,
|
||||
spreadRadius: 4,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
// ── اسم "Intaleq" مع توهج متنفّس ─────────
|
||||
AnimatedBuilder(
|
||||
animation: controller.glowAnimation,
|
||||
builder: (_, child) => Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF00D4FF)
|
||||
.withOpacity(0.08 +
|
||||
controller.glowAnimation.value *
|
||||
0.10),
|
||||
blurRadius: 40 +
|
||||
controller.glowAnimation.value * 25,
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
child: AnimatedTextKit(
|
||||
animatedTexts: [
|
||||
ColorizeAnimatedText(
|
||||
'Intaleq',
|
||||
textStyle: const TextStyle(
|
||||
fontSize: 38,
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: 3,
|
||||
height: 1,
|
||||
),
|
||||
colors: colorizeColors,
|
||||
speed: const Duration(milliseconds: 380),
|
||||
),
|
||||
],
|
||||
isRepeatingAnimation: false,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Text(
|
||||
'Version: ${box.read(BoxName.packagInfo) ?? '1.0.0'}',
|
||||
style: AppStyle.subtitle.copyWith(
|
||||
color: AppColor.writeColor.withOpacity(0.7),
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 28),
|
||||
|
||||
// ── شريحة "AI-Powered" + الشعار النصي ───────────────
|
||||
FadeTransition(
|
||||
opacity: controller.taglineFadeAnimation,
|
||||
child: SlideTransition(
|
||||
position: controller.taglineSlideAnimation,
|
||||
child: Column(
|
||||
children: [
|
||||
// شريحة الذكاء الاصطناعي
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 14, vertical: 5),
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color:
|
||||
const Color(0xFF00D4FF).withOpacity(0.35),
|
||||
width: 1,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: const Color(0xFF00D4FF).withOpacity(0.06),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// نقطة نبضية
|
||||
AnimatedBuilder(
|
||||
animation: controller.glowAnimation,
|
||||
builder: (_, __) => Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: const Color(0xFF00D4FF)
|
||||
.withOpacity(0.5 +
|
||||
controller.glowAnimation.value *
|
||||
0.5),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF00D4FF)
|
||||
.withOpacity(controller
|
||||
.glowAnimation.value *
|
||||
0.6),
|
||||
blurRadius: 6,
|
||||
spreadRadius: 1,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'AI-Powered Mobility',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: const Color(0xFF00D4FF)
|
||||
.withOpacity(0.85),
|
||||
letterSpacing: 1.4,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
// الشعار النصي
|
||||
Text(
|
||||
'Your Journey Begins Here'.tr,
|
||||
style: AppStyle.title.copyWith(
|
||||
color: const Color(0xFF7A8FA8),
|
||||
fontSize: 14,
|
||||
letterSpacing: 0.6,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// ── القسم السفلي: شريط التقدم + الإصدار ─────────────────
|
||||
Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: FadeTransition(
|
||||
opacity: controller.footerFadeAnimation,
|
||||
child: Padding(
|
||||
padding:
|
||||
const EdgeInsets.only(bottom: 44, left: 36, right: 36),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// شريط تقدم رفيع مضيء
|
||||
Obx(() => _GlowProgressBar(
|
||||
value: controller.progress.value,
|
||||
)),
|
||||
const SizedBox(height: 18),
|
||||
// معلومات الإصدار
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'INTALEQ',
|
||||
style: TextStyle(
|
||||
fontSize: 9.5,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.white.withOpacity(0.18),
|
||||
letterSpacing: 3.5,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'v${box.read(BoxName.packagInfo) ?? '1.0.0'}',
|
||||
style: TextStyle(
|
||||
fontSize: 9.5,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Colors.white.withOpacity(0.18),
|
||||
letterSpacing: 1,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// بناء دوائر زخرفية لتحسين الخلفية
|
||||
Widget _buildDecorativeCircles() {
|
||||
// ── شريط التقدم المضيء ─────────────────────────────────────────────────────
|
||||
class _GlowProgressBar extends StatelessWidget {
|
||||
final double value;
|
||||
const _GlowProgressBar({required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
top: -80,
|
||||
left: -100,
|
||||
child: CircleAvatar(
|
||||
radius: 120,
|
||||
backgroundColor: Colors.white.withOpacity(0.05),
|
||||
// المسار
|
||||
Container(
|
||||
height: 2,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(0.07),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: -120,
|
||||
right: -150,
|
||||
child: CircleAvatar(
|
||||
radius: 180,
|
||||
backgroundColor: Colors.white.withOpacity(0.07),
|
||||
// الملء المضيء
|
||||
FractionallySizedBox(
|
||||
widthFactor: value.clamp(0.0, 1.0),
|
||||
child: Container(
|
||||
height: 2,
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(colors: [
|
||||
Color(0xFF0052FF),
|
||||
Color(0xFF00D4FF),
|
||||
]),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF00D4FF).withOpacity(0.55),
|
||||
blurRadius: 8,
|
||||
spreadRadius: 1,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ── رسّام الشبكة الهندسية ─────────────────────────────────────────────────
|
||||
class _GridPainter extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final linePaint = Paint()
|
||||
..color = const Color(0xFF00D4FF).withOpacity(0.04)
|
||||
..strokeWidth = 0.5;
|
||||
|
||||
const spacing = 36.0;
|
||||
|
||||
for (double y = 0; y < size.height; y += spacing) {
|
||||
canvas.drawLine(Offset(0, y), Offset(size.width, y), linePaint);
|
||||
}
|
||||
for (double x = 0; x < size.width; x += spacing) {
|
||||
canvas.drawLine(Offset(x, 0), Offset(x, size.height), linePaint);
|
||||
}
|
||||
|
||||
// نقاط التقاطع
|
||||
final dotPaint = Paint()
|
||||
..color = const Color(0xFF00D4FF).withOpacity(0.07)
|
||||
..style = PaintingStyle.fill;
|
||||
|
||||
for (double y = 0; y < size.height; y += spacing) {
|
||||
for (double x = 0; x < size.width; x += spacing) {
|
||||
canvas.drawCircle(Offset(x, y), 0.9, dotPaint);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_GridPainter old) => false;
|
||||
}
|
||||
|
||||
// ── رسّام الحلقة المدارية ─────────────────────────────────────────────────
|
||||
class _OrbitalRingPainter extends CustomPainter {
|
||||
final double radius;
|
||||
final Color dotColor;
|
||||
final double lineOpacity;
|
||||
final double dotSize;
|
||||
final int dashCount;
|
||||
|
||||
const _OrbitalRingPainter({
|
||||
this.radius = 95,
|
||||
this.dotColor = const Color(0xFF00D4FF),
|
||||
this.lineOpacity = 0.25,
|
||||
this.dotSize = 5.5,
|
||||
this.dashCount = 0,
|
||||
});
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final center = Offset(size.width / 2, size.height / 2);
|
||||
|
||||
if (dashCount > 0) {
|
||||
// حلقة متقطعة (dashed)
|
||||
final dashPaint = Paint()
|
||||
..color = const Color(0xFF00D4FF).withOpacity(lineOpacity)
|
||||
..strokeWidth = 1
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeCap = StrokeCap.round;
|
||||
|
||||
const dashAngle = 2 * pi / 40;
|
||||
final gapRatio = 0.45;
|
||||
|
||||
for (int i = 0; i < dashCount; i++) {
|
||||
final startAngle = i * (2 * pi / dashCount);
|
||||
final sweepAngle = (2 * pi / dashCount) * (1 - gapRatio);
|
||||
canvas.drawArc(
|
||||
Rect.fromCircle(center: center, radius: radius),
|
||||
startAngle,
|
||||
sweepAngle,
|
||||
false,
|
||||
dashPaint,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// حلقة متصلة
|
||||
final ringPaint = Paint()
|
||||
..color = const Color(0xFF00D4FF).withOpacity(lineOpacity)
|
||||
..strokeWidth = 1
|
||||
..style = PaintingStyle.stroke;
|
||||
canvas.drawCircle(center, radius, ringPaint);
|
||||
}
|
||||
|
||||
// النقطة البراقة — دائماً في القمة (before rotation)
|
||||
final dotPos = Offset(center.dx, center.dy - radius);
|
||||
|
||||
// توهج خلف النقطة
|
||||
final glowPaint = Paint()
|
||||
..color = dotColor.withOpacity(0.35)
|
||||
..maskFilter = const MaskFilter.blur(BlurStyle.normal, 9);
|
||||
canvas.drawCircle(dotPos, dotSize + 2, glowPaint);
|
||||
|
||||
// النقطة نفسها
|
||||
final dotPaint = Paint()
|
||||
..color = dotColor
|
||||
..style = PaintingStyle.fill;
|
||||
canvas.drawCircle(dotPos, dotSize, dotPaint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_OrbitalRingPainter old) => false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user