aefril/enaklo-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: merchant page

Browse Source
This commit is contained in:
efrilm
2025-08-28 01:11:19 +07:00
parent 627de219cb
commit d86c38e77c
12 changed files with 618 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/main/pages/home/widgets/feature_section.dart
+3 -1
View File
@@ -1,4 +1,6 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../../router/app_router.gr.dart';
import 'feature_card.dart';
class HomeFeatureSection extends StatelessWidget {
@@ -27,7 +29,7 @@ class HomeFeatureSection extends StatelessWidget {
icon: Icons.store,
title: 'Merchant',
iconColor: const Color(0xFF388E3C),
onTap: () => print('Navigate to Merchant'),
onTap: () => context.router.push(MerchantRoute()),
),
],
),
lib/presentation/pages/main/pages/home/widgets/popular_merchant_section.dart
+19 -14
View File
@@ -1,6 +1,8 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../../../common/theme/theme.dart';
import '../../../../../router/app_router.gr.dart';
import 'popular_merchant_card.dart';
class HomePopularMerchantSection extends StatelessWidget {
@@ -19,22 +21,25 @@ class HomePopularMerchantSection extends StatelessWidget {
style: AppStyle.xl.copyWith(fontWeight: FontWeight.bold),
),
Spacer(),
Row(
children: [
Text(
'Lihat Semua',
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w500,
InkWell(
onTap: () => context.router.push(MerchantRoute()),
child: Row(
children: [
Text(
'Lihat Semua',
style: AppStyle.sm.copyWith(
fontWeight: FontWeight.w500,
color: AppColor.primary,
),
),
SizedBox(width: 4),
Icon(
Icons.arrow_forward_ios,
size: 12,
color: AppColor.primary,
),
),
SizedBox(width: 4),
Icon(
Icons.arrow_forward_ios,
size: 12,
color: AppColor.primary,
),
],
],
),
),
],
),
lib/presentation/pages/main/pages/order/order_page.dart
+3 -1
View File
@@ -1,3 +1,4 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../../common/theme/theme.dart';
@@ -46,8 +47,9 @@ class OrderItem {
enum OrderStatus { pending, processing, completed, cancelled }
@RoutePage()
class OrderPage extends StatefulWidget {
const OrderPage({Key? key}) : super(key: key);
const OrderPage({super.key});
@override
State<OrderPage> createState() => _OrderPageState();
lib/presentation/pages/main/pages/voucher/voucher_page.dart
+4 -43
View File
@@ -2,6 +2,7 @@ import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../../../common/theme/theme.dart';
import '../../../../components/field/field.dart';
import 'widgets/voucher_card.dart';
@RoutePage()
@@ -16,49 +17,9 @@ class VoucherPage extends StatelessWidget {
automaticallyImplyLeading: false,
bottom: PreferredSize(
preferredSize: Size.fromHeight(70),
child: Container(
margin: EdgeInsets.fromLTRB(16, 0, 16, 16),
decoration: BoxDecoration(
color: AppColor.white,
borderRadius: BorderRadius.circular(25),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: Offset(0, 2),
),
],
),
child: TextField(
cursorColor: AppColor.primary,
decoration: InputDecoration(
hintText: 'Punya kode promo? Masukkan disini',
hintStyle: TextStyle(color: AppColor.textLight, fontSize: 14),
disabledBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
focusedBorder: InputBorder.none,
prefixIcon: Container(
margin: EdgeInsets.all(12),
width: 24,
height: 24,
decoration: BoxDecoration(
color: AppColor.primary,
borderRadius: BorderRadius.circular(6),
),
child: Icon(
Icons.local_offer,
color: AppColor.white,
size: 14,
),
),
border: InputBorder.none,
contentPadding: EdgeInsets.symmetric(
horizontal: 16,
vertical: 16,
),
),
),
child: SearchTextField(
hintText: 'Punya kode promo? Masukkan disini',
prefixIcon: Icons.local_offer,
),
),
),
lib/presentation/pages/merchant/merchant_page.dart
+193
View File
@@ -0,0 +1,193 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import '../../../common/theme/theme.dart';
import '../../components/field/field.dart';
import 'widgets/empty_merchant_card.dart';
import 'widgets/merchant_card.dart';
@RoutePage()
class MerchantPage extends StatefulWidget {
const MerchantPage({super.key});
@override
State<MerchantPage> createState() => _MerchantPageState();
}
class _MerchantPageState extends State<MerchantPage> {
final TextEditingController _searchController = TextEditingController();
final List<MerchantModel> _allMerchants = _generateMockMerchants();
List<MerchantModel> _filteredMerchants = [];
@override
void initState() {
super.initState();
_filteredMerchants = _allMerchants;
}
@override
void dispose() {
_searchController.dispose();
super.dispose();
}
void _filterMerchants(String query) {
setState(() {
if (query.isEmpty) {
_filteredMerchants = _allMerchants;
} else {
_filteredMerchants = _allMerchants
.where(
(merchant) =>
merchant.name.toLowerCase().contains(query.toLowerCase()) ||
merchant.category.toLowerCase().contains(query.toLowerCase()),
)
.toList();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
appBar: AppBar(
title: Text('Merchants'),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(70),
child: SearchTextField(
hintText: 'Search merchants...',
prefixIcon: Icons.search,
controller: _searchController,
onClear: () {
_searchController.clear();
_filterMerchants('');
},
),
),
),
body: _filteredMerchants.isEmpty
? _buildEmptyState()
: Padding(
padding: const EdgeInsets.all(16),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
childAspectRatio: 0.85,
),
itemCount: _filteredMerchants.length,
itemBuilder: (context, index) {
return _buildMerchantCard(_filteredMerchants[index]);
},
),
),
);
}
Widget _buildMerchantCard(MerchantModel merchant) {
return MerchantCard(
merchant: merchant,
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Selected ${merchant.name}'),
backgroundColor: AppColor.primary,
),
);
},
);
}
Widget _buildEmptyState() {
return const EmptyMerchantCard();
}
static List<MerchantModel> _generateMockMerchants() {
return [
MerchantModel(
id: '1',
name: 'Warung Makan Sederhana',
category: 'Food & Beverage',
rating: 4.5,
isOpen: true,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '2',
name: 'Toko Elektronik',
category: 'Electronics',
rating: 4.2,
isOpen: true,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '3',
name: 'Apotek Sehat',
category: 'Healthcare',
rating: 4.8,
isOpen: false,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '4',
name: 'Fashion Store',
category: 'Clothing',
rating: 4.1,
isOpen: true,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '5',
name: 'Bengkel Motor',
category: 'Automotive',
rating: 4.3,
isOpen: true,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '6',
name: 'Minimarket 24',
category: 'Retail',
rating: 4.0,
isOpen: true,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '7',
name: 'Salon Kecantikan',
category: 'Beauty',
rating: 4.6,
isOpen: false,
imageUrl: 'https://via.placeholder.com/150',
),
MerchantModel(
id: '8',
name: 'Laundry Express',
category: 'Service',
rating: 4.4,
isOpen: true,
imageUrl: 'https://via.placeholder.com/150',
),
];
}
}
class MerchantModel {
final String id;
final String name;
final String category;
final double rating;
final bool isOpen;
final String imageUrl;
MerchantModel({
required this.id,
required this.name,
required this.category,
required this.rating,
required this.isOpen,
required this.imageUrl,
});
}
lib/presentation/pages/merchant/widgets/empty_merchant_card.dart
+80
View File
@@ -0,0 +1,80 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class EmptyMerchantCard extends StatelessWidget {
final String? title;
final String? subtitle;
final IconData? icon;
const EmptyMerchantCard({super.key, this.title, this.subtitle, this.icon});
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: AppColor.primaryWithOpacity(0.1),
shape: BoxShape.circle,
),
child: Icon(
icon ?? Icons.search_off,
size: 64,
color: AppColor.primary,
),
),
const SizedBox(height: 24),
Text(
title ?? 'No merchants found',
style: AppStyle.xl.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Text(
subtitle ??
'Try adjusting your search terms or check back later for new merchants',
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
textAlign: TextAlign.center,
),
),
const SizedBox(height: 24),
Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
color: AppColor.primaryWithOpacity(0.1),
borderRadius: BorderRadius.circular(24),
border: Border.all(
color: AppColor.primary.withOpacity(0.2),
width: 1,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.refresh, size: 18, color: AppColor.primary),
const SizedBox(width: 8),
Text(
'Refresh',
style: AppStyle.sm.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w500,
),
),
],
),
),
],
),
);
}
}
lib/presentation/pages/merchant/widgets/merchant_card.dart
+175
View File
@@ -0,0 +1,175 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/image/image.dart';
import '../merchant_page.dart';
class MerchantCard extends StatelessWidget {
final MerchantModel merchant;
final VoidCallback? onTap;
const MerchantCard({super.key, required this.merchant, this.onTap});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColor.borderLight, width: 0.5),
boxShadow: [
BoxShadow(
color: AppColor.textSecondary.withOpacity(0.08),
blurRadius: 6,
offset: const Offset(0, 1),
),
],
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Column(
children: [
// Merchant Image/Icon - Made more compact
Container(
width: double.infinity,
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
child: Image.network(
merchant.imageUrl,
width: double.infinity,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: AppColor.primary,
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
),
);
},
errorBuilder: (context, error, stackTrace) {
return ImagePlaceholder(
width: double.infinity,
height: 100,
showBorderRadius: false,
);
},
),
),
),
const SizedBox(height: 10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Merchant Name - Flexible to prevent overflow
Flexible(
child: Text(
merchant.name,
style: AppStyle.md.copyWith(
fontWeight: FontWeight.w600,
color: AppColor.textPrimary,
height: 1.2,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(height: 3),
// Category - More compact
Text(
merchant.category,
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
height: 1.2,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
// Rating and Status - Compact layout
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Rating
Flexible(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.star_rounded,
size: 14,
color: AppColor.warning,
),
const SizedBox(width: 3),
Text(
merchant.rating.toStringAsFixed(1),
style: AppStyle.xs.copyWith(
fontWeight: FontWeight.w500,
color: AppColor.textPrimary,
),
),
],
),
),
// Status Badge - More compact
Container(
padding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
decoration: BoxDecoration(
color: merchant.isOpen
? AppColor.successWithOpacity(0.12)
: AppColor.errorWithOpacity(0.12),
borderRadius: BorderRadius.circular(6),
),
child: Text(
merchant.isOpen ? 'Open' : 'Closed',
style: TextStyle(
fontSize: 10,
color: merchant.isOpen
? AppColor.success
: AppColor.error,
fontWeight: FontWeight.w600,
height: 1,
),
),
),
],
),
],
),
),
],
),
),
),
);
}
}