Update: 2026-08-08 16:55:39
This commit is contained in:
Hamza-Ayed
@@ -1,8 +1,9 @@
|
||||
import 'package:siro_driver/constant/currency.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import '../../../constant/finance_design_system.dart';
|
||||
import '../../constant/colors.dart';
|
||||
import '../../../controller/gamification/leaderboard_controller.dart';
|
||||
import '../widgets/ui/siro_ui.dart';
|
||||
|
||||
class LeaderboardPage extends StatelessWidget {
|
||||
LeaderboardPage({super.key});
|
||||
@@ -11,12 +12,16 @@ class LeaderboardPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: FinanceDesignSystem.backgroundColor,
|
||||
body: GetBuilder<LeaderboardController>(builder: (lc) {
|
||||
if (lc.isLoading) {
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
color: FinanceDesignSystem.primaryDark));
|
||||
return const SiroLoading();
|
||||
}
|
||||
if (lc.currentLeaderboard.isEmpty) {
|
||||
return SiroEmptyState(
|
||||
icon: Icons.leaderboard_rounded,
|
||||
title: 'Leaderboard'.tr,
|
||||
message: 'No data yet'.tr,
|
||||
);
|
||||
}
|
||||
return CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(),
|
||||
@@ -24,32 +29,30 @@ class LeaderboardPage extends StatelessWidget {
|
||||
SliverAppBar(
|
||||
expandedHeight: 200,
|
||||
pinned: true,
|
||||
backgroundColor: Get.isDarkMode
|
||||
? FinanceDesignSystem.primaryDark
|
||||
: const Color(0xFF0A0E21),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back_ios_new_rounded,
|
||||
color: Colors.white, size: 20),
|
||||
onPressed: () => Get.back()),
|
||||
foregroundColor: Colors.white,
|
||||
backgroundColor: AppColor.primaryColor,
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
centerTitle: true,
|
||||
titlePadding: const EdgeInsets.symmetric(
|
||||
horizontal: 48, vertical: 14),
|
||||
title: Text('Leaderboard'.tr,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18)),
|
||||
fontSize: 17)),
|
||||
background: Stack(fit: StackFit.expand, children: [
|
||||
// كان التدرّج نيفي ← أحمر قانٍ، وهو لون لا يوجد في
|
||||
// هوية سيرو ويقرأه المستخدم إشارةَ خطر لا إنجاز.
|
||||
Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(colors: [
|
||||
Color(0xFF0A0E21),
|
||||
Color(0xFFB71C1C)
|
||||
]))),
|
||||
Positioned(
|
||||
right: -40,
|
||||
decoration: BoxDecoration(
|
||||
gradient: SiroUi.brandGradient(context))),
|
||||
PositionedDirectional(
|
||||
end: -40,
|
||||
top: -20,
|
||||
child: Icon(Icons.leaderboard_rounded,
|
||||
size: 180, color: Colors.white.withValues(alpha: 0.04))),
|
||||
size: 180,
|
||||
color: Colors.white.withValues(alpha: 0.05))),
|
||||
// Top 3 podium
|
||||
if (lc.currentLeaderboard.length >= 3)
|
||||
Positioned(
|
||||
@@ -63,25 +66,26 @@ class LeaderboardPage extends StatelessWidget {
|
||||
// Tab bar
|
||||
SliverToBoxAdapter(
|
||||
child: Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
|
||||
margin: const EdgeInsets.fromLTRB(16, 14, 16, 0),
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: BoxDecoration(
|
||||
color: FinanceDesignSystem.backgroundColor.withValues(alpha: 0.5),
|
||||
color: SiroUi.border(context).withValues(alpha: 0.5),
|
||||
borderRadius: BorderRadius.circular(14)),
|
||||
child: Row(children: [
|
||||
_tab('Trips'.tr, Icons.local_taxi_rounded, 0, lc),
|
||||
_tab('Earnings'.tr, Icons.monetization_on_rounded, 1, lc),
|
||||
_tab(context, 'Trips'.tr, Icons.local_taxi_rounded, 0, lc),
|
||||
_tab(context, 'Earnings'.tr, Icons.monetization_on_rounded, 1,
|
||||
lc),
|
||||
]),
|
||||
)),
|
||||
// List
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 40),
|
||||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 32),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(ctx, i) {
|
||||
if (i >= lc.currentLeaderboard.length) return null;
|
||||
return _buildRow(
|
||||
lc.currentLeaderboard[i], lc.selectedTab == 1);
|
||||
ctx, lc.currentLeaderboard[i], lc.selectedTab == 1);
|
||||
},
|
||||
childCount: lc.currentLeaderboard.length,
|
||||
),
|
||||
@@ -98,15 +102,13 @@ class LeaderboardPage extends StatelessWidget {
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
if (top3.length > 1)
|
||||
_podiumItem(top3[1], 2, 50, const Color(0xFFC0C0C0)),
|
||||
if (top3.isNotEmpty)
|
||||
_podiumItem(top3[0], 1, 70, const Color(0xFFFFD700)),
|
||||
if (top3.length > 2)
|
||||
_podiumItem(top3[2], 3, 35, const Color(0xFFCD7F32)),
|
||||
_podiumItem(top3[1], 2, const Color(0xFFC0C0C0)),
|
||||
if (top3.isNotEmpty) _podiumItem(top3[0], 1, AppColor.gold),
|
||||
if (top3.length > 2) _podiumItem(top3[2], 3, AppColor.bronze),
|
||||
]);
|
||||
}
|
||||
|
||||
Widget _podiumItem(LeaderboardEntry e, int rank, double height, Color color) {
|
||||
Widget _podiumItem(LeaderboardEntry e, int rank, Color color) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
@@ -125,8 +127,10 @@ class LeaderboardPage extends StatelessWidget {
|
||||
]));
|
||||
}
|
||||
|
||||
Widget _tab(String label, IconData icon, int idx, LeaderboardController lc) {
|
||||
Widget _tab(BuildContext context, String label, IconData icon, int idx,
|
||||
LeaderboardController lc) {
|
||||
final selected = lc.selectedTab == idx;
|
||||
final accent = SiroUi.interactive(context);
|
||||
return Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () => lc.changeTab(idx),
|
||||
@@ -134,60 +138,41 @@ class LeaderboardPage extends StatelessWidget {
|
||||
duration: const Duration(milliseconds: 200),
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color:
|
||||
selected ? FinanceDesignSystem.cardColor : Colors.transparent,
|
||||
color: selected ? SiroUi.surface(context) : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
boxShadow: selected
|
||||
? [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05), blurRadius: 5)
|
||||
]
|
||||
border: selected
|
||||
? Border.all(color: accent.withValues(alpha: 0.35))
|
||||
: null),
|
||||
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
|
||||
Icon(icon,
|
||||
size: 16,
|
||||
color: selected ? FinanceDesignSystem.primaryDark : Colors.grey),
|
||||
size: 16, color: selected ? accent : SiroUi.subtle(context)),
|
||||
const SizedBox(width: 6),
|
||||
Text(label,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: selected
|
||||
? FinanceDesignSystem.primaryDark
|
||||
: Colors.grey)),
|
||||
Flexible(
|
||||
child: Text(label,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: selected ? accent : SiroUi.subtle(context))),
|
||||
),
|
||||
]),
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
Widget _buildRow(LeaderboardEntry e, bool isEarnings) {
|
||||
Widget _buildRow(BuildContext context, LeaderboardEntry e, bool isEarnings) {
|
||||
final accent = SiroUi.interactive(context);
|
||||
final rankColor = e.rank == 1
|
||||
? const Color(0xFFFFD700)
|
||||
? AppColor.gold
|
||||
: e.rank == 2
|
||||
? const Color(0xFFC0C0C0)
|
||||
: e.rank == 3
|
||||
? const Color(0xFFCD7F32)
|
||||
: Colors.grey.shade400;
|
||||
return Container(
|
||||
? AppColor.bronze
|
||||
: SiroUi.subtle(context);
|
||||
return SiroCard(
|
||||
margin: const EdgeInsets.only(bottom: 8),
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: e.isCurrentUser
|
||||
? FinanceDesignSystem.accentBlue.withValues(alpha: 0.08)
|
||||
: FinanceDesignSystem.cardColor,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: e.isCurrentUser
|
||||
? Border.all(
|
||||
color: FinanceDesignSystem.accentBlue.withValues(alpha: 0.3),
|
||||
width: 1.5)
|
||||
: null,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.02),
|
||||
blurRadius: 8,
|
||||
offset: const Offset(0, 3))
|
||||
],
|
||||
),
|
||||
padding: const EdgeInsets.all(12),
|
||||
accent: e.isCurrentUser ? accent : null,
|
||||
child: Row(children: [
|
||||
// Rank
|
||||
Container(
|
||||
@@ -208,49 +193,41 @@ class LeaderboardPage extends StatelessWidget {
|
||||
const SizedBox(width: 12),
|
||||
// Avatar
|
||||
CircleAvatar(
|
||||
radius: 18,
|
||||
backgroundColor: FinanceDesignSystem.backgroundColor,
|
||||
radius: 17,
|
||||
backgroundColor: accent.withValues(alpha: 0.12),
|
||||
child: Text(e.name.isNotEmpty ? e.name[0] : '?',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: FinanceDesignSystem.textSecondary))),
|
||||
fontWeight: FontWeight.bold, color: accent))),
|
||||
const SizedBox(width: 12),
|
||||
// Name
|
||||
Expanded(
|
||||
child:
|
||||
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Row(children: [
|
||||
Text(e.name,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight:
|
||||
e.isCurrentUser ? FontWeight.bold : FontWeight.w500,
|
||||
color: FinanceDesignSystem.primaryDark)),
|
||||
Flexible(
|
||||
child: Text(e.name,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: e.isCurrentUser
|
||||
? FontWeight.bold
|
||||
: FontWeight.w500)),
|
||||
),
|
||||
if (e.isCurrentUser) ...[
|
||||
const SizedBox(width: 6),
|
||||
Container(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: FinanceDesignSystem.accentBlue,
|
||||
borderRadius: BorderRadius.circular(6)),
|
||||
child: Text('You'.tr,
|
||||
style: const TextStyle(
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white)))
|
||||
SiroTag('You'.tr, color: accent),
|
||||
],
|
||||
]),
|
||||
])),
|
||||
const SizedBox(width: 8),
|
||||
// Value
|
||||
Text(
|
||||
isEarnings
|
||||
? '${e.value.toStringAsFixed(0)} ${CurrencyHelper.currency}'
|
||||
: '${e.value.toInt()} ${'Rides'.tr}',
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: FinanceDesignSystem.primaryDark)),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium
|
||||
?.copyWith(fontWeight: FontWeight.w800)),
|
||||
]),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user