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

design: redesign app UI/UX to a premium traditional family restaurant style with rounded layouts and cozy ivory/terracotta palette

Browse Source
This commit is contained in:
Suherdy Yacob 2026-06-14 11:03:28 +07:00
parent eae35b20cd
commit f092a77b0f
6 changed files with 222 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
lib/screens/branches_screen.dart
View File

@ -233,9 +233,16 @@ class _BranchesScreenState extends State<BranchesScreen> {
return Container( return Container(
margin: const EdgeInsets.only(bottom: 12), margin: const EdgeInsets.only(bottom: 12),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: AppTheme.surfaceContainerLow, color: AppTheme.surfaceContainerLow,
borderRadius: BorderRadius.zero, borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 8,
offset: const Offset(0, 3),
),
],
), ),
child: ListTile( child: ListTile(
contentPadding: const EdgeInsets.all(16), contentPadding: const EdgeInsets.all(16),
@ -244,9 +251,8 @@ class _BranchesScreenState extends State<BranchesScreen> {
leading: Container( leading: Container(
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.secondaryContainer color: AppTheme.secondaryContainer,
.withValues(alpha: 0.2), borderRadius: BorderRadius.circular(12),
shape: BoxShape.rectangle,
), ),
child: const Icon(Icons.storefront, child: const Icon(Icons.storefront,
color: AppTheme.secondary), color: AppTheme.secondary),
@ -258,7 +264,11 @@ class _BranchesScreenState extends State<BranchesScreen> {
branch['name'] ?? 'Mapan Branch', branch['name'] ?? 'Mapan Branch',
style: Theme.of(context) style: Theme.of(context)
.textTheme .textTheme
.titleMedium, .titleMedium
?.copyWith(
fontFamily: 'serif',
fontWeight: FontWeight.bold,
),
), ),
), ),
if (distanceLabel.isNotEmpty) if (distanceLabel.isNotEmpty)
@ -266,8 +276,9 @@ class _BranchesScreenState extends State<BranchesScreen> {
margin: const EdgeInsets.only(left: 8), margin: const EdgeInsets.only(left: 8),
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 3), horizontal: 8, vertical: 3),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: AppTheme.secondaryContainer, color: AppTheme.secondaryContainer,
borderRadius: BorderRadius.circular(12),
), ),
child: Text( child: Text(
distanceLabel, distanceLabel,
@ -276,7 +287,7 @@ class _BranchesScreenState extends State<BranchesScreen> {
.labelLarge .labelLarge
?.copyWith( ?.copyWith(
color: AppTheme.onSecondaryContainer, color: AppTheme.onSecondaryContainer,
fontSize: 11, fontSize: 10,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),

106
lib/screens/loyalty_dashboard.dart
View File

@ -131,17 +131,28 @@ class _LoyaltyCardTile extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final programName = (card['program_id']?[1] as String? ?? '').toLowerCase(); final programName = (card['program_id']?[1] as String? ?? '').toLowerCase();
String tier = 'Member'; String tier = 'MEMBER';
if (programName.contains('silver')) tier = 'Silver Member'; if (programName.contains('silver')) tier = 'SILVER MEMBER';
if (programName.contains('gold')) tier = 'Gold Member'; if (programName.contains('gold')) tier = 'GOLD MEMBER';
if (programName.contains('platinum')) tier = 'Platinum Member'; if (programName.contains('platinum')) tier = 'PLATINUM MEMBER';
return Container( return Container(
margin: const EdgeInsets.fromLTRB(16, 16, 16, 0), margin: const EdgeInsets.fromLTRB(16, 16, 16, 8),
padding: const EdgeInsets.all(24), padding: const EdgeInsets.all(24),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: AppTheme.surfaceContainerHighest, color: AppTheme.primary, // Rich brick red background
borderRadius: BorderRadius.zero, borderRadius: BorderRadius.circular(16),
border: Border.all(
color: const Color(0xFFF3DCA2), // Golden border
width: 1.5,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.12),
blurRadius: 16,
offset: const Offset(0, 6),
),
],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -152,43 +163,94 @@ class _LoyaltyCardTile extends StatelessWidget {
Expanded( Expanded(
child: Text( child: Text(
'${card['program_id']?[1] ?? 'Loyalty Program'}', '${card['program_id']?[1] ?? 'Loyalty Program'}',
style: Theme.of(context).textTheme.titleLarge, style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: Colors.white,
fontFamily: 'serif',
),
softWrap: true, softWrap: true,
), ),
), ),
const SizedBox(width: 12), const SizedBox(width: 12),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: AppTheme.secondaryContainer, color: const Color(0xFFB58428), // Golden honey badge background
borderRadius: BorderRadius.zero, borderRadius: BorderRadius.circular(20),
), ),
child: Text( child: Text(
tier, tier,
style: Theme.of(context).textTheme.labelLarge?.copyWith( style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: AppTheme.onSecondaryContainer, color: Colors.white,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 9,
letterSpacing: 0.8,
), ),
), ),
), ),
], ],
), ),
const SizedBox(height: 20), const SizedBox(height: 24),
Text('Membership Code', style: Theme.of(context).textTheme.bodyMedium), Text(
'MEMBERSHIP CODE',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.white.withValues(alpha: 0.7),
fontWeight: FontWeight.bold,
fontSize: 10,
letterSpacing: 1.0,
),
),
const SizedBox(height: 4), const SizedBox(height: 4),
Text('${card['code'] ?? 'N/A'}', Text(
style: Theme.of(context).textTheme.titleMedium), '${card['code'] ?? 'N/A'}',
const SizedBox(height: 16), style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Colors.white,
fontFamily: 'monospace',
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
children: [ children: [
Text('Available Points', Column(
style: Theme.of(context).textTheme.bodyMedium), crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'AVAILABLE POINTS',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Colors.white.withValues(alpha: 0.7),
fontWeight: FontWeight.bold,
fontSize: 10,
letterSpacing: 1.0,
),
),
const SizedBox(height: 4),
Row(
children: [
const Icon(
Icons.restaurant_rounded,
color: Color(0xFFF3DCA2),
size: 16,
),
const SizedBox(width: 6),
Text(
'Dine & Save',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Colors.white.withValues(alpha: 0.9),
fontStyle: FontStyle.italic,
),
),
],
),
],
),
Text( Text(
'${card['points'] ?? 0}', '${card['points'] ?? 0}',
style: Theme.of(context).textTheme.displayMedium?.copyWith( style: Theme.of(context).textTheme.displayLarge?.copyWith(
color: AppTheme.primary, color: const Color(0xFFF3DCA2), // Bright golden amber accent
fontWeight: FontWeight.bold,
), ),
), ),
], ],

