Update: 2026-08-08 16:55:39
This commit is contained in:
Hamza-Ayed
@@ -1,7 +1,8 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import '../../../constant/finance_design_system.dart';
|
||||
import '../../constant/colors.dart';
|
||||
import '../../../controller/gamification/challenges_controller.dart';
|
||||
import '../widgets/ui/siro_ui.dart';
|
||||
|
||||
class ChallengesPage extends StatelessWidget {
|
||||
ChallengesPage({super.key});
|
||||
@@ -10,24 +11,18 @@ class ChallengesPage extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: FinanceDesignSystem.backgroundColor,
|
||||
body: GetBuilder<ChallengesController>(builder: (cc) {
|
||||
if (cc.isLoading) {
|
||||
return Center(
|
||||
child: CircularProgressIndicator(
|
||||
color: FinanceDesignSystem.primaryDark));
|
||||
return const SiroLoading();
|
||||
}
|
||||
return CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(),
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
expandedHeight: 160,
|
||||
expandedHeight: 150,
|
||||
pinned: true,
|
||||
backgroundColor: Get.isDarkMode ? FinanceDesignSystem.primaryDark : const Color(0xFF1A237E),
|
||||
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,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh_rounded,
|
||||
@@ -36,136 +31,98 @@ class ChallengesPage extends StatelessWidget {
|
||||
],
|
||||
flexibleSpace: FlexibleSpaceBar(
|
||||
centerTitle: true,
|
||||
titlePadding: const EdgeInsets.symmetric(
|
||||
horizontal: 48, vertical: 14),
|
||||
title: Text('Challenges'.tr,
|
||||
style: TextStyle(
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18)),
|
||||
fontSize: 17)),
|
||||
background: Stack(fit: StackFit.expand, children: [
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(colors: Get.isDarkMode
|
||||
? [FinanceDesignSystem.primaryDark, const Color(0xFF1E1E2E)]
|
||||
: [const Color(0xFF0A0E21), const Color(0xFF1A237E)]
|
||||
))),
|
||||
Positioned(
|
||||
right: -30,
|
||||
gradient: SiroUi.brandGradient(context))),
|
||||
PositionedDirectional(
|
||||
end: -30,
|
||||
top: -10,
|
||||
child: Icon(Icons.bolt_rounded,
|
||||
size: 160, color: Colors.white.withValues(alpha: 0.04))),
|
||||
size: 160,
|
||||
color: Colors.white.withValues(alpha: 0.05))),
|
||||
]),
|
||||
),
|
||||
),
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 24, 16, 40),
|
||||
padding: const EdgeInsets.fromLTRB(16, 8, 16, 32),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildListDelegate([
|
||||
// Daily Challenges
|
||||
_sectionHeader(
|
||||
context,
|
||||
'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),
|
||||
...cc.dailyChallenges
|
||||
.map((c) => _challengeCard(context, c, cc)),
|
||||
const SizedBox(height: 16),
|
||||
// Weekly Challenges
|
||||
_sectionHeader(
|
||||
context,
|
||||
'Weekly Challenges'.tr,
|
||||
'🏆',
|
||||
cc.weeklyChallenges.where((c) => c.isCompleted).length,
|
||||
cc.weeklyChallenges.length),
|
||||
const SizedBox(height: 12),
|
||||
...cc.weeklyChallenges.map((c) => _challengeCard(c, cc)),
|
||||
...cc.weeklyChallenges
|
||||
.map((c) => _challengeCard(context, 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.withValues(alpha: 0.1),
|
||||
borderRadius: BorderRadius.circular(20)),
|
||||
child: Text('$done/$total',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: FinanceDesignSystem.accentBlue)),
|
||||
),
|
||||
]);
|
||||
Widget _sectionHeader(
|
||||
BuildContext context, String title, int done, int total) {
|
||||
return SiroSectionTitle(
|
||||
title,
|
||||
trailing: SiroTag('$done/$total', color: SiroUi.interactive(context)),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _challengeCard(Challenge c, ChallengesController cc) {
|
||||
Widget _challengeCard(
|
||||
BuildContext context, 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.withValues(alpha: 0.3), width: 1.5)
|
||||
: null,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.03),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 4))
|
||||
],
|
||||
),
|
||||
return SiroCard(
|
||||
accent: c.isCompleted ? c.color : null,
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Row(children: [
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: c.color.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12)),
|
||||
child: Icon(c.icon, color: c.color, size: 22),
|
||||
),
|
||||
SiroIconBadge(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)),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium
|
||||
?.copyWith(fontWeight: FontWeight.bold)),
|
||||
Text(isAr ? c.descriptionAr : c.descriptionEn,
|
||||
style:
|
||||
TextStyle(fontSize: 11, color: FinanceDesignSystem.textSecondary)),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodySmall
|
||||
?.copyWith(fontSize: 11)),
|
||||
])),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xFFFFD700).withValues(alpha: 0.15),
|
||||
borderRadius: BorderRadius.circular(12)),
|
||||
child: Text('+${c.reward}',
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFFFF8F00))),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
SiroTag('+${c.reward}',
|
||||
color: AppColor.yellowColor, icon: Icons.star_rounded),
|
||||
]),
|
||||
const SizedBox(height: 14),
|
||||
// Progress bar
|
||||
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
||||
Text('${c.currentProgress}/${c.target}',
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: FinanceDesignSystem.textSecondary)),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodySmall
|
||||
?.copyWith(fontSize: 11, fontWeight: FontWeight.w600)),
|
||||
Text('${(c.progress * 100).toStringAsFixed(0)}%',
|
||||
style: TextStyle(
|
||||
fontSize: 11, fontWeight: FontWeight.bold, color: c.color)),
|
||||
@@ -175,7 +132,7 @@ class ChallengesPage extends StatelessWidget {
|
||||
Container(
|
||||
height: 8,
|
||||
decoration: BoxDecoration(
|
||||
color: FinanceDesignSystem.backgroundColor,
|
||||
color: SiroUi.border(context),
|
||||
borderRadius: BorderRadius.circular(4))),
|
||||
LayoutBuilder(
|
||||
builder: (ctx, cons) => AnimatedContainer(
|
||||
@@ -207,14 +164,11 @@ class ChallengesPage extends StatelessWidget {
|
||||
),
|
||||
)
|
||||
: const Icon(Icons.card_giftcard_rounded, size: 18),
|
||||
label: Text(cc.isClaiming(c.id) ? 'Claiming...'.tr : 'Claim Reward'.tr),
|
||||
label: Text(
|
||||
cc.isClaiming(c.id) ? 'Claiming...'.tr : '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),
|
||||
),
|
||||
)),
|
||||
],
|
||||
@@ -222,14 +176,14 @@ class ChallengesPage extends StatelessWidget {
|
||||
const SizedBox(height: 8),
|
||||
Center(
|
||||
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
Icon(Icons.check_circle_rounded,
|
||||
color: FinanceDesignSystem.successGreen, size: 16),
|
||||
const Icon(Icons.check_circle_rounded,
|
||||
color: AppColor.greenColor, size: 16),
|
||||
const SizedBox(width: 4),
|
||||
Text('Claimed'.tr,
|
||||
style: TextStyle(
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: FinanceDesignSystem.successGreen)),
|
||||
color: AppColor.greenColor)),
|
||||
])),
|
||||
],
|
||||
]),
|
||||
|
||||
Reference in New Issue
Block a user