388 lines
12 KiB
Dart
388 lines
12 KiB
Dart
import 'dart:convert';
|
|
import 'dart:io';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:freekake/components/card_list.dart';
|
|
import 'package:freekake/components/collection_container%20copy.dart';
|
|
import 'package:freekake/helpers/color_helper.dart';
|
|
import 'package:list_detail_extension/list_detail_extension.dart';
|
|
import 'package:webview_flutter/webview_flutter.dart';
|
|
import 'package:flutter/foundation.dart' show kIsWeb;
|
|
|
|
class ListEducation extends StatefulWidget {
|
|
const ListEducation({super.key});
|
|
|
|
@override
|
|
State<ListEducation> createState() => _ListEducationState();
|
|
}
|
|
|
|
class _ListEducationState extends State<ListEducation> {
|
|
TextEditingController searchController = TextEditingController();
|
|
late final WebViewController _controller;
|
|
late String urlOrAssetPath;
|
|
bool _shouldShowWebView = false;
|
|
|
|
// load extension
|
|
final listDetailExtension = ListDetailExtension();
|
|
|
|
Future<void> _initExtension() async {
|
|
await listDetailExtension.load();
|
|
}
|
|
|
|
List<String> allItems = [
|
|
"Matematika",
|
|
"Fisika",
|
|
"Kimia",
|
|
"Biologi",
|
|
"Sejarah",
|
|
"Geografi",
|
|
];
|
|
|
|
final List<Map<String, dynamic>> _listContent = [
|
|
{
|
|
"title": "Taburan Lezat untuk Nasi!",
|
|
"image": "assets/html/furikake/furikake.jpg",
|
|
"color": "#cdd0ee",
|
|
"category": "Kesehatan",
|
|
"type": "Materi",
|
|
"point": "10",
|
|
"coint": "100",
|
|
"body":
|
|
"""Tahukah kamu bahwa di Jepang ada bumbu tabur yang bisa membuat nasi
|
|
menjadi lebih enak?
|
|
""",
|
|
"file": "assets/html/furikake/index.html",
|
|
},
|
|
{
|
|
"title": "Makan Sehat dengan Gizi Seimbang",
|
|
"image": "assets/html/lemak.png",
|
|
"color": "#cef1da",
|
|
"category": "Keselamatan",
|
|
"type": "Materi",
|
|
"point": "100",
|
|
"coint": "20",
|
|
"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
|
|
""",
|
|
"file": "assets/html/index.html",
|
|
},
|
|
];
|
|
List<Map<String, dynamic>> filteredItems = [];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
filteredItems = List.from(_listContent);
|
|
if (!kIsWeb && (Platform.isAndroid || Platform.isIOS)) {
|
|
_shouldShowWebView = true;
|
|
_controller =
|
|
WebViewController()..setJavaScriptMode(JavaScriptMode.unrestricted);
|
|
urlOrAssetPath = "assets/makanan_bergizi/index.html";
|
|
_loadContent(urlOrAssetPath);
|
|
_initExtension();
|
|
}
|
|
}
|
|
|
|
void _loadContent(String path) async {
|
|
if (_shouldShowWebView) {
|
|
if (path.startsWith('http')) {
|
|
// Load dari Internet
|
|
_controller.loadRequest(Uri.parse(path));
|
|
} else {
|
|
// Load dari assets lokal
|
|
// String fileHtml = await rootBundle.loadString(path);
|
|
String fileHtml = await DefaultAssetBundle.of(
|
|
context,
|
|
).loadString('assets/html/index.html');
|
|
_controller.loadHtmlString(fileHtml);
|
|
}
|
|
}
|
|
}
|
|
|
|
void filterSearch(String query) {
|
|
setState(() {
|
|
if (query.isEmpty) {
|
|
filteredItems = List.from(_listContent);
|
|
} else {
|
|
filteredItems =
|
|
_listContent.where((item) {
|
|
return item["title"].toLowerCase().contains(query.toLowerCase());
|
|
}).toList();
|
|
}
|
|
});
|
|
}
|
|
|
|
void filterByCategory(String category) {
|
|
setState(() {
|
|
filteredItems =
|
|
_listContent.where((item) {
|
|
return item["category"].toLowerCase() == category.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>> filteredCollections =
|
|
collections
|
|
.where(
|
|
(item) => item["label"].toLowerCase().contains(
|
|
searchQuery.toLowerCase(),
|
|
),
|
|
)
|
|
.toList();
|
|
if (_shouldShowWebView) {
|
|
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
|
|
headerContainer(context, filteredCollections),
|
|
// Collection Items dengan Filter
|
|
SizedBox(height: 20),
|
|
Expanded(child: contentContainer(context)),
|
|
],
|
|
),
|
|
);
|
|
} else {
|
|
return const Center(
|
|
child: Padding(
|
|
padding: EdgeInsets.all(40),
|
|
child: Text("WebView tidak tersedia untuk platform ini."),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
Container headerContainer(
|
|
BuildContext context,
|
|
List<Map<String, dynamic>> filteredCollections,
|
|
) {
|
|
return 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(),
|
|
filterByCategory(item["category"]),
|
|
},
|
|
);
|
|
}).toList(),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Container contentContainer(BuildContext context) {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: const Color.fromARGB(223, 200, 200, 206),
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(25),
|
|
topRight: Radius.circular(25),
|
|
),
|
|
),
|
|
child: _listCard(context),
|
|
);
|
|
}
|
|
|
|
Column _listCard(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
SizedBox(height: 5),
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: MediaQuery.of(context).size.width / 4,
|
|
),
|
|
child: Divider(
|
|
color: const Color.fromARGB(255, 255, 255, 255),
|
|
thickness: 2,
|
|
),
|
|
),
|
|
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: 10.0, left: 10, right: 10),
|
|
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: _generateList(),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
GridView _generateList() {
|
|
return 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"] ?? "",
|
|
gambar: _listContent[index]['image'],
|
|
point: _listContent[index]['coint'],
|
|
coint: _listContent[index]['point'],
|
|
tipe: _listContent[index]['tipe'],
|
|
),
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder:
|
|
(context) => listDetailExtension.buildPage({
|
|
'title': filteredItems[index]['category'],
|
|
'imagePath': filteredItems[index]['image'],
|
|
'filepath': filteredItems[index]['file'],
|
|
'paragraphs':
|
|
"""
|
|
"""
|
|
"<h1> ${_listContent[index]["title"]} </h1> <p> ${_listContent[index]["body"]}",
|
|
}),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|