feat: merchant page
This commit is contained in:
efrilm
@@ -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,
|
||||
});
|
||||
}
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user