519 lines
26 KiB
Dart
519 lines
26 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:furibase/components/buildcard_info.dart';
|
|
import 'package:furibase/components/card_list.dart';
|
|
import 'package:furibase/components/collection_container%20copy.dart';
|
|
import 'package:furibase/components/main_menu.dart';
|
|
import 'package:furibase/components/topbar_container.dart';
|
|
import 'package:furibase/helpers/color_helper.dart';
|
|
import 'package:furibase/screen/pustaka/pustaka_detail_screen.dart';
|
|
|
|
class ListEducation extends StatefulWidget {
|
|
const ListEducation({super.key});
|
|
|
|
@override
|
|
State<ListEducation> createState() => _ListEducationState();
|
|
}
|
|
|
|
class _ListEducationState extends State<ListEducation> {
|
|
TextEditingController searchController = TextEditingController();
|
|
List<String> allItems = [
|
|
"Matematika",
|
|
"Fisika",
|
|
"Kimia",
|
|
"Biologi",
|
|
"Sejarah",
|
|
"Geografi",
|
|
];
|
|
List<String> filteredItems = [];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
filteredItems = List.from(allItems);
|
|
}
|
|
|
|
void filterSearch(String query) {
|
|
setState(() {
|
|
filteredItems =
|
|
allItems
|
|
.where((item) => item.toLowerCase().contains(query.toLowerCase()))
|
|
.toList();
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
String _searchQuery = "";
|
|
final List<Map<String, dynamic>> _collections = [
|
|
{
|
|
"label": "Kesehatan",
|
|
"image": "assets/icons/healthy.svg",
|
|
"color": "#cdd0ee",
|
|
"category": "kesehatan",
|
|
},
|
|
{
|
|
"label": "Gizi",
|
|
"image": "assets/icons/Nutrition.svg",
|
|
"color": "#e8e29a",
|
|
"category": "gizi",
|
|
},
|
|
{
|
|
"label": "Pendidikan",
|
|
"image": "assets/icons/Education.svg",
|
|
"color": "#efd8c6",
|
|
"category": "pendidikan",
|
|
},
|
|
{
|
|
"label": "Keselamatan",
|
|
"image": "assets/icons/Safety.svg",
|
|
"color": "#cef1da",
|
|
"category": "keselamatan",
|
|
},
|
|
];
|
|
|
|
final List<Map<String, dynamic>> _listContent = [
|
|
{
|
|
"title": "Taburan Lezat untuk Nasi!",
|
|
"image": "assets/icons/healthy.svg",
|
|
"color": "#cdd0ee",
|
|
"category": "kesehatan",
|
|
"body":
|
|
"""Tahukah kamu bahwa di Jepang ada bumbu tabur yang bisa membuat nasi
|
|
menjadi lebih enak? Namanya Furikake! Kata "furikake" berasal dari bahasa Jepang, yaitu "furi"
|
|
yang berarti menaburkan dan "kake" yang berarti menuangkan. Jadi,
|
|
furikake adalah bumbu yang ditaburkan di atas nasi supaya lebih lezat!
|
|
""",
|
|
},
|
|
{
|
|
"title": "Makan Sehat dengan Gizi Seimbang",
|
|
"image": "assets/icons/Safety.svg",
|
|
"color": "#cef1da",
|
|
"category": "keselamatan",
|
|
"body":
|
|
"""upaya makan kita sehat, ada aturan "Isi Piringku" yang bisa kita ikuti:
|
|
🍽️ Separuh piring: Sayur dan buah 🍽️ Seperempat piring: Karbohidrat (seperti nasi atau roti)
|
|
🍽️ Seperempat piring: Protein (seperti ayam atau tempe) 🍽️ Sedikit lemak sehat
|
|
""",
|
|
},
|
|
];
|
|
List<Map<String, dynamic>> filteredCollections =
|
|
_collections
|
|
.where(
|
|
(item) => item["label"].toLowerCase().contains(
|
|
_searchQuery.toLowerCase(),
|
|
),
|
|
)
|
|
.toList();
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
backgroundColor: Color.fromARGB(225, 79, 76, 182),
|
|
leading: IconButton(
|
|
icon: Icon(Icons.arrow_back),
|
|
onPressed: () => Navigator.of(context).pop(false),
|
|
),
|
|
actions: <Widget>[],
|
|
),
|
|
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
|
|
body: Column(
|
|
children: [
|
|
// Header Section
|
|
Container(
|
|
width: MediaQuery.of(context).size.width,
|
|
height: 150,
|
|
decoration: BoxDecoration(
|
|
color: const Color.fromARGB(225, 79, 76, 182),
|
|
borderRadius: BorderRadius.only(
|
|
bottomLeft: Radius.circular(25),
|
|
bottomRight: Radius.circular(25),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 6,
|
|
),
|
|
child: Container(
|
|
height: 47,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
color: Colors.grey.shade200,
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 10),
|
|
child: Row(
|
|
children: [
|
|
const Icon(
|
|
Icons.search,
|
|
color: Color.fromARGB(137, 180, 172, 172),
|
|
size: 18,
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: TextField(
|
|
controller: searchController,
|
|
onChanged:
|
|
filterSearch, // Memanggil filter saat mengetik
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 14,
|
|
),
|
|
decoration: const InputDecoration(
|
|
border: InputBorder.none,
|
|
hintText: 'Cari pelajaran...',
|
|
hintStyle: TextStyle(color: Colors.black54),
|
|
),
|
|
),
|
|
),
|
|
if (searchController.text.isNotEmpty)
|
|
IconButton(
|
|
icon: const Icon(
|
|
Icons.close,
|
|
color: Colors.black54,
|
|
),
|
|
onPressed: () {
|
|
searchController.clear();
|
|
filterSearch('');
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children:
|
|
filteredCollections.map((item) {
|
|
return CollectionContainer(
|
|
label: item["label"]!,
|
|
imageSvg: item["image"]!,
|
|
iconw: 20,
|
|
iconh: 20,
|
|
width: 70,
|
|
height: 70,
|
|
textColor: Colors.black,
|
|
lblSize: 10,
|
|
colorContiner: ColorHelper.hexToColor(item["color"]),
|
|
onTapAc:
|
|
() => {
|
|
searchController.clear(),
|
|
filterSearch(item["category"]),
|
|
},
|
|
);
|
|
}).toList(),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Search Bar
|
|
// Padding(
|
|
// padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
|
// child: Container(
|
|
// height: 47,
|
|
// decoration: BoxDecoration(
|
|
// borderRadius: BorderRadius.circular(20),
|
|
// color: Colors.grey.shade200,
|
|
// ),
|
|
// padding: const EdgeInsets.symmetric(horizontal: 10),
|
|
// child: Row(
|
|
// children: [
|
|
// const Icon(
|
|
// Icons.search,
|
|
// color: Color.fromARGB(137, 180, 172, 172),
|
|
// size: 18,
|
|
// ),
|
|
// const SizedBox(width: 8),
|
|
// Expanded(
|
|
// child: TextField(
|
|
// controller: searchController,
|
|
// onChanged: filterSearch, // Memanggil filter saat mengetik
|
|
// style: const TextStyle(color: Colors.black, fontSize: 14),
|
|
// decoration: const InputDecoration(
|
|
// border: InputBorder.none,
|
|
// hintText: 'Cari pelajaran...',
|
|
// hintStyle: TextStyle(color: Colors.black54),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// if (searchController.text.isNotEmpty)
|
|
// IconButton(
|
|
// icon: const Icon(Icons.close, color: Colors.black54),
|
|
// onPressed: () {
|
|
// searchController.clear();
|
|
// filterSearch('');
|
|
// },
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ),
|
|
|
|
// Collection Items dengan Filter
|
|
SizedBox(height: 20),
|
|
Expanded(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: const Color.fromARGB(224, 145, 145, 155),
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(25),
|
|
topRight: Radius.circular(25),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
SizedBox(height: 5),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: MediaQuery.of(context).size.width / 4,
|
|
),
|
|
child: Divider(
|
|
color: const Color.fromARGB(255, 155, 147, 147),
|
|
height: 20,
|
|
),
|
|
),
|
|
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
// vertical: 10,
|
|
),
|
|
child:
|
|
filteredItems.isEmpty
|
|
? const Center(
|
|
child: Text(
|
|
"Tidak ada hasil",
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: Colors.black54,
|
|
),
|
|
),
|
|
)
|
|
: Padding(
|
|
padding: EdgeInsets.only(
|
|
top: 20.0,
|
|
left: 20,
|
|
right: 20,
|
|
),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(20),
|
|
topRight: Radius.circular(20),
|
|
),
|
|
color: const Color.fromARGB(
|
|
255,
|
|
222,
|
|
181,
|
|
133,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: EdgeInsets.only(
|
|
top: 12,
|
|
right: 20,
|
|
left: 20,
|
|
),
|
|
child: GridView.builder(
|
|
gridDelegate:
|
|
const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 1, // 2 Kolom
|
|
crossAxisSpacing: 10,
|
|
mainAxisSpacing: 10,
|
|
childAspectRatio: 2.5,
|
|
),
|
|
itemCount: _listContent.length,
|
|
itemBuilder: (context, index) {
|
|
return GestureDetector(
|
|
child: CardList(
|
|
title:
|
|
_listContent[index]["title"] ??
|
|
"",
|
|
body:
|
|
_listContent[index]["body"] ??
|
|
"",
|
|
),
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder:
|
|
(
|
|
context,
|
|
) => ListDetailScreen(
|
|
title:
|
|
filteredItems[index],
|
|
imagePath:
|
|
filteredItems[index],
|
|
/* paragraphs: [
|
|
"""
|
|
<h1>Enter the main heading, usually the same as the title.</h1>
|
|
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
|
|
<ul>
|
|
<li>The first item in your list</li>
|
|
<li>The second item; <i>italicize</i> key words</li>
|
|
</ul>
|
|
<p>Improve your image by including an image. </p>
|
|
<p><img src="https://via.placeholder.com/150" alt="A Great HTML Resource"></p>
|
|
<p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.</p>
|
|
<hr>
|
|
<p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
|
|
<p>© Wiley Publishing, 2011</p>
|
|
""",
|
|
], */
|
|
paragraphs: """
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Furikake: Taburan Lezat untuk Nasi!</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
max-width: 100%;
|
|
max-height:100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
h1 {
|
|
color: #d32f2f;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
margin: 10px 0 15px 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
h2 {
|
|
color: #f57c00;
|
|
font-size: 1.3rem;
|
|
margin: 20px 0 10px 0;
|
|
font-weight: 500;
|
|
padding-bottom: 3px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 15px;
|
|
font-size: 0.95rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.kanji {
|
|
font-size: 2.2rem;
|
|
text-align: center;
|
|
color: #333;
|
|
margin: 10px 0;
|
|
font-family: 'Noto Sans JP', sans-serif;
|
|
line-height: 1;
|
|
}
|
|
|
|
.main-image {
|
|
width: 100%;
|
|
margin: 15px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.main-image img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.main-image p {
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
color: #666;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.ingredients {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.ingredient {
|
|
text-align: center;
|
|
}
|
|
|
|
.ingredient img {
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.ingredient p {
|
|
font-size: 0.85rem;
|
|
margin-top: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: #f5f5f5;
|
|
padding: 12px;
|
|
margin: 15px 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 8px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Furikake: Taburan Lezat untuk Nasi!</h1>
|
|
|
|
<div class="kanji">振り掛け</div>
|
|
|
|
<p>Tahukah kamu bahwa di Jepang ada bumbu tabur yang
|
|
bisa membuat nasi menjadi lebih enak? Namanya Furikake! Kata "furikake" berasal dari bahasa Jepang,
|
|
yaitu "furi" yang berarti menaburkan dan "kake" yang berarti menuangkan.
|
|
Jadi, furikake adalah bumbu yang ditaburkan di atas nasi supaya lebih lezat!</p>
|
|
""",
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Bottom Navigation
|
|
// MainMenu(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|