admin.suherdy/odoo_loyalty_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: admin.suherdy:e73fc63e878a0b07ad2bc04f6555824e672610b7
Branches Tags
admin.suherdy:main
..
compare: admin.suherdy:6ff44041f08620721c76c6734597b75eaa781e74
Branches Tags
admin.suherdy:main

6 Commits
e73fc63e87 ... 6ff44041f0

Author SHA1 Message Date
Suherdy Yacob
6ff44041f0 feat: update UI theme and improve subscription data fetching and display logic 2026-06-14 11:52:37 +07:00
Suherdy Yacob
afa528abd6 style: redesign subscription list items as beautiful tear-off tickets with notched edges and dashed separator lines, removing all similarities to loyalty cards 2026-06-14 11:19:28 +07:00
Suherdy Yacob
561e69e0f0 style: display branch distance prominently under the title with brand color and near_me icon for improved readability 2026-06-14 11:17:29 +07:00
Suherdy Yacob
370099930d refactor: resolve all hardcoded color references to support dynamic branding colors from backend via Theme.of(context) 2026-06-14 11:09:57 +07:00
Suherdy Yacob
f092a77b0f design: redesign app UI/UX to a premium traditional family restaurant style with rounded layouts and cozy ivory/terracotta palette 2026-06-14 11:03:28 +07:00
Suherdy Yacob
eae35b20cd design: redesign subscription list as distinct premium cards and add client-side filtering to avoid overlap 2026-06-14 11:02:10 +07:00
8 changed files with 566 additions and 281 deletions
Show Stats Expand all files Collapse all files

121
lib/screens/branches_screen.dart
View File

