241 lines
9.1 KiB
Dart
241 lines
9.1 KiB
Dart
import 'package:siro_driver/constant/currency.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import '../../constant/colors.dart';
|
|
import '../../../controller/gamification/leaderboard_controller.dart';
|
|
import '../widgets/ui/siro_ui.dart';
|
|
|
|
class LeaderboardPage extends StatelessWidget {
|
|
LeaderboardPage({super.key});
|
|
final LeaderboardController controller = Get.put(LeaderboardController());
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: GetBuilder<LeaderboardController>(builder: (lc) {
|
|
if (lc.isLoading) {
|
|
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(),
|
|
slivers: [
|
|
SliverAppBar(
|
|
expandedHeight: 200,
|
|
pinned: true,
|
|
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: 17)),
|
|
background: Stack(fit: StackFit.expand, children: [
|
|
// كان التدرّج نيفي ← أحمر قانٍ، وهو لون لا يوجد في
|
|
// هوية سيرو ويقرأه المستخدم إشارةَ خطر لا إنجاز.
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
gradient: SiroUi.brandGradient(context))),
|
|
PositionedDirectional(
|
|
end: -40,
|
|
top: -20,
|
|
child: Icon(Icons.leaderboard_rounded,
|
|
size: 180,
|
|
color: Colors.white.withValues(alpha: 0.05))),
|
|
// Top 3 podium
|
|
if (lc.currentLeaderboard.length >= 3)
|
|
Positioned(
|
|
bottom: 50,
|
|
left: 0,
|
|
right: 0,
|
|
child: _buildPodium(lc)),
|
|
]),
|
|
),
|
|
),
|
|
// Tab bar
|
|
SliverToBoxAdapter(
|
|
child: Container(
|
|
margin: const EdgeInsets.fromLTRB(16, 14, 16, 0),
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: SiroUi.border(context).withValues(alpha: 0.5),
|
|
borderRadius: BorderRadius.circular(14)),
|
|
child: Row(children: [
|
|
_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, 14, 16, 32),
|
|
sliver: SliverList(
|
|
delegate: SliverChildBuilderDelegate(
|
|
(ctx, i) {
|
|
if (i >= lc.currentLeaderboard.length) return null;
|
|
return _buildRow(
|
|
ctx, lc.currentLeaderboard[i], lc.selectedTab == 1);
|
|
},
|
|
childCount: lc.currentLeaderboard.length,
|
|
),
|
|
)),
|
|
]);
|
|
}),
|
|
);
|
|
}
|
|
|
|
Widget _buildPodium(LeaderboardController lc) {
|
|
final top3 = lc.currentLeaderboard.take(3).toList();
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
if (top3.length > 1)
|
|
_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, Color color) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
|
CircleAvatar(
|
|
radius: rank == 1 ? 22 : 18,
|
|
backgroundColor: color.withValues(alpha: 0.3),
|
|
child: Text(_getRankEmoji(rank),
|
|
style: TextStyle(fontSize: rank == 1 ? 22 : 16))),
|
|
const SizedBox(height: 4),
|
|
Text(e.name.length > 8 ? '${e.name.substring(0, 8)}...' : e.name,
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 10,
|
|
fontWeight:
|
|
e.isCurrentUser ? FontWeight.bold : FontWeight.normal)),
|
|
]));
|
|
}
|
|
|
|
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),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.symmetric(vertical: 10),
|
|
decoration: BoxDecoration(
|
|
color: selected ? SiroUi.surface(context) : Colors.transparent,
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: selected
|
|
? Border.all(color: accent.withValues(alpha: 0.35))
|
|
: null),
|
|
child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
|
|
Icon(icon,
|
|
size: 16, color: selected ? accent : SiroUi.subtle(context)),
|
|
const SizedBox(width: 6),
|
|
Flexible(
|
|
child: Text(label,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
color: selected ? accent : SiroUi.subtle(context))),
|
|
),
|
|
]),
|
|
),
|
|
));
|
|
}
|
|
|
|
Widget _buildRow(BuildContext context, LeaderboardEntry e, bool isEarnings) {
|
|
final accent = SiroUi.interactive(context);
|
|
final rankColor = e.rank == 1
|
|
? AppColor.gold
|
|
: e.rank == 2
|
|
? const Color(0xFFC0C0C0)
|
|
: e.rank == 3
|
|
? AppColor.bronze
|
|
: SiroUi.subtle(context);
|
|
return SiroCard(
|
|
margin: const EdgeInsets.only(bottom: 8),
|
|
padding: const EdgeInsets.all(12),
|
|
accent: e.isCurrentUser ? accent : null,
|
|
child: Row(children: [
|
|
// Rank
|
|
Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color: rankColor.withValues(alpha: 0.15),
|
|
borderRadius: BorderRadius.circular(8)),
|
|
child: Center(
|
|
child: e.rank <= 3
|
|
? Text(_getRankEmoji(e.rank),
|
|
style: const TextStyle(fontSize: 16))
|
|
: Text('${e.rank}',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
color: rankColor)))),
|
|
const SizedBox(width: 12),
|
|
// Avatar
|
|
CircleAvatar(
|
|
radius: 17,
|
|
backgroundColor: accent.withValues(alpha: 0.12),
|
|
child: Text(e.name.isNotEmpty ? e.name[0] : '?',
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.bold, color: accent))),
|
|
const SizedBox(width: 12),
|
|
// Name
|
|
Expanded(
|
|
child:
|
|
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
Row(children: [
|
|
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),
|
|
SiroTag('You'.tr, color: accent),
|
|
],
|
|
]),
|
|
])),
|
|
const SizedBox(width: 8),
|
|
// Value
|
|
Text(
|
|
isEarnings
|
|
? '${e.value.toStringAsFixed(0)} ${CurrencyHelper.currency}'
|
|
: '${e.value.toInt()} ${'Rides'.tr}',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.bodyMedium
|
|
?.copyWith(fontWeight: FontWeight.w800)),
|
|
]),
|
|
);
|
|
}
|
|
|
|
String _getRankEmoji(int rank) => rank == 1
|
|
? '🥇'
|
|
: rank == 2
|
|
? '🥈'
|
|
: '🥉';
|
|
}
|