229 lines
9.0 KiB
Dart
229 lines
9.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import '../../../constant/finance_design_system.dart';
|
|
import '../../../controller/gamification/challenges_controller.dart';
|
|
|
|
class ChallengesPage extends StatelessWidget {
|
|
ChallengesPage({super.key});
|
|
final ChallengesController controller = Get.put(ChallengesController());
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: FinanceDesignSystem.backgroundColor,
|
|
body: GetBuilder<ChallengesController>(builder: (cc) {
|
|
if (cc.isLoading)
|
|
return const Center(
|
|
child: CircularProgressIndicator(
|
|
color: FinanceDesignSystem.primaryDark));
|
|
return CustomScrollView(
|
|
physics: const BouncingScrollPhysics(),
|
|
slivers: [
|
|
SliverAppBar(
|
|
expandedHeight: 160,
|
|
pinned: true,
|
|
backgroundColor: const Color(0xFF1A237E),
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back_ios_new_rounded,
|
|
color: Colors.white, size: 20),
|
|
onPressed: () => Get.back()),
|
|
actions: [
|
|
IconButton(
|
|
icon: const Icon(Icons.refresh_rounded,
|
|
color: Colors.white),
|
|
onPressed: () => cc.fetchChallengeProgress())
|
|
],
|
|
flexibleSpace: FlexibleSpaceBar(
|
|
centerTitle: true,
|
|
title: Text('Challenges'.tr,
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 18)),
|
|
background: Stack(fit: StackFit.expand, children: [
|
|
Container(
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(colors: [
|
|
Color(0xFF0A0E21),
|
|
Color(0xFF1A237E)
|
|
]))),
|
|
Positioned(
|
|
right: -30,
|
|
top: -10,
|
|
child: Icon(Icons.bolt_rounded,
|
|
size: 160, color: Colors.white.withOpacity(0.04))),
|
|
]),
|
|
),
|
|
),
|
|
SliverPadding(
|
|
padding: const EdgeInsets.fromLTRB(16, 24, 16, 40),
|
|
sliver: SliverList(
|
|
delegate: SliverChildListDelegate([
|
|
// Daily Challenges
|
|
_sectionHeader(
|
|
'Daily Challenges'.tr,
|
|
'🔥',
|
|
cc.dailyChallenges.where((c) => c.isCompleted).length,
|
|
cc.dailyChallenges.length),
|
|
const SizedBox(height: 12),
|
|
...cc.dailyChallenges.map((c) => _challengeCard(c, cc)),
|
|
const SizedBox(height: 28),
|
|
// Weekly Challenges
|
|
_sectionHeader(
|
|
'Weekly Challenges'.tr,
|
|
'🏆',
|
|
cc.weeklyChallenges.where((c) => c.isCompleted).length,
|
|
cc.weeklyChallenges.length),
|
|
const SizedBox(height: 12),
|
|
...cc.weeklyChallenges.map((c) => _challengeCard(c, cc)),
|
|
]))),
|
|
]);
|
|
}),
|
|
);
|
|
}
|
|
|
|
Widget _sectionHeader(String title, String emoji, int done, int total) {
|
|
return Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
|
Row(children: [
|
|
Text(emoji, style: const TextStyle(fontSize: 20)),
|
|
const SizedBox(width: 8),
|
|
Text(title, style: FinanceDesignSystem.headingStyle),
|
|
]),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: FinanceDesignSystem.accentBlue.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(20)),
|
|
child: Text('$done/$total',
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
color: FinanceDesignSystem.accentBlue)),
|
|
),
|
|
]);
|
|
}
|
|
|
|
Widget _challengeCard(Challenge c, ChallengesController cc) {
|
|
final isAr = Get.locale?.languageCode == 'ar';
|
|
return Container(
|
|
margin: const EdgeInsets.only(bottom: 12),
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(FinanceDesignSystem.cardRadius),
|
|
border: c.isCompleted
|
|
? Border.all(color: c.color.withOpacity(0.3), width: 1.5)
|
|
: null,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.03),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, 4))
|
|
],
|
|
),
|
|
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
|
Row(children: [
|
|
Container(
|
|
width: 44,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: c.color.withOpacity(0.12),
|
|
borderRadius: BorderRadius.circular(12)),
|
|
child: Icon(c.icon, color: c.color, size: 22),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(isAr ? c.titleAr : c.titleEn,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.bold,
|
|
color: FinanceDesignSystem.primaryDark)),
|
|
Text(isAr ? c.descriptionAr : c.descriptionEn,
|
|
style:
|
|
TextStyle(fontSize: 11, color: Colors.grey.shade500)),
|
|
])),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFFFD700).withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(12)),
|
|
child: Text('+${c.reward}',
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
color: Color(0xFFFF8F00))),
|
|
),
|
|
]),
|
|
const SizedBox(height: 14),
|
|
// Progress bar
|
|
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
|
Text('${c.currentProgress}/${c.target}',
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.grey.shade600)),
|
|
Text('${(c.progress * 100).toStringAsFixed(0)}%',
|
|
style: TextStyle(
|
|
fontSize: 11, fontWeight: FontWeight.bold, color: c.color)),
|
|
]),
|
|
const SizedBox(height: 6),
|
|
Stack(children: [
|
|
Container(
|
|
height: 8,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade100,
|
|
borderRadius: BorderRadius.circular(4))),
|
|
LayoutBuilder(
|
|
builder: (ctx, cons) => AnimatedContainer(
|
|
duration: const Duration(milliseconds: 600),
|
|
curve: Curves.easeOutCubic,
|
|
height: 8,
|
|
width: cons.maxWidth * c.progress,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [c.color, c.color.withOpacity(0.6)]),
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
)),
|
|
]),
|
|
// Claim button
|
|
if (c.isCompleted && !c.isClaimed) ...[
|
|
const SizedBox(height: 12),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton.icon(
|
|
onPressed: () => cc.claimReward(c),
|
|
icon: const Icon(Icons.card_giftcard_rounded, size: 18),
|
|
label: Text('Claim Reward'.tr),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: c.color,
|
|
foregroundColor: Colors.white,
|
|
elevation: 0,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12)),
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
),
|
|
)),
|
|
],
|
|
if (c.isClaimed) ...[
|
|
const SizedBox(height: 8),
|
|
Center(
|
|
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
|
const Icon(Icons.check_circle_rounded,
|
|
color: FinanceDesignSystem.successGreen, size: 16),
|
|
const SizedBox(width: 4),
|
|
Text('Claimed'.tr,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.bold,
|
|
color: FinanceDesignSystem.successGreen)),
|
|
])),
|
|
],
|
|
]),
|
|
);
|
|
}
|
|
}
|