@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:url_launcher/url_launcher.dart';
import '../services/odoo_service.dart';
import '../theme/app_theme.dart';
class BranchesScreen extends StatefulWidget {
const BranchesScreen({super.key});
@ -153,6 +151,9 @@ class _BranchesScreenState extends State<BranchesScreen> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
return _isLoading
? const Center(child: CircularProgressIndicator())
: RefreshIndicator(
@ -163,17 +164,17 @@ class _BranchesScreenState extends State<BranchesScreen> {
if (_locationDenied)
Container(
width: double.infinity,
color: AppTheme.surfaceContainerLow,
color: colorScheme.surfaceContainerLow,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Row(
children: [
const Icon(Icons.location_off, size: 16, color: AppTheme.onSurfaceVariant),
Icon(Icons.location_off, size: 16, color: colorScheme.onSurfaceVariant),
const SizedBox(width: 8),
Expanded(
child: Text(
'Location not available. Showing branches alphabetically.',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: AppTheme.onSurfaceVariant,
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
),
@ -183,16 +184,16 @@ class _BranchesScreenState extends State<BranchesScreen> {
else if (_userPosition != null)
Container(
width: double.infinity,
color: AppTheme.surfaceContainerLow,
color: colorScheme.surfaceContainerLow,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Row(
children: [
const Icon(Icons.my_location, size: 16, color: AppTheme.secondary),
Icon(Icons.my_location, size: 16, color: colorScheme.secondary),
const SizedBox(width: 8),
Text(
'Sorted by distance from your location',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: AppTheme.onSurfaceVariant,
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
],
@ -233,9 +234,16 @@ class _BranchesScreenState extends State<BranchesScreen> {
return Container(
margin: const EdgeInsets.only(bottom: 12),
decoration: const BoxDecoration(
color: AppTheme.surfaceContainerLow,
borderRadius: BorderRadius.zero,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerLow,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 8,
offset: const Offset(0, 3),
),
],
),
child: ListTile(
contentPadding: const EdgeInsets.all(16),
@ -244,70 +252,67 @@ class _BranchesScreenState extends State<BranchesScreen> {
leading: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppTheme.secondaryContainer
.withValues(alpha: 0.2),
shape: BoxShape.rectangle,
color: colorScheme.secondaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.storefront,
color: AppTheme.secondary),
child: Icon(Icons.storefront,
color: colorScheme.secondary),
),
title: Row(
children: [
Expanded(
child: Text(
branch['name'] ?? 'Mapan Branch',
style: Theme.of(context)
.textTheme
.titleMedium,
title: Text(
branch['name'] ?? 'Mapan Branch',
style: theme
.textTheme
.titleMedium
?.copyWith(
fontFamily: 'serif',
fontWeight: FontWeight.bold,
),
),
if (distanceLabel.isNotEmpty)
Container(
margin: const EdgeInsets.only(left: 8),
padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 3),
decoration: const BoxDecoration(
color: AppTheme.secondaryContainer,
),
child: Text(
distanceLabel,
style: Theme.of(context)
.textTheme
.labelLarge
?.copyWith(
color: AppTheme.onSecondaryContainer,
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top: 8.0),
padding: const EdgeInsets.only(top: 6.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (distanceLabel.isNotEmpty) ...[
Row(
children: [
Icon(
Icons.near_me_rounded,
size: 14,
color: colorScheme.primary,
),
const SizedBox(width: 4),
Text(
'$distanceLabel away',
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
const SizedBox(height: 6),
],
Text(
addressParts.isEmpty
? 'No address specified'
: addressParts,
style: Theme.of(context).textTheme.bodyMedium,
style: theme.textTheme.bodyMedium,
),
if (phone.isNotEmpty) ...[
const SizedBox(height: 4),
Row(
children: [
const Icon(Icons.phone,
Icon(Icons.phone,
size: 14,
color: AppTheme.onSurfaceVariant),
color: colorScheme.onSurfaceVariant),
const SizedBox(width: 4),
Text(phone,
style: Theme.of(context)
style: theme
.textTheme
.bodySmall
?.copyWith(
color: AppTheme.onSurfaceVariant)),
color: colorScheme.onSurfaceVariant)),
],
),
]
@ -316,13 +321,13 @@ class _BranchesScreenState extends State<BranchesScreen> {
),
trailing: phone.isNotEmpty
? IconButton(
icon: const Icon(Icons.chat_bubble,
color: AppTheme.onSurface),
icon: Icon(Icons.chat_bubble,
color: colorScheme.onSurface),
onPressed: () => _launchWhatsApp(phone),
tooltip: 'Chat on WhatsApp',
)
: const Icon(Icons.chevron_right,
color: AppTheme.onSurfaceVariant),
: Icon(Icons.chevron_right,
color: colorScheme.onSurfaceVariant),
),
);
},

122
lib/screens/loyalty_dashboard.dart
View File

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import '../services/odoo_service.dart';
import '../theme/app_theme.dart';
import '../widgets/carousel_widget.dart';
import '../widgets/promo_card_widget.dart';
import '../widgets/subscription_list_widget.dart';
@ -37,14 +36,14 @@ class _LoyaltyDashboardState extends State<LoyaltyDashboard> {
OdooService().getCmsContent(),
]);
final cards = results[0] as List<dynamic>;
final subs = results[1] as List<dynamic>;
final rawCards = results[0] as List<dynamic>;
final rawSubs = results[1] as List<dynamic>;
final cms = results[2] as Map<String, dynamic>;
if (mounted) {
setState(() {
_loyaltyCards = cards;
_subscriptions = subs;
_loyaltyCards = rawCards;
_subscriptions = rawSubs;
_carouselSlides = (cms['carousel'] as List<dynamic>?) ?? [];
_promos = (cms['promos'] as List<dynamic>?) ?? [];
_isLoading = false;
@ -112,18 +111,34 @@ class _LoyaltyCardTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final programName = (card['program_id']?[1] as String? ?? '').toLowerCase();
String tier = 'Member';
if (programName.contains('silver')) tier = 'Silver Member';
if (programName.contains('gold')) tier = 'Gold Member';
if (programName.contains('platinum')) tier = 'Platinum Member';
String tier = 'MEMBER';
if (programName.contains('silver')) tier = 'SILVER MEMBER';
if (programName.contains('gold')) tier = 'GOLD MEMBER';
if (programName.contains('platinum')) tier = 'PLATINUM MEMBER';
final onPrimary = colorScheme.onPrimary;
final accentColor = colorScheme.secondary;
return Container(
margin: const EdgeInsets.fromLTRB(16, 16, 16, 0),
margin: const EdgeInsets.fromLTRB(16, 16, 16, 8),
padding: const EdgeInsets.all(24),
decoration: const BoxDecoration(
color: AppTheme.surfaceContainerHighest,
borderRadius: BorderRadius.zero,
decoration: BoxDecoration(
color: colorScheme.primary,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: accentColor.withValues(alpha: 0.5),
width: 1.5,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.12),
blurRadius: 16,
offset: const Offset(0, 6),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -134,43 +149,94 @@ class _LoyaltyCardTile extends StatelessWidget {
Expanded(
child: Text(
'${card['program_id']?[1] ?? 'Loyalty Program'}',
style: Theme.of(context).textTheme.titleLarge,
style: theme.textTheme.titleLarge?.copyWith(
color: onPrimary,
fontFamily: 'serif',
),
softWrap: true,
),
),
const SizedBox(width: 12),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: const BoxDecoration(
color: AppTheme.secondaryContainer,
borderRadius: BorderRadius.zero,
decoration: BoxDecoration(
color: accentColor,
borderRadius: BorderRadius.circular(20),
),
child: Text(
tier,
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: AppTheme.onSecondaryContainer,
style: theme.textTheme.labelLarge?.copyWith(
color: colorScheme.primary.computeLuminance() > 0.5 ? Colors.black : Colors.white,
fontWeight: FontWeight.bold,
fontSize: 9,
letterSpacing: 0.8,
),
),
),
],
),
const SizedBox(height: 20),
Text('Membership Code', style: Theme.of(context).textTheme.bodyMedium),
const SizedBox(height: 24),
Text(
'MEMBERSHIP CODE',
style: theme.textTheme.bodySmall?.copyWith(
color: onPrimary.withValues(alpha: 0.7),
fontWeight: FontWeight.bold,
fontSize: 10,
letterSpacing: 1.0,
),
),
const SizedBox(height: 4),
Text('${card['code'] ?? 'N/A'}',
style: Theme.of(context).textTheme.titleMedium),
const SizedBox(height: 16),
Text(
'${card['code'] ?? 'N/A'}',
style: theme.textTheme.titleMedium?.copyWith(
color: onPrimary,
fontFamily: 'monospace',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text('Available Points',
style: Theme.of(context).textTheme.bodyMedium),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'AVAILABLE POINTS',
style: theme.textTheme.bodySmall?.copyWith(
color: onPrimary.withValues(alpha: 0.7),
fontWeight: FontWeight.bold,
fontSize: 10,
letterSpacing: 1.0,
),
),
const SizedBox(height: 4),
Row(
children: [
Icon(
Icons.restaurant_rounded,
color: accentColor,
size: 16,
),
const SizedBox(width: 6),
Text(
'Dine & Save',
style: theme.textTheme.bodyMedium?.copyWith(
color: onPrimary.withValues(alpha: 0.9),
fontStyle: FontStyle.italic,
),
),
],
),
],
),
Text(
'${card['points'] ?? 0}',
style: Theme.of(context).textTheme.displayMedium?.copyWith(
color: AppTheme.primary,
style: theme.textTheme.displayLarge?.copyWith(
color: accentColor,
fontWeight: FontWeight.bold,
),
),
],

22
lib/screens/main_shell.dart
View File

@ -5,7 +5,6 @@ import 'package:shared_preferences/shared_preferences.dart';
import '../services/odoo_service.dart';
import '../services/notification_service.dart';
import '../services/theme_manager.dart';
import '../theme/app_theme.dart';
import 'notifications_screen.dart';
import 'loyalty_dashboard.dart';
import 'branches_screen.dart';
@ -186,16 +185,29 @@ class _MainShellState extends State<MainShell> {
const SizedBox(width: 4),
],
),
body: IndexedStack(
index: _currentIndex,
children: _pages,
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
colorScheme.surfaceContainerLowest,
colorScheme.surface,
const Color(0xFFF3EAD3), // Warm traditional restaurant sand/cream
],
),
),
child: IndexedStack(
index: _currentIndex,
children: _pages,
),
),
bottomNavigationBar: NavigationBar(
selectedIndex: _currentIndex,
onDestinationSelected: (index) {
setState(() => _currentIndex = index);
},
backgroundColor: AppTheme.surfaceContainerLowest,
backgroundColor: colorScheme.surfaceContainerLowest,
indicatorColor: colorScheme.primary,
destinations: List.generate(4, (i) {
return NavigationDestination(

13
lib/services/odoo_service.dart
View File

@ -48,9 +48,18 @@ class OdooService {
[
['partner_id', '=', partnerId],
['program_id.program_type', '=', 'loyalty'],
['program_id.active', '=', true],
],
],
'kwargs': {'fields': ['points', 'program_id', 'code']}
'kwargs': {
'fields': [
'points',
'program_id',
'code',
'subscription_start_date',
'subscription_end_date',
]
}
}) as List<dynamic>;
}
@ -65,10 +74,12 @@ class OdooService {
[
['partner_id', '=', partnerId],
['program_id.program_type', '=', 'subscription'],
['program_id.active', '=', true],
],
],
'kwargs': {
'fields': [
'points',
'program_id',
'code',
'subscription_start_date',

127
lib/theme/app_theme.dart
View File

@ -2,26 +2,26 @@ import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class AppTheme {
// Editorial Organicism Tokens
static const Color primary = Color(0xFFFFEF00);
static const Color primaryContainer = Color(0xFFFFEF00);
static const Color secondary = Color(0xFF705900);
static const Color secondaryContainer = Color(0xFFFACD34);
static const Color onPrimaryContainer = Color(0xFF5F5800);
static const Color onSecondaryContainer = Color(0xFF584500);
// Warm Traditional Family Restaurant Brand Colors
static const Color primary = Color(0xFF8A1C14); // Rich Brick/Crimson Red
static const Color primaryContainer = Color(0xFF8A1C14);
static const Color secondary = Color(0xFFB58428); // Warm Gold/Honey Amber
static const Color secondaryContainer = Color(0xFFF3DCA2);
static const Color onPrimaryContainer = Colors.white;
static const Color onSecondaryContainer = Color(0xFF5A3E00);
// Surface Hierarchy
static const Color surface = Color(0xFFF7F7F4);
static const Color surfaceContainer = Color(0xFFE8E8E5);
static const Color surfaceContainerLow = Color(0xFFF0F1EE);
static const Color surfaceContainerLowest = Colors.white;
static const Color surfaceContainerHighest = Color(0xFFDCDDDA);
// Warm Ivory & Earthy Surface Hierarchy
static const Color surface = Color(0xFFFAF6EE); // Warm paper ivory background
static const Color surfaceContainer = Color(0xFFF2EAD8); // Soft cream
static const Color surfaceContainerLow = Color(0xFFF7F1E3); // Milky cream
static const Color surfaceContainerLowest = Color(0xFFFCFAF6); // Softest ivory/white
static const Color surfaceContainerHighest = Color(0xFFE5D5BA); // Warm toasted sand
// Text & On-Colors
static const Color onSurface = Color(0xFF2D2F2D);
static const Color onSurfaceVariant = Color(0xFF5A5C5A);
static const Color onPrimary = Color(0xFFFFF59B);
static const Color outlineVariant = Color(0xFFACADAB);
static const Color onSurface = Color(0xFF2E251B); // Earthy dark brown instead of charcoal
static const Color onSurfaceVariant = Color(0xFF635647); // Subdued warm wood tone
static const Color onPrimary = Colors.white;
static const Color outlineVariant = Color(0xFFD3C5B1); // Soft sandy divider
static ThemeData get lightTheme => getTheme();
@ -31,8 +31,8 @@ class AppTheme {
final sColor = secondaryColor ?? secondary;
// Dynamically compute readable contrast text colors
final onPrimaryColor = pColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
final onSecondaryColor = sColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
final onPrimaryColor = pColor.computeLuminance() > 0.5 ? Color(0xFF2E251B) : Colors.white;
final onSecondaryColor = sColor.computeLuminance() > 0.5 ? Color(0xFF2E251B) : Colors.white;
return ThemeData(
useMaterial3: true,
@ -41,7 +41,7 @@ class AppTheme {
primary: pColor,
primaryContainer: pColor,
secondary: sColor,
secondaryContainer: sColor,
secondaryContainer: sColor.withValues(alpha: 0.15),
onSecondaryContainer: onSecondaryColor,
surface: surface,
onSurface: onSurface,
@ -50,75 +50,91 @@ class AppTheme {
error: const Color(0xFFB02500),
),
textTheme: baseTheme.textTheme.copyWith(
displayLarge: GoogleFonts.epilogue(
displayLarge: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.bold,
letterSpacing: -0.02,
letterSpacing: -0.01,
),
displayMedium: GoogleFonts.epilogue(
displayMedium: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.bold,
letterSpacing: -0.02,
letterSpacing: -0.01,
),
displaySmall: GoogleFonts.epilogue(
displaySmall: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.bold,
letterSpacing: -0.02,
letterSpacing: -0.01,
),
headlineMedium: GoogleFonts.epilogue(
headlineMedium: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.bold,
letterSpacing: -0.02,
letterSpacing: -0.01,
),
titleLarge: GoogleFonts.epilogue(
titleLarge: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.bold,
),
titleMedium: GoogleFonts.epilogue(
titleMedium: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.bold,
),
titleSmall: GoogleFonts.epilogue(
titleSmall: GoogleFonts.lora(
color: onSurface,
fontWeight: FontWeight.w600,
),
bodyLarge: GoogleFonts.manrope(color: onSurface),
bodyMedium: GoogleFonts.manrope(color: onSurfaceVariant),
bodySmall: GoogleFonts.manrope(color: onSurfaceVariant),
labelLarge: GoogleFonts.manrope(color: onSurfaceVariant),
bodyLarge: GoogleFonts.manrope(
color: onSurface,
letterSpacing: 0.1,
),
bodyMedium: GoogleFonts.manrope(
color: onSurfaceVariant,
letterSpacing: 0.1,
),
bodySmall: GoogleFonts.manrope(
color: onSurfaceVariant,
letterSpacing: 0.1,
),
labelLarge: GoogleFonts.manrope(
color: onSurfaceVariant,
fontWeight: FontWeight.w600,
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(28), // Elegant pill buttons
),
foregroundColor: onPrimaryColor,
backgroundColor: pColor,
elevation: 0,
side: const BorderSide(color: Colors.red, width: 2),
elevation: 2,
shadowColor: pColor.withValues(alpha: 0.2),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
),
),
cardTheme: const CardThemeData(
cardTheme: CardThemeData(
color: surfaceContainerLow,
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
elevation: 1,
shadowColor: Colors.black.withValues(alpha: 0.05),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), // Softer warm card corners
),
margin: EdgeInsets.zero,
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: surfaceContainer, // Spec: surfaceContainer with 0px radius
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
border: const OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.zero,
),
enabledBorder: const OutlineInputBorder(
fillColor: surfaceContainer,
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.zero,
borderRadius: BorderRadius.circular(12),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: pColor.withValues(alpha: 0.5), width: 2),
borderRadius: BorderRadius.zero,
borderSide: BorderSide(color: pColor.withValues(alpha: 0.5), width: 1.5),
borderRadius: BorderRadius.circular(12),
),
labelStyle: const TextStyle(color: onSurfaceVariant),
hintStyle: GoogleFonts.manrope(color: onSurfaceVariant),
@ -128,11 +144,12 @@ class AppTheme {
foregroundColor: onSurface,
elevation: 0,
surfaceTintColor: Colors.transparent,
titleTextStyle: GoogleFonts.epilogue(
centerTitle: true,
titleTextStyle: GoogleFonts.lora(
color: onSurface,
fontSize: 20,
fontSize: 21,
fontWeight: FontWeight.bold,
letterSpacing: -0.02,
letterSpacing: -0.01,
),
),
);

42
lib/widgets/carousel_widget.dart
View File

@ -2,7 +2,6 @@ import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import '../theme/app_theme.dart';
import '../screens/carousel_detail_screen.dart';
/// Auto-scrolling carousel widget that shows slides from CMS.
@ -55,6 +54,8 @@ class _CarouselWidgetState extends State<CarouselWidget> {
@override
Widget build(BuildContext context) {
if (widget.slides.isEmpty) return const SizedBox.shrink();
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
return Column(
children: [
@ -83,8 +84,8 @@ class _CarouselWidgetState extends State<CarouselWidget> {
dotHeight: 6,
dotWidth: 6,
expansionFactor: 3,
dotColor: AppTheme.surfaceContainer,
activeDotColor: AppTheme.secondary,
dotColor: colorScheme.surfaceContainer,
activeDotColor: colorScheme.secondary,
),
),
),
@ -99,6 +100,8 @@ class _SlideImage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final base64Img = slide['image'] as String?;
final externalUrl = slide['image_url'] as String?;
@ -110,7 +113,7 @@ class _SlideImage extends StatelessWidget {
final Uint8List bytes = base64Decode(base64Img);
image = Image.memory(bytes, fit: BoxFit.cover, width: double.infinity);
} catch (_) {
image = _placeholder();
image = _placeholder(colorScheme);
}
} else if (externalUrl != null && externalUrl.isNotEmpty) {
// External URL image
@ -118,28 +121,41 @@ class _SlideImage extends StatelessWidget {
externalUrl,
fit: BoxFit.cover,
width: double.infinity,
errorBuilder: (_, __, ___) => _placeholder(),
errorBuilder: (_, __, ___) => _placeholder(colorScheme),
loadingBuilder: (ctx, child, progress) {
if (progress == null) return child;
return const Center(child: CircularProgressIndicator());
},
);
} else {
image = _placeholder();
image = _placeholder(colorScheme);
}
return Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: const BoxDecoration(color: AppTheme.surfaceContainerLow),
child: ClipRect(child: image),
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerLow,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: image,
),
);
}
Widget _placeholder() {
Widget _placeholder(ColorScheme colorScheme) {
return Container(
color: AppTheme.surfaceContainer,
child: const Center(
child: Icon(Icons.image_rounded, size: 48, color: AppTheme.outlineVariant),
color: colorScheme.surfaceContainer,
child: Center(
child: Icon(Icons.image_rounded, size: 48, color: colorScheme.outline),
),
);
}

43
lib/widgets/promo_card_widget.dart
View File

@ -1,7 +1,6 @@
import 'dart:convert';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../screens/promo_detail_screen.dart';
/// Horizontal scrollable row of promo highlight cards.
@ -48,6 +47,8 @@ class _PromoCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final base64Img = promo['image_128'] as String?;
final title = promo['name'] as String? ?? '';
@ -58,10 +59,10 @@ class _PromoCard extends StatelessWidget {
imageWidget = Image.memory(bytes, fit: BoxFit.cover,
width: double.infinity, height: 110);
} catch (_) {
imageWidget = _imagePlaceholder();
imageWidget = _imagePlaceholder(colorScheme);
}
} else {
imageWidget = _imagePlaceholder();
imageWidget = _imagePlaceholder(colorScheme);
}
return GestureDetector(
@ -73,9 +74,21 @@ class _PromoCard extends StatelessWidget {
},
child: Container(
width: 140,
margin: const EdgeInsets.only(right: 12),
decoration: const BoxDecoration(
color: AppTheme.surfaceContainerLow,
margin: const EdgeInsets.only(right: 12, bottom: 6),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerLowest,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: colorScheme.outline.withValues(alpha: 0.3),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 6,
offset: const Offset(0, 3),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -83,15 +96,19 @@ class _PromoCard extends StatelessWidget {
SizedBox(
height: 110,
width: double.infinity,
child: ClipRect(child: imageWidget),
child: ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
child: imageWidget,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
title,
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: AppTheme.onSurface,
style: theme.textTheme.labelLarge?.copyWith(
color: colorScheme.onSurface,
fontWeight: FontWeight.bold,
fontSize: 11,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
@ -103,11 +120,11 @@ class _PromoCard extends StatelessWidget {
);
}
Widget _imagePlaceholder() {
Widget _imagePlaceholder(ColorScheme colorScheme) {
return Container(
color: AppTheme.surfaceContainer,
child: const Center(
child: Icon(Icons.local_offer_rounded, size: 32, color: AppTheme.outlineVariant),
color: colorScheme.surfaceContainer,
child: Center(
child: Icon(Icons.local_offer_rounded, size: 32, color: colorScheme.outline),
),
);
}

357
lib/widgets/subscription_list_widget.dart
View File

@ -1,8 +1,8 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
/// Compact "My Subscriptions" list — displayed on the home tab below the loyalty card.
/// Each row shows the subscription name, active/expired badge, validity period, and card code.
/// "My Subscriptions" list displayed on the home tab below the loyalty card.
/// Renders each subscription as a beautiful standalone ticket card visually distinct
/// from the points-based loyalty card.
class SubscriptionListWidget extends StatelessWidget {
final List<dynamic> subscriptions;
@ -12,48 +12,39 @@ class SubscriptionListWidget extends StatelessWidget {
Widget build(BuildContext context) {
if (subscriptions.isEmpty) return const SizedBox.shrink();
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 20, 16, 10),
padding: const EdgeInsets.fromLTRB(16, 24, 16, 8),
child: Text(
'MY SUBSCRIPTIONS',
style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: AppTheme.onSurfaceVariant,
style: theme.textTheme.labelLarge?.copyWith(
color: colorScheme.onSurfaceVariant,
letterSpacing: 1.2,
fontSize: 11,
fontWeight: FontWeight.bold,
),
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 16),
decoration: const BoxDecoration(
color: AppTheme.surfaceContainerLow,
),
child: Column(
children: List.generate(subscriptions.length, (index) {
final sub = subscriptions[index];
final isLast = index == subscriptions.length - 1;
return _SubscriptionTile(sub: sub, isLast: isLast);
}),
),
),
...subscriptions.map((sub) => _SubscriptionCard(sub: sub)),
],
);
}
}
class _SubscriptionTile extends StatelessWidget {
class _SubscriptionCard extends StatelessWidget {
final dynamic sub;
final bool isLast;
const _SubscriptionTile({required this.sub, required this.isLast});
const _SubscriptionCard({required this.sub});
/// Determine active/expired status from subscription_end_date.
bool _isActive() {
final endRaw = sub['subscription_end_date'];
if (endRaw == null || endRaw == false) return true; // no end date = no expiry
if (endRaw == null || endRaw == false) return true; // no end date = active
try {
final endDate = DateTime.parse(endRaw.toString());
return endDate.isAfter(DateTime.now());
@ -85,6 +76,9 @@ class _SubscriptionTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final programName = sub['program_id'] is List
? (sub['program_id'][1] as String? ?? 'Subscription')
: 'Subscription';
@ -93,98 +87,245 @@ class _SubscriptionTile extends StatelessWidget {
final endDate = _formatDate(sub['subscription_end_date']);
final active = _isActive();
return Container(
decoration: BoxDecoration(
border: isLast
? null
: const Border(
bottom: BorderSide(
color: AppTheme.surfaceContainer,
width: 1,
),
),
),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Icon
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: active
? AppTheme.secondaryContainer.withValues(alpha: 0.35)
: AppTheme.surfaceContainer,
shape: BoxShape.rectangle,
),
child: Icon(
Icons.verified_rounded,
size: 22,
color: active ? AppTheme.secondary : AppTheme.outlineVariant,
),
),
const SizedBox(width: 14),
// Name + dates
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
programName,
style: Theme.of(context).textTheme.titleSmall?.copyWith(
return Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 8),
child: PhysicalShape(
clipper: TicketClipper(),
color: colorScheme.surfaceContainerLowest,
elevation: 3,
shadowColor: Colors.black.withValues(alpha: 0.15),
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Top Section: Title & Status
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
Icons.local_activity_rounded, // Distinct ticket pass icon
size: 18,
color: active ? colorScheme.primary : colorScheme.outline,
),
const SizedBox(width: 8),
Text(
'SUBSCRIPTION PASS', // Distinct title
style: theme.textTheme.labelLarge?.copyWith(
color: active ? colorScheme.primary : colorScheme.outline,
fontWeight: FontWeight.bold,
fontSize: 10,
letterSpacing: 1.2,
),
),
],
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: active
? const Color(0xFF1B5E20).withValues(alpha: 0.10)
: const Color(0xFFB02500).withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(20),
),
child: Text(
active ? 'ACTIVE' : 'EXPIRED',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: AppTheme.onSurface,
letterSpacing: 0.8,
color: active
? const Color(0xFF2E7D32)
: const Color(0xFFB02500),
),
),
const SizedBox(height: 3),
Text(
'$startDate → $endDate',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: AppTheme.onSurfaceVariant,
),
),
if (code.isNotEmpty) ...[
const SizedBox(height: 2),
Text(
code,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: AppTheme.outlineVariant,
fontFamily: 'monospace',
fontSize: 11,
),
),
),
],
],
),
),
const SizedBox(width: 8),
// Active / Expired badge
Container(
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 4),
decoration: BoxDecoration(
color: active
? const Color(0xFF1B5E20).withValues(alpha: 0.12)
: const Color(0xFFB02500).withValues(alpha: 0.10),
borderRadius: BorderRadius.circular(4),
),
child: Text(
active ? 'ACTIVE' : 'EXPIRED',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
letterSpacing: 0.8,
color: active
? const Color(0xFF2E7D32)
: const Color(0xFFB02500),
),
),
const SizedBox(height: 18),
// Dashed Separator
CustomPaint(
size: const Size(double.infinity, 1),
painter: DashedLinePainter(
color: colorScheme.outline.withValues(alpha: 0.25),
),
),
const SizedBox(height: 18),
// Bottom Section: Details
Text(
programName,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
fontFamily: 'serif',
),
),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pass Code', // Distinct field label
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
code.isNotEmpty ? code : 'N/A',
style: theme.textTheme.bodyMedium?.copyWith(
fontFamily: 'monospace',
fontWeight: FontWeight.bold,
color: colorScheme.onSurface,
),
),
],
),
if (sub['points'] != null)
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'Claim Balance',
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
'${(sub['points'] as num).toDouble() % 1 == 0 ? (sub['points'] as num).toInt() : sub['points']} Claims',
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.primary,
fontWeight: FontWeight.bold,
),
),
],
),
],
),
if (sub['subscription_start_date'] != null && sub['subscription_start_date'] != false) ...[
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Valid From',
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
startDate,
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface,
fontWeight: FontWeight.w600,
),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'Expires On',
style: theme.textTheme.bodySmall?.copyWith(
color: colorScheme.onSurfaceVariant,
fontSize: 10,
),
),
const SizedBox(height: 2),
Text(
endDate,
style: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurface,
fontWeight: FontWeight.w600,
),
),
],
),
],
),
],
],
),
],
),
),
);
}
}
/// Custom Clipper for a ticket-like appearance with side notches.
class TicketClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(0, 0);
path.lineTo(size.width, 0);
// Right side notch at height 49 (approx. center of vertical separator space)
const double notchY = 49.0;
const double notchRadius = 8.0;
path.lineTo(size.width, notchY - notchRadius);
path.arcToPoint(
Offset(size.width, notchY + notchRadius),
radius: const Radius.circular(notchRadius),
clockwise: false,
);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
// Left side notch
path.lineTo(0, notchY + notchRadius);
path.arcToPoint(
const Offset(0, notchY - notchRadius),
radius: const Radius.circular(notchRadius),
clockwise: false,
);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
/// Painter to draw a clean dashed divider line.
class DashedLinePainter extends CustomPainter {
final Color color;
DashedLinePainter({required this.color});
@override
void paint(Canvas canvas, Size size) {
double dashWidth = 5.0;
double dashSpace = 4.0;
double startX = 0.0;
final paint = Paint()
..color = color
..strokeWidth = 1.0;
while (startX < size.width) {
canvas.drawLine(
Offset(startX, 0),
Offset(startX + dashWidth, 0),
paint,
);
startX += dashWidth + dashSpace;
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}