305 lines
11 KiB
Dart
305 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:furibase/components/bottom_navbar.dart';
|
|
import 'package:furibase/components/buildcard_info.dart';
|
|
import 'package:furibase/components/collection_container.dart';
|
|
import 'package:furibase/components/main_menu.dart';
|
|
import 'package:furibase/components/scan_button.dart';
|
|
import 'package:furibase/components/topbar_container.dart';
|
|
import 'package:furibase/helpers/color_helper.dart';
|
|
import 'package:furibase/screen/pustaka/list_education.dart';
|
|
|
|
class PustakaScreen extends StatefulWidget {
|
|
const PustakaScreen({super.key});
|
|
|
|
@override
|
|
State<PustakaScreen> createState() => _PustakaScreenState();
|
|
}
|
|
|
|
class _PustakaScreenState extends State<PustakaScreen> {
|
|
final PageController _pageController = PageController();
|
|
int _selectedIndex = 0;
|
|
final TextEditingController _searchController = TextEditingController();
|
|
String _searchQuery = "";
|
|
|
|
final List<Map<String, dynamic>> _collections = [
|
|
{
|
|
"label": "Kesehatan",
|
|
"image": "assets/icons/healthy.svg",
|
|
"color": "#cdd0ee",
|
|
},
|
|
{
|
|
"label": "Gizi",
|
|
"image": "assets/icons/Nutrition.svg",
|
|
"color": "#e8e29a",
|
|
},
|
|
{
|
|
"label": "Pendidikan",
|
|
"image": "assets/icons/Education.svg",
|
|
"color": "#efd8c6",
|
|
},
|
|
{
|
|
"label": "Keselamatan",
|
|
"image": "assets/icons/Safety.svg",
|
|
"color": "#cef1da",
|
|
},
|
|
];
|
|
|
|
void _onMenuTapped(int index) {
|
|
setState(() {
|
|
_selectedIndex = index;
|
|
});
|
|
_pageController.animateToPage(
|
|
index,
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeInOut,
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
List<Map<String, dynamic>> filteredCollections =
|
|
_collections
|
|
.where(
|
|
(item) => item["label"]!.toLowerCase().contains(
|
|
_searchQuery.toLowerCase(),
|
|
),
|
|
)
|
|
.toList();
|
|
|
|
return Scaffold(
|
|
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
|
|
body: Stack(
|
|
children: [
|
|
//Top Bar
|
|
Positioned(
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: SizedBox(height: 130, child: TopbarContainer()),
|
|
),
|
|
Column(
|
|
children: [
|
|
// Header Section
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
color: const Color.fromARGB(
|
|
250,
|
|
255,
|
|
255,
|
|
255,
|
|
).withOpacity(0.0),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
BuildcardInfo(
|
|
icon: Icons.person,
|
|
text: 'User01',
|
|
extraIcon: Icons.emoji_events,
|
|
extraText: "5000",
|
|
width: 180,
|
|
),
|
|
BuildcardInfo(
|
|
icon: Icons.monetization_on,
|
|
text: "1.300",
|
|
width: 90,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// // Date Display
|
|
// Padding(
|
|
// padding: const EdgeInsets.symmetric(vertical: 10),
|
|
// child: Text(
|
|
// DateTime.now().toString(),
|
|
// style: const TextStyle(color: Colors.white),
|
|
// ),
|
|
// ),
|
|
|
|
// Search Bar
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 40,
|
|
vertical: 10,
|
|
),
|
|
child: Container(
|
|
height: 47,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
color: const Color.fromARGB(255, 237, 227, 227),
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 15),
|
|
child: Row(
|
|
children: [
|
|
const Icon(Icons.search, color: Colors.black54, size: 18),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: TextField(
|
|
controller: _searchController,
|
|
onChanged: (value) {
|
|
setState(() {
|
|
_searchQuery = value;
|
|
});
|
|
},
|
|
style: const TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 12,
|
|
),
|
|
decoration: const InputDecoration(
|
|
border: InputBorder.none,
|
|
hintText: 'Search...',
|
|
hintStyle: TextStyle(color: Colors.grey),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Collection Items
|
|
Container(
|
|
height: 440,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 58,
|
|
vertical: 60,
|
|
),
|
|
child: GridView.builder(
|
|
gridDelegate:
|
|
const SliverGridDelegateWithMaxCrossAxisExtent(
|
|
maxCrossAxisExtent: 140,
|
|
mainAxisSpacing: 20,
|
|
crossAxisSpacing: 20,
|
|
childAspectRatio: 1, // 1:1 rasio (kotak)
|
|
),
|
|
itemCount: filteredCollections.length,
|
|
itemBuilder: (context, index) {
|
|
final item = filteredCollections[index];
|
|
return CollectionContainer(
|
|
label: item["label"]!,
|
|
imageSvg: item["image"]!,
|
|
width: 30,
|
|
height: 80,
|
|
textColor: Colors.black,
|
|
circle: true,
|
|
colorContiner: ColorHelper.hexToColor(item["color"]),
|
|
onTapAc: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (_) => const ListEducation(),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
// SizedBox(
|
|
// child: Padding(
|
|
// padding: const EdgeInsets.symmetric(
|
|
// horizontal: 5,
|
|
// vertical: 1,
|
|
// ),
|
|
// child: Column(
|
|
// crossAxisAlignment: CrossAxisAlignment.start,
|
|
// children: [
|
|
// Text("List Topic", style: TextStyle(color: Colors.black)),
|
|
// Divider(color: Colors.transparent),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// Horizontal Scroll List
|
|
Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
|
|
child: SizedBox(
|
|
width: MediaQuery.of(context).size.width,
|
|
height: 100,
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: List.generate(
|
|
10,
|
|
(index) => Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
|
child: Card(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(10.0),
|
|
),
|
|
elevation: 5,
|
|
color: ColorHelper.hexToColor("#efd8c6"),
|
|
// color: const Color.fromARGB(140, 255, 255, 255),
|
|
// shape: RoundedRectangleBorder(
|
|
// borderRadius: BorderRadius.circular(15),
|
|
// ),
|
|
child: GestureDetector(
|
|
onTap:
|
|
() => {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => ListEducation(),
|
|
),
|
|
),
|
|
},
|
|
child: Container(
|
|
width: 80,
|
|
padding: const EdgeInsets.all(10),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.book,
|
|
size: 50,
|
|
color: Colors.blueAccent,
|
|
),
|
|
Text(
|
|
'Topic ' + (index + 1).toString(),
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
color: Color.fromARGB(255, 0, 0, 0),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// Bottom Navigation
|
|
// MainMenu(),
|
|
],
|
|
),
|
|
// BG MEnu
|
|
Stack(
|
|
children: [
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: SizedBox(height: 85, child: BottomNavbar()),
|
|
),
|
|
Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
|
|
],
|
|
),
|
|
Positioned(
|
|
bottom: 5,
|
|
left: MediaQuery.of(context).size.width / 2 - 43,
|
|
child: Transform.translate(
|
|
offset: Offset(0, -20),
|
|
child: ScanButton(),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|