190 lines
6.1 KiB
Dart
190 lines
6.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class MakananPage extends StatelessWidget {
|
|
const MakananPage({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: 140,
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFFB3E5FC),
|
|
image: DecorationImage(
|
|
image: AssetImage('assets/images/makanan.png'),
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
const Positioned(
|
|
left: 20,
|
|
top: 24,
|
|
child: SizedBox(
|
|
width: 200,
|
|
child: Text(
|
|
'',
|
|
style: TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
height: 1.2,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// Tombol X di pojok kiri atas
|
|
Positioned(
|
|
top: 10,
|
|
left: 10,
|
|
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: 8),
|
|
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 Makanan
|
|
Expanded(
|
|
child: ListView(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12),
|
|
children: [
|
|
_buildFoodCard(
|
|
image: 'assets/images/nasi_ayam.jpg',
|
|
name: 'Nasi Goreng',
|
|
kantin: 'Kantin 4',
|
|
price: 'Rp 10.000',
|
|
rating: '4.9',
|
|
reviews: '71',
|
|
),
|
|
_buildFoodCard(
|
|
image: 'assets/images/nasi_ayam.jpg',
|
|
name: 'Mie Kuah',
|
|
kantin: 'Kantin 3',
|
|
price: 'Rp 5.000',
|
|
rating: '4.8',
|
|
reviews: '10',
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFoodCard({
|
|
required String image,
|
|
required String name,
|
|
required String kantin,
|
|
required String price,
|
|
required String rating,
|
|
required String reviews,
|
|
}) {
|
|
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(
|
|
image,
|
|
width: 48,
|
|
height: 48,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
title: Text(
|
|
name,
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 15,
|
|
),
|
|
),
|
|
subtitle: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(kantin, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
|
Text(price, style: const TextStyle(fontSize: 12, color: Colors.grey)),
|
|
],
|
|
),
|
|
trailing: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
const Icon(Icons.star, color: Colors.amber, size: 18),
|
|
const SizedBox(width: 2),
|
|
Text(rating, style: const TextStyle(fontSize: 13, fontWeight: FontWeight.bold)),
|
|
const SizedBox(width: 2),
|
|
Text('($reviews)', style: const TextStyle(fontSize: 11, color: Colors.grey)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |