Update: 2026-06-25 02:28:33

This commit is contained in:
Hamza-Ayed
2026-06-25 02:28:33 +03:00
parent 1ff13f09ac
commit 98a8a2ae3d
43 changed files with 992 additions and 812 deletions

View File

@@ -1,9 +1,10 @@
import 'dart:math';
import 'dart:math' as math;
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:siro_rider/constant/style.dart';
import 'package:siro_rider/constant/box_name.dart';
import 'package:siro_rider/constant/colors.dart';
import 'package:siro_rider/constant/style.dart';
import 'package:siro_rider/main.dart';
import 'controller/home/splash_screen_controlle.dart';
@@ -13,307 +14,247 @@ class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final SplashScreenController controller = Get.put(SplashScreenController());
final controller = Get.put(SplashScreenController());
final size = MediaQuery.of(context).size;
// ألوان الـ colorize — سيان كهربائي → أبيض → ذهبي عنبري
const colorizeColors = [
Color(0xFF1DA1F2),
Colors.white,
Color(0xFFFFB700),
Color(0xFF1DA1F2),
];
final isDark = Get.isDarkMode;
final bg = isDark ? const Color(0xFF0A0F1E) : AppColor.primaryColor;
final accent = AppColor.secondaryColorStatic;
final gold = AppColor.gold;
return SafeArea(
child: Scaffold(
backgroundColor: const Color(0xFF060B18),
backgroundColor: bg,
body: Stack(
children: [
// ── طبقة الشبكة الهندسية ──────────────────────────────────
// ── Animated gradient overlay ──
Positioned.fill(
child: CustomPaint(painter: _GridPainter()),
),
// ── توهج سماوي — أعلى اليمين ─────────────────────────────
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(0xFF1DA1F2).withOpacity(0.11),
Colors.transparent,
]),
child: AnimatedBuilder(
animation: controller.glowAnimation,
builder: (_, __) => Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
bg,
Color.lerp(bg, accent.withOpacity(0.1),
controller.glowAnimation.value)!,
bg,
],
),
),
),
),
),
// ── توهج أزرق غامق — أسفل اليسار ────────────────────────
// ── Top-right glow ──
Positioned(
bottom: -size.height * 0.12,
left: -size.width * 0.22,
top: -size.height * 0.14,
right: -size.width * 0.18,
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,
]),
gradient: RadialGradient(
colors: [
accent.withOpacity(0.08),
Colors.transparent,
],
),
),
),
),
// ── المحتوى الرئيسي ───────────────────────────────────────
// ── Bottom-left glow ──
Positioned(
bottom: -size.height * 0.08,
left: -size.width * 0.2,
child: Container(
width: size.width * 0.65,
height: size.width * 0.65,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
gold.withOpacity(0.05),
Colors.transparent,
],
),
),
),
),
// ── Subtle grid ──
Positioned.fill(
child: CustomPaint(
painter: _GridPainter(color: accent.withOpacity(0.035)),
),
),
// ── Main content ──
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// ── حلقات مدارية + اسم التطبيق ───────────────────
FadeTransition(
opacity: controller.titleFadeAnimation,
child: ScaleTransition(
scale: controller.titleScaleAnimation,
child: SizedBox(
width: 220,
height: 220,
child: FadeTransition(
opacity: controller.titleFadeAnimation,
child: ScaleTransition(
scale: controller.titleScaleAnimation,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 240,
height: 240,
child: Stack(
alignment: Alignment.center,
children: [
// الحلقة الخارجية — تدور ببطء
// Outer ring
AnimatedBuilder(
animation: controller.orbitAnimation,
builder: (_, __) => Transform.rotate(
angle: controller.orbitAnimation.value * 2 * pi,
angle: controller.orbitAnimation.value *
2 *
math.pi,
child: CustomPaint(
painter: _OrbitalRingPainter(
radius: 100,
dotColor: const Color(0xFF1DA1F2),
lineOpacity: 0.22,
dotSize: 5.5,
radius: 108,
dotColor: accent,
lineOpacity: 0.2,
dotSize: 5,
),
size: const Size(220, 220),
size: const Size(240, 240),
),
),
),
// الحلقة الداخلية — تدور عكسياً
// Inner ring
AnimatedBuilder(
animation: controller.orbitAnimation,
builder: (_, __) => Transform.rotate(
angle: -controller.orbitAnimation.value *
2 *
pi *
math.pi *
0.65,
child: CustomPaint(
painter: _OrbitalRingPainter(
radius: 73,
dotColor: const Color(0xFFFFB700),
radius: 76,
dotColor: gold,
lineOpacity: 0.14,
dotSize: 4,
dashCount: 20,
dashCount: 16,
),
size: const Size(220, 220),
size: const Size(240, 240),
),
),
),
// النقطة المركزية المضيئة
// Center glow
AnimatedBuilder(
animation: controller.glowAnimation,
builder: (_, __) => Container(
width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xFF1DA1F2),
boxShadow: [
BoxShadow(
color: const Color(0xFF1DA1F2)
.withOpacity(0.25 +
controller.glowAnimation.value *
0.35),
blurRadius: 20 +
controller.glowAnimation.value * 20,
spreadRadius: 4,
),
],
),
),
),
// ── اسم "Siro" مع توهج متنفّس ─────────
AnimatedBuilder(
animation: controller.glowAnimation,
builder: (_, child) => Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0xFF1DA1F2)
.withOpacity(0.08 +
controller.glowAnimation.value *
0.10),
blurRadius: 40 +
color: accent.withOpacity(0.1 +
controller.glowAnimation.value *
0.18),
blurRadius: 30 +
controller.glowAnimation.value * 25,
spreadRadius: 0,
),
],
),
child: child,
),
child: AnimatedTextKit(
animatedTexts: [
ColorizeAnimatedText(
'Siro',
textStyle: const TextStyle(
fontSize: 38,
fontWeight: FontWeight.w800,
letterSpacing: 3,
height: 1,
),
colors: colorizeColors,
speed: const Duration(milliseconds: 380),
),
// Siro text
AnimatedTextKit(
animatedTexts: [
ColorizeAnimatedText(
'Siro',
textStyle: const TextStyle(
fontSize: 40,
fontWeight: FontWeight.w800,
letterSpacing: 5,
height: 1,
),
],
isRepeatingAnimation: false,
),
colors: [
Colors.white,
accent,
gold.withOpacity(0.85),
Colors.white,
],
speed: const Duration(milliseconds: 500),
),
],
isRepeatingAnimation: false,
),
],
),
),
),
),
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(0xFF1DA1F2).withOpacity(0.35),
width: 1,
const SizedBox(height: 24),
// Tagline
FadeTransition(
opacity: controller.taglineFadeAnimation,
child: SlideTransition(
position: controller.taglineSlideAnimation,
child: Column(
children: [
_TaglineBadge(
controller: controller, accent: accent),
const SizedBox(height: 14),
Text(
'Your Journey Begins Here'.tr,
style: TextStyle(
color: Colors.white.withOpacity(0.4),
fontSize: 13,
letterSpacing: 1,
fontWeight: FontWeight.w300,
),
),
borderRadius: BorderRadius.circular(20),
color: const Color(0xFF1DA1F2).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(0xFF1DA1F2)
.withOpacity(0.5 +
controller.glowAnimation.value *
0.5),
boxShadow: [
BoxShadow(
color: const Color(0xFF1DA1F2)
.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(0xFF1DA1F2)
.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(
'SIRO',
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,
),
),
],
),
),
],
),
),
),
),
// ── Bottom ──
Positioned(
left: 32,
right: 32,
bottom: 48,
child: FadeTransition(
opacity: controller.footerFadeAnimation,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Obx(() => _GlowProgressBar(
value: controller.progress.value, accent: accent)),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('SIRO',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w700,
color: Colors.white.withOpacity(0.12),
letterSpacing: 4.5)),
Text('v${box.read(BoxName.packagInfo) ?? '1.0.0'}',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w500,
color: Colors.white.withOpacity(0.12),
letterSpacing: 1.5)),
],
),
],
),
),
),
],
),
),
@@ -321,40 +262,84 @@ class SplashScreen extends StatelessWidget {
}
}
// ── شريط التقدم المضيء ─────────────────────────────────────────────────────
// ── Tagline badge ──
class _TaglineBadge extends StatelessWidget {
final SplashScreenController controller;
final Color accent;
const _TaglineBadge({required this.controller, required this.accent});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
decoration: BoxDecoration(
border: Border.all(color: accent.withOpacity(0.25), width: 1),
borderRadius: BorderRadius.circular(20),
color: accent.withOpacity(0.05),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedBuilder(
animation: controller.glowAnimation,
builder: (_, __) => Container(
width: 6,
height: 6,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: accent
.withOpacity(0.4 + controller.glowAnimation.value * 0.6),
boxShadow: [
BoxShadow(
color: accent
.withOpacity(controller.glowAnimation.value * 0.5),
blurRadius: 6,
spreadRadius: 1),
],
),
),
),
const SizedBox(width: 8),
Text('AI-Powered Mobility',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: accent.withOpacity(0.85),
letterSpacing: 1.4)),
],
),
);
}
}
// ── Progress bar ──
class _GlowProgressBar extends StatelessWidget {
final double value;
const _GlowProgressBar({required this.value});
final Color accent;
const _GlowProgressBar({required this.value, required this.accent});
@override
Widget build(BuildContext context) {
return Stack(
children: [
// المسار
Container(
height: 2,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.07),
borderRadius: BorderRadius.circular(2),
),
),
// الملء المضيء
height: 2,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.06),
borderRadius: BorderRadius.circular(2))),
FractionallySizedBox(
widthFactor: value.clamp(0.0, 1.0),
child: Container(
height: 2,
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [
Color(0xFF0052FF),
Color(0xFF1DA1F2),
]),
gradient:
LinearGradient(colors: [accent.withOpacity(0.5), accent]),
borderRadius: BorderRadius.circular(2),
boxShadow: [
BoxShadow(
color: const Color(0xFF1DA1F2).withOpacity(0.55),
blurRadius: 8,
spreadRadius: 1,
),
color: accent.withOpacity(0.4),
blurRadius: 8,
spreadRadius: 1)
],
),
),
@@ -364,40 +349,30 @@ class _GlowProgressBar extends StatelessWidget {
}
}
// ── رسّام الشبكة الهندسية ─────────────────────────────────────────────────
// ── Grid painter ──
class _GridPainter extends CustomPainter {
final Color color;
_GridPainter({required this.color});
@override
void paint(Canvas canvas, Size size) {
final linePaint = Paint()
..color = const Color(0xFF1DA1F2).withOpacity(0.04)
final paint = Paint()
..color = color
..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);
const step = 36.0;
for (double y = 0; y < size.height; y += step) {
canvas.drawLine(Offset(0, y), Offset(size.width, y), paint);
}
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(0xFF1DA1F2).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);
}
for (double x = 0; x < size.width; x += step) {
canvas.drawLine(Offset(x, 0), Offset(x, size.height), paint);
}
}
@override
bool shouldRepaint(_GridPainter old) => false;
bool shouldRepaint(_GridPainter old) => old.color != color;
}
// ── رسّام الحلقة المدارية ─────────────────────────────────────────────────
// ── Orbital ring ──
class _OrbitalRingPainter extends CustomPainter {
final double radius;
final Color dotColor;
@@ -407,8 +382,8 @@ class _OrbitalRingPainter extends CustomPainter {
const _OrbitalRingPainter({
this.radius = 95,
this.dotColor = const Color(0xFF1DA1F2),
this.lineOpacity = 0.25,
this.dotColor = const Color(0xFF8C9CF8),
this.lineOpacity = 0.20,
this.dotSize = 5.5,
this.dashCount = 0,
});
@@ -418,50 +393,38 @@ class _OrbitalRingPainter extends CustomPainter {
final center = Offset(size.width / 2, size.height / 2);
if (dashCount > 0) {
// حلقة متقطعة (dashed)
final dashPaint = Paint()
..color = const Color(0xFF1DA1F2).withOpacity(lineOpacity)
..color = dotColor.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,
);
final start = i * (2 * math.pi / dashCount);
final sweep = (2 * math.pi / dashCount) * 0.55;
canvas.drawArc(Rect.fromCircle(center: center, radius: radius), start,
sweep, false, dashPaint);
}
} else {
// حلقة متصلة
final ringPaint = Paint()
..color = const Color(0xFF1DA1F2).withOpacity(lineOpacity)
..color = dotColor.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)
..color = dotColor.withOpacity(0.30)
..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);
canvas.drawCircle(
dotPos,
dotSize,
Paint()
..color = dotColor
..style = PaintingStyle.fill);
}
@override