127
lib/theme/app_theme.dart
View File

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

19
lib/widgets/carousel_widget.dart
View File

@ -129,9 +129,22 @@ class _SlideImage extends StatelessWidget {
} }
return Container( return Container(
margin: const EdgeInsets.symmetric(horizontal: 16), margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
decoration: const BoxDecoration(color: AppTheme.surfaceContainerLow), decoration: BoxDecoration(
child: ClipRect(child: image), color: AppTheme.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,
),
); );
} }

24
lib/widgets/promo_card_widget.dart
View File

@ -73,9 +73,21 @@ class _PromoCard extends StatelessWidget {
}, },
child: Container( child: Container(
width: 140, width: 140,
margin: const EdgeInsets.only(right: 12), margin: const EdgeInsets.only(right: 12, bottom: 6),
decoration: const BoxDecoration( decoration: BoxDecoration(
color: AppTheme.surfaceContainerLow, color: AppTheme.surfaceContainerLowest,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppTheme.outlineVariant.withValues(alpha: 0.3),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 6,
offset: const Offset(0, 3),
),
],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -83,7 +95,10 @@ class _PromoCard extends StatelessWidget {
SizedBox( SizedBox(
height: 110, height: 110,
width: double.infinity, width: double.infinity,
child: ClipRect(child: imageWidget), child: ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
child: imageWidget,
),
), ),
Padding( Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
@ -92,6 +107,7 @@ class _PromoCard extends StatelessWidget {
style: Theme.of(context).textTheme.labelLarge?.copyWith( style: Theme.of(context).textTheme.labelLarge?.copyWith(
color: AppTheme.onSurface, color: AppTheme.onSurface,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 11,
), ),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,

14
lib/widgets/subscription_list_widget.dart
View File

@ -88,10 +88,17 @@ class _SubscriptionCard extends StatelessWidget {
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppTheme.surfaceContainerLowest, color: AppTheme.surfaceContainerLowest,
border: Border.all( border: Border.all(
color: active ? AppTheme.secondaryContainer : AppTheme.surfaceContainerHighest, color: active ? AppTheme.secondary.withValues(alpha: 0.4) : AppTheme.outlineVariant.withValues(alpha: 0.4),
width: 1.5, width: 1.5,
), ),
borderRadius: BorderRadius.zero, borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.04),
blurRadius: 10,
offset: const Offset(0, 4),
),
],
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -124,7 +131,7 @@ class _SubscriptionCard extends StatelessWidget {
color: active color: active
? const Color(0xFF1B5E20).withValues(alpha: 0.10) ? const Color(0xFF1B5E20).withValues(alpha: 0.10)
: const Color(0xFFB02500).withValues(alpha: 0.08), : const Color(0xFFB02500).withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(4), borderRadius: BorderRadius.circular(20), // Pill status badge
), ),
child: Text( child: Text(
active ? 'ACTIVE' : 'EXPIRED', active ? 'ACTIVE' : 'EXPIRED',
@ -146,6 +153,7 @@ class _SubscriptionCard extends StatelessWidget {
style: Theme.of(context).textTheme.titleMedium?.copyWith( style: Theme.of(context).textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: AppTheme.onSurface, color: AppTheme.onSurface,
fontFamily: 'serif',
), ),
), ),
const SizedBox(height: 12), const SizedBox(height: 12),