356 lines
14 KiB
Dart
356 lines
14 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",
|
|
},
|
|
];
|
|
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: filteredItems.length,
|
|
itemBuilder: (context, index) {
|
|
return GestureDetector(
|
|
child: CardList(),
|
|
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>
|
|
""",
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Bottom Navigation
|
|
// MainMenu(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|