173 lines
6.5 KiB
Dart
173 lines
6.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class KantinPage extends StatelessWidget {
|
|
const KantinPage({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
body: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
// Banner
|
|
Stack(
|
|
children: [
|
|
Container(
|
|
width: double.infinity,
|
|
height: 160,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFFB3E5FC),
|
|
image: DecorationImage(
|
|
image: AssetImage('assets/images/kantin.png'),
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
const Positioned(
|
|
left: 20,
|
|
top: 32,
|
|
child: SizedBox(
|
|
width: 200,
|
|
child: Text(
|
|
'',
|
|
style: TextStyle(
|
|
fontSize: 22,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
height: 1.2,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// Tombol X di pojok kiri atas
|
|
Positioned(
|
|
top: 12,
|
|
left: 12,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
Navigator.pop(context);
|
|
},
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
shape: BoxShape.circle,
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.08),
|
|
blurRadius: 4,
|
|
),
|
|
],
|
|
),
|
|
padding: const EdgeInsets.all(6),
|
|
child: const Icon(Icons.close, size: 20, color: Colors.grey),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
// Search Bar
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
decoration: InputDecoration(
|
|
hintText: 'Mau makan apa hari ini?',
|
|
prefixIcon: const Icon(Icons.search, color: Colors.blue),
|
|
contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 12),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(24),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
filled: true,
|
|
fillColor: Colors.grey[100],
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.blue[50],
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
padding: const EdgeInsets.all(8),
|
|
child: const Icon(Icons.shopping_cart_outlined, color: Colors.blue),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// List Kantin
|
|
Expanded(
|
|
child: ListView.builder(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
|
itemCount: 5,
|
|
itemBuilder: (context, index) {
|
|
return Container(
|
|
margin: const EdgeInsets.only(bottom: 12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.grey.withOpacity(0.08),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: ListTile(
|
|
contentPadding: const EdgeInsets.all(12),
|
|
leading: ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: Image.asset(
|
|
index == 0
|
|
? 'assets/images/banner.jpg'
|
|
: 'assets/images/nasi_ayam.jpg',
|
|
width: 48,
|
|
height: 48,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
title: Text(
|
|
index == 0 ? 'Aneka Jus' : 'Warung Bu Djoko',
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 15,
|
|
),
|
|
),
|
|
subtitle: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
index == 0 ? 'Minuman' : 'Aneka Nasi, Ayam, Lauk-pauk',
|
|
style: const TextStyle(fontSize: 12, color: Colors.grey),
|
|
),
|
|
Text(
|
|
index == 0 ? 'Kantin DWP' : 'Kantin $index',
|
|
style: const TextStyle(fontSize: 12, color: Colors.grey),
|
|
),
|
|
],
|
|
),
|
|
trailing: const Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.star, color: Colors.amber, size: 18),
|
|
SizedBox(width: 2),
|
|
Text('4.9', style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold)),
|
|
SizedBox(width: 2),
|
|
Text('(500+)', style: TextStyle(fontSize: 11, color: Colors.grey)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |