255 lines
8.0 KiB
Dart
255 lines
8.0 KiB
Dart
import 'package:classifragise/pages/camera_page.dart';
|
|
import 'package:classifragise/pages/pilih_gambar_page.dart';
|
|
import 'package:classifragise/pages/strawberry_info_page.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
|
|
class HomePage extends StatelessWidget {
|
|
const HomePage({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
// Bagian Header dengan Background Merah
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xFF891A2D),
|
|
borderRadius: BorderRadius.only(
|
|
bottomLeft: Radius.circular(30),
|
|
bottomRight: Radius.circular(30),
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Baris pertama: Judul & Ikon Info
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"ClassiFragis",
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
IconButton(
|
|
icon:
|
|
const Icon(Icons.info_outline, color: Colors.white),
|
|
onPressed: () {
|
|
// Navigasi ke halaman informasi stroberi
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) =>
|
|
const StrawberryInfoPage()),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
|
|
// Gambar Header
|
|
Center(
|
|
child: Image.asset(
|
|
"assets/home4.png", // Ganti dengan gambar ilustrasi utama
|
|
width: 320,
|
|
height: 250,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// Judul
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
child: Text(
|
|
"Identifikasi Kesegaran Buah Stroberi",
|
|
textAlign: TextAlign.center,
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 5),
|
|
|
|
// Deskripsi
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
child: RichText(
|
|
textAlign: TextAlign.justify,
|
|
text: TextSpan(
|
|
style:
|
|
GoogleFonts.poppins(fontSize: 14, color: Colors.black54),
|
|
children: [
|
|
const TextSpan(
|
|
text:
|
|
"Gunakan kedua fitur ini secara optimal untuk membantu menyelesaikan masalah Anda dalam memilih "),
|
|
TextSpan(
|
|
text: "Stroberi",
|
|
style: GoogleFonts.poppins(
|
|
fontWeight: FontWeight.bold,
|
|
color: Color(0xFF891A2D)),
|
|
),
|
|
const TextSpan(text: "."),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// Tombol Pilih Gambar
|
|
OptionCard(
|
|
title: "Pilih Gambar",
|
|
description: "Buka galeri untuk memilih gambar stroberi.",
|
|
icon: Icons.image_outlined,
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => const SelectImagePage()),
|
|
); // Aksi pilih gambar
|
|
},
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
// Garis Pemisah dengan Tulisan "atau"
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 50),
|
|
child: Row(
|
|
children: [
|
|
const Expanded(child: Divider(color: Colors.black26)),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 10),
|
|
child: Text("atau",
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 14,
|
|
color: Colors.black45,
|
|
)),
|
|
),
|
|
const Expanded(child: Divider(color: Colors.black26)),
|
|
],
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
// Tombol Ambil Gambar
|
|
OptionCard(
|
|
title: "Ambil Gambar",
|
|
description: "Buka kamera untuk mengambil gambar stroberi.",
|
|
icon: Icons.camera_alt_outlined,
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(builder: (context) => const CameraPage()),
|
|
);
|
|
},
|
|
),
|
|
|
|
const SizedBox(height: 30),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class OptionCard extends StatelessWidget {
|
|
final String title;
|
|
final String description;
|
|
final IconData icon;
|
|
final VoidCallback onTap;
|
|
|
|
const OptionCard({
|
|
required this.title,
|
|
required this.description,
|
|
required this.icon,
|
|
required this.onTap,
|
|
super.key,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 20),
|
|
padding: const EdgeInsets.all(15),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF891A2D),
|
|
borderRadius: BorderRadius.circular(15),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black12.withOpacity(0.2),
|
|
blurRadius: 5,
|
|
spreadRadius: 1,
|
|
offset: const Offset(0, 3),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// Ikon
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
icon,
|
|
size: 30,
|
|
color: const Color(0xFF891A2D),
|
|
),
|
|
),
|
|
const SizedBox(width: 15),
|
|
|
|
// Teks Deskripsi
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
const SizedBox(height: 5),
|
|
Text(
|
|
description,
|
|
style: GoogleFonts.poppins(
|
|
fontSize: 12,
|
|
color: Colors.white70,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|