base
This commit is contained in:
='fauz
@@ -0,0 +1,349 @@
|
||||
import 'package:dropdown_button2/dropdown_button2.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/bottom_navbar.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/main_menu.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:furibase/components/topbar_container.dart';
|
||||
|
||||
class HomeScreen extends StatefulWidget {
|
||||
HomeScreen({super.key});
|
||||
|
||||
@override
|
||||
State<HomeScreen> createState() => _HomeScreenState();
|
||||
}
|
||||
|
||||
class _HomeScreenState extends State<HomeScreen> {
|
||||
final String username = "User01";
|
||||
double _sliderValue = 0.0;
|
||||
static const Color transparent = Color(0xFFFFFFFF);
|
||||
// Image image
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Size size = MediaQuery.of(context).size;
|
||||
return Scaffold(
|
||||
// appBar: AppBar(
|
||||
// elevation: 0,
|
||||
// backgroundColor: Color(0x00000000),
|
||||
// title: Row(
|
||||
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
// children: [
|
||||
// Row(
|
||||
// children: [
|
||||
// Text(
|
||||
// username,
|
||||
// style: const TextStyle(
|
||||
// fontSize: 18,
|
||||
// fontWeight: FontWeight.bold,
|
||||
// ),
|
||||
// ),
|
||||
// SizedBox(width: 10),
|
||||
// IconButton(
|
||||
// icon: Icon(Icons.emoji_events, color: Color(0xFFE32087)),
|
||||
// onPressed: () {},
|
||||
// ),
|
||||
// Text(
|
||||
// "5000",
|
||||
// style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// Row(
|
||||
// children: [
|
||||
// IconButton(
|
||||
// icon: Icon(Icons.monetization_on, color: Color(0xFFE32087)),
|
||||
// onPressed: () {},
|
||||
// ),
|
||||
// Text(
|
||||
// "1.300",
|
||||
// style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
// ),
|
||||
// // IconButton(
|
||||
// // icon: Image.asset("images/icon.png", width: 24),
|
||||
// // onPressed: () {},
|
||||
// // ),
|
||||
// ],
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// ),
|
||||
body: Stack(
|
||||
children: <Widget>[
|
||||
Positioned.fill(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage("images/background.jpeg"),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
// Positioned(
|
||||
// top: 0,
|
||||
// left: 0,
|
||||
// right: 0,
|
||||
// child: SizedBox(height: 120, child: TopbarContainer()),
|
||||
// ),
|
||||
Positioned(
|
||||
right: 0,
|
||||
top: 100,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(right: 20),
|
||||
child: Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(1),
|
||||
color: Color.fromARGB(1, 209, 174, 174).withAlpha(0),
|
||||
),
|
||||
child: Center(
|
||||
child: DropdownButtonHideUnderline(
|
||||
child: DropdownButton2(
|
||||
customButton: Container(
|
||||
height: 50,
|
||||
width: 50,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
image: const DecorationImage(
|
||||
image: AssetImage('images/luffy-u.png'),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
openWithLongPress: false,
|
||||
items: [
|
||||
..._MenuItems.firstItems.map(
|
||||
(item) => DropdownMenuItem<_MenuItem>(
|
||||
value: item,
|
||||
child: _MenuItems.buildItem(item),
|
||||
),
|
||||
),
|
||||
// const DropdownMenuItem<Divider>(
|
||||
// enabled: false,
|
||||
// // height: 8,
|
||||
// child: Divider(),
|
||||
// ),
|
||||
// ..._MenuItems.secondItems.map(
|
||||
// (item) => DropdownMenuItem<_MenuItem>(
|
||||
// value: item,
|
||||
// // height: 48,
|
||||
// child: _MenuItems.buildItem(item),
|
||||
// ),
|
||||
// ),
|
||||
],
|
||||
onChanged: (value) {
|
||||
if (value != null) {
|
||||
_MenuItems.onChanged(context, value);
|
||||
} else {
|
||||
print("null");
|
||||
}
|
||||
},
|
||||
buttonStyleData: ButtonStyleData(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(40),
|
||||
),
|
||||
),
|
||||
dropdownStyleData: DropdownStyleData(
|
||||
width: 140,
|
||||
padding: EdgeInsets.zero,
|
||||
maxHeight: 150,
|
||||
// padding: const EdgeInsets.symmetric(vertical: 6),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
color: Color.fromRGBO(2, 104, 17, 1).withAlpha(50),
|
||||
),
|
||||
offset: const Offset(40, -4),
|
||||
),
|
||||
menuItemStyleData: MenuItemStyleData(
|
||||
height: 35,
|
||||
padding: EdgeInsets.symmetric(horizontal: 10),
|
||||
),
|
||||
// menuItemStyleData: const MenuItemStyleData(
|
||||
// padding: EdgeInsets.only(left: 16, right: 16),
|
||||
// ),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
BuildcardInfo(
|
||||
icon: Icons.person,
|
||||
text: username,
|
||||
extraIcon: Icons.emoji_events,
|
||||
extraText: "5000",
|
||||
width: 180,
|
||||
),
|
||||
BuildcardInfo(
|
||||
icon: Icons.monetization_on,
|
||||
text: "1.300",
|
||||
width: 90,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 150,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: Color.fromARGB(255, 247, 224, 236),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Color.fromARGB(255, 214, 213, 121),
|
||||
blurRadius: 5,
|
||||
spreadRadius: 2,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
"Halo....Jotaslim",
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFF000000),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 10),
|
||||
setHomeImage("images/luffy.png", 300),
|
||||
// Image.asset("images/luffy.png", width: 300),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 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: 1,
|
||||
left: MediaQuery.of(context).size.width / 2 - 48,
|
||||
child: Transform.translate(
|
||||
offset: Offset(0, -20),
|
||||
child: ScanButton(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Widget _menuButton(String label, Widget icon) {
|
||||
// return Expanded(
|
||||
// child: Column(
|
||||
// children: [
|
||||
// IconButton(
|
||||
// // icon: Icon(icon, color: Color.fromARGB(255, 179, 161, 170)),
|
||||
// icon: icon,
|
||||
// onPressed: () {},
|
||||
// ),
|
||||
// Text(
|
||||
// label,
|
||||
// style: TextStyle(
|
||||
// color: Color.fromARGB(255, 239, 224, 232),
|
||||
// fontWeight: FontWeight.bold,
|
||||
// ),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
|
||||
// Widget _scanButton() {
|
||||
// return Expanded(
|
||||
// child: Container(
|
||||
// decoration: BoxDecoration(shape: BoxShape.circle, color: transparent),
|
||||
// padding: EdgeInsets.all(10),
|
||||
// child: IconButton(
|
||||
// icon: SvgPicture.asset(
|
||||
// 'icons/Scan.svg',
|
||||
// width: 60,
|
||||
// height: 60,
|
||||
// colorFilter: ColorFilter.mode(Color(0xFFFFFFFF), BlendMode.srcIn),
|
||||
// ),
|
||||
// onPressed: () {},
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
|
||||
Widget setHomeImage(String src, double size) {
|
||||
return Image.asset(src, width: size);
|
||||
}
|
||||
}
|
||||
|
||||
class _MenuItem {
|
||||
const _MenuItem({required this.text, required this.icon});
|
||||
final String text;
|
||||
final IconData icon;
|
||||
}
|
||||
|
||||
class _MenuItems {
|
||||
static const List<_MenuItem> firstItems = [like, share, download];
|
||||
static const List<_MenuItem> secondItems = [cancel];
|
||||
static const like = _MenuItem(text: 'Like', icon: Icons.favorite);
|
||||
static const share = _MenuItem(text: 'Share', icon: Icons.share);
|
||||
static const download = _MenuItem(text: 'Download', icon: Icons.download);
|
||||
static const cancel = _MenuItem(text: 'Cancel', icon: Icons.cancel);
|
||||
|
||||
static Widget buildItem(_MenuItem item) {
|
||||
return Container(
|
||||
height: 30,
|
||||
padding: EdgeInsets.symmetric(vertical: 2),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
children: [
|
||||
// Icon(item.icon, color: Color.fromRGBO(242, 240, 240, 1), size: 22),
|
||||
// const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.text,
|
||||
style: const TextStyle(color: Color.fromRGBO(253, 252, 252, 1)),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
static void onChanged(BuildContext context, _MenuItem item) {
|
||||
switch (item) {
|
||||
case _MenuItems.like:
|
||||
//Do something
|
||||
break;
|
||||
case _MenuItems.share:
|
||||
//Do something
|
||||
break;
|
||||
case _MenuItems.download:
|
||||
//Do something
|
||||
break;
|
||||
case _MenuItems.cancel:
|
||||
//Do something
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
|
||||
class CollectionCaraterScreen extends StatefulWidget {
|
||||
const CollectionCaraterScreen({super.key});
|
||||
|
||||
@override
|
||||
State<CollectionCaraterScreen> createState() =>
|
||||
_CollectionCaraterScreenState();
|
||||
}
|
||||
|
||||
class _CollectionCaraterScreenState extends State<CollectionCaraterScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 80),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(40),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text("Favorite", style: TextStyle(color: Colors.black)),
|
||||
Divider(height: 20, color: Colors.transparent),
|
||||
Row(
|
||||
// alignment: WrapAlignment.spaceAround,
|
||||
spacing: 10, // Horizontal spacing between the containers
|
||||
// runSpacing: 10, // Vertical spacing between lines
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Luffy",
|
||||
imagesrc: 'images/luffy.png',
|
||||
colorContiner: Color.fromRGBO(12, 199, 215, 1),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Oni Chan",
|
||||
imagesrc: 'images/klipartz.png',
|
||||
onTapAc: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
Divider(height: 20, color: Colors.transparent),
|
||||
Text("All", style: TextStyle(color: Colors.black)),
|
||||
Divider(height: 20, color: Colors.transparent),
|
||||
Row(
|
||||
// alignment: WrapAlignment.spaceAround,
|
||||
spacing: 10, // Horizontal spacing between the containers
|
||||
// runSpacing: 10, // Vertical spacing between lines
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Luffy",
|
||||
imagesrc: 'images/luffy.png',
|
||||
colorContiner: Color.fromRGBO(12, 199, 215, 1),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Oni Chan",
|
||||
imagesrc: 'images/klipartz.png',
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Cepot",
|
||||
imagesrc: 'images/cepott.png',
|
||||
colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
import 'package:furibase/helpers/color_helper.dart';
|
||||
|
||||
class CollectionFragmentScreen extends StatefulWidget {
|
||||
const CollectionFragmentScreen({super.key});
|
||||
|
||||
@override
|
||||
State<CollectionFragmentScreen> createState() =>
|
||||
_CollectionFragmentScreenState();
|
||||
}
|
||||
|
||||
class _CollectionFragmentScreenState extends State<CollectionFragmentScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
color: Colors.white,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 80),
|
||||
Padding(
|
||||
padding: EdgeInsets.all(40),
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.spaceAround,
|
||||
spacing: 10, // Horizontal spacing between the containers
|
||||
runSpacing: 10, // Vertical spacing between lines
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Luffy",
|
||||
imagesrc: 'images/ft_luffy.png',
|
||||
onTapAc: () => {},
|
||||
colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Oni Chan",
|
||||
imagesrc: 'images/ft_cepot.png',
|
||||
onTapAc: () => {},
|
||||
colorContiner: ColorHelper.hexToColor("0xE2E5E9"),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
|
||||
class CollectionSkinScreen extends StatefulWidget {
|
||||
const CollectionSkinScreen({super.key});
|
||||
|
||||
@override
|
||||
State<CollectionSkinScreen> createState() => _CollectionSkinScreenState();
|
||||
}
|
||||
|
||||
class _CollectionSkinScreenState extends State<CollectionSkinScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 80),
|
||||
Padding(
|
||||
padding: EdgeInsets.only(top: 40, left: 20, right: 20, bottom: 20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
|
||||
children: [
|
||||
Text("Luffy", style: TextStyle(color: Colors.black)),
|
||||
Divider(height: 10),
|
||||
Row(
|
||||
// alignment: WrapAlignment.start,
|
||||
spacing: 10, // Horizontal spacing between the containers
|
||||
// runSpacing: 10, // Vertical spacing between lines
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Luffy Kimono",
|
||||
imagesrc: 'images/luffy-kimono.png',
|
||||
colorContiner: Color.fromRGBO(12, 199, 215, 1),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
|
||||
CollectionContainer(
|
||||
label: "Luffy (Default)",
|
||||
imagesrc: 'images/luffy.png',
|
||||
colorContiner: Color.fromRGBO(12, 199, 215, 1),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Luffy King",
|
||||
imagesrc: 'images/luffy-king.png',
|
||||
colorContiner: Color.fromRGBO(12, 199, 215, 1),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
Divider(height: 20, color: Colors.transparent),
|
||||
Text("Others", style: TextStyle(color: Colors.black)),
|
||||
Divider(height: 10),
|
||||
Row(
|
||||
// alignment: WrapAlignment.start,
|
||||
spacing: 10, // Horizontal spacing between the containers
|
||||
// runSpacing: 10, // Vertical spacing between lines
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Oni Chan (Default)",
|
||||
imagesrc: 'images/klipartz.png',
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Cepot (Default)",
|
||||
imagesrc: 'images/cepott.png',
|
||||
colorContiner: Color.fromRGBO(237, 207, 100, 1.0),
|
||||
onTapAc: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/navbar_container.dart';
|
||||
|
||||
class DrawScreen extends StatelessWidget {
|
||||
const DrawScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 100,
|
||||
child: NavbarContainer(),
|
||||
), // Ensure height
|
||||
Expanded(
|
||||
child: Center(
|
||||
child: Text("Main Content Here", style: TextStyle(fontSize: 24)),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/bottom_navbar.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/main_menu.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:furibase/components/tab_menu.dart';
|
||||
import 'package:furibase/components/topbar_container.dart';
|
||||
import 'package:furibase/screen/collection/collection_caracter_screen.dart';
|
||||
import 'package:furibase/screen/collection/collection_fragment_screen.dart';
|
||||
import 'package:furibase/screen/collection/collection_skin_screen.dart';
|
||||
|
||||
class KoleksiScreen extends StatefulWidget {
|
||||
const KoleksiScreen({super.key});
|
||||
|
||||
@override
|
||||
State<KoleksiScreen> createState() => _KoleksiScreenState();
|
||||
}
|
||||
|
||||
class _KoleksiScreenState extends State<KoleksiScreen> {
|
||||
// static const Color transparent = Color(0xFFFFFFF);
|
||||
|
||||
final PageController _pageController = PageController();
|
||||
int _selectedIndex = 0;
|
||||
|
||||
void _onMenuTapped(int index) {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
});
|
||||
_pageController.animateToPage(
|
||||
index,
|
||||
duration: Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Stack(
|
||||
children: <Widget>[
|
||||
Positioned.fill(
|
||||
child: Container(color: const Color.fromARGB(255, 255, 255, 255)),
|
||||
),
|
||||
Positioned.fill(
|
||||
top: 30,
|
||||
child: PageView(
|
||||
controller: _pageController,
|
||||
onPageChanged: (index) {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
});
|
||||
},
|
||||
children: [
|
||||
const CollectionCaraterScreen(),
|
||||
const CollectionSkinScreen(),
|
||||
const CollectionFragmentScreen(),
|
||||
],
|
||||
),
|
||||
),
|
||||
// BG MEnu
|
||||
Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: SizedBox(height: 85, child: BottomNavbar()),
|
||||
),
|
||||
],
|
||||
),
|
||||
//TopBar
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: SizedBox(height: 130, child: TopbarContainer()),
|
||||
),
|
||||
|
||||
Positioned(
|
||||
top: 10,
|
||||
left: 10,
|
||||
right: 10,
|
||||
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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// Positioned.fill(
|
||||
// top: 30,
|
||||
// child: PageView(
|
||||
// controller: _pageController,
|
||||
// onPageChanged: (index) {
|
||||
// setState(() {
|
||||
// _selectedIndex = index;
|
||||
// });
|
||||
// },
|
||||
// children: [
|
||||
// const CollectionCaraterScreen(),
|
||||
// const CollectionSkinScreen(),
|
||||
// const CollectionFragmentScreen(),
|
||||
// ],
|
||||
// ),
|
||||
// ),
|
||||
Positioned(
|
||||
top: 80,
|
||||
left: 40,
|
||||
right: 40,
|
||||
child: Container(
|
||||
// decoration: const BoxDecoration(
|
||||
// borderRadius: BorderRadius.all(Radius.circular(20)),
|
||||
// color: Color.fromARGB(116, 125, 129, 133),
|
||||
// ),
|
||||
padding: const EdgeInsets.all(1),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
TabMenuButton(
|
||||
label: "Karakter",
|
||||
isSelected: _selectedIndex == 0,
|
||||
onPress: () => _onMenuTapped(0),
|
||||
),
|
||||
TabMenuButton(
|
||||
label: "Skin",
|
||||
isSelected: _selectedIndex == 1,
|
||||
onPress: () => _onMenuTapped(1),
|
||||
),
|
||||
TabMenuButton(
|
||||
label: "Fragment",
|
||||
isSelected: _selectedIndex == 2,
|
||||
onPress: () => _onMenuTapped(2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
|
||||
Positioned(
|
||||
bottom: 1,
|
||||
left: MediaQuery.of(context).size.width / 2 - 48,
|
||||
child: Transform.translate(
|
||||
offset: Offset(0, -20),
|
||||
child: ScanButton(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ListDetailScreen extends StatefulWidget {
|
||||
final String title;
|
||||
|
||||
const ListDetailScreen({super.key, required this.title});
|
||||
|
||||
@override
|
||||
State<ListDetailScreen> createState() => _ListDetailScreenState();
|
||||
}
|
||||
|
||||
class _ListDetailScreenState extends State<ListDetailScreen> {
|
||||
List<bool> checklist = [];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
checklist = List.generate(paragraphs.length, (index) => false);
|
||||
}
|
||||
|
||||
final List<String> paragraphs = [
|
||||
"Paragraf pertama tentang ${"widget.title"}.",
|
||||
"Paragraf kedua dengan informasi tambahan.",
|
||||
"Paragraf ketiga yang menjelaskan detail lebih lanjut.",
|
||||
"Paragraf keempat yang melengkapi pembahasan.",
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
appBar: AppBar(title: Text(widget.title)),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
children: [
|
||||
// Gambar di kiri atas dengan teks di kanan
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Image.asset(
|
||||
'images/default.png', // Ganti dengan gambar yang sesuai
|
||||
width: 100,
|
||||
height: 100,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(
|
||||
"Ini adalah detail dari ${widget.title}.",
|
||||
style: const TextStyle(fontSize: 18),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Paragraf dengan checklist
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: paragraphs.length,
|
||||
itemBuilder: (context, index) {
|
||||
return ListTile(
|
||||
title: Text(paragraphs[index]),
|
||||
trailing: Checkbox(
|
||||
value: checklist[index],
|
||||
onChanged: (bool? value) {
|
||||
setState(() {
|
||||
checklist[index] = value!;
|
||||
});
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
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/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, String>> _collections = [
|
||||
{"label": "Kesehatan", "image": "icons/healthy.svg"},
|
||||
{"label": "Gizi", "image": "icons/Nutrition.svg"},
|
||||
{"label": "Pendidikan", "image": "icons/Education.svg"},
|
||||
{"label": "Keselamatan", "image": "icons/Safety.svg"},
|
||||
];
|
||||
List<Map<String, String>> 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: Colors.black26,
|
||||
body: Column(
|
||||
children: [
|
||||
// Header Section
|
||||
Container(
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: 165,
|
||||
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: 20,
|
||||
),
|
||||
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: 60,
|
||||
iconh: 60,
|
||||
width: 70,
|
||||
height: 70,
|
||||
circle: false,
|
||||
textColor: Colors.black,
|
||||
lblSize: 10,
|
||||
onTapAc:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => ListEducation(),
|
||||
),
|
||||
),
|
||||
},
|
||||
);
|
||||
}).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(),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,244 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
|
||||
class DetailScreen extends StatefulWidget {
|
||||
final String title;
|
||||
final String image;
|
||||
final String description;
|
||||
|
||||
const DetailScreen({
|
||||
super.key,
|
||||
required this.title,
|
||||
required this.image,
|
||||
required this.description,
|
||||
});
|
||||
|
||||
@override
|
||||
State<DetailScreen> createState() => _DetailScreenState();
|
||||
}
|
||||
|
||||
class _DetailScreenState extends State<DetailScreen> {
|
||||
List<bool> _isChecked = [];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_isChecked = List.generate(
|
||||
widget.description.split("\n").length,
|
||||
(index) => false,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List<String> paragraphs = widget.description.split("\n");
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: Text(widget.title)),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Image.asset(
|
||||
widget.image,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
itemCount: paragraphs.length,
|
||||
itemBuilder: (context, index) {
|
||||
return ListTile(
|
||||
title: Text(
|
||||
paragraphs[index],
|
||||
style: const TextStyle(fontSize: 16),
|
||||
),
|
||||
trailing: Checkbox(
|
||||
value: _isChecked[index],
|
||||
onChanged: (bool? value) {
|
||||
setState(() {
|
||||
_isChecked[index] = value ?? false;
|
||||
});
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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, String>> _collections = [
|
||||
{
|
||||
"label": "Luffy",
|
||||
"image": "images/luffy.png",
|
||||
"description":
|
||||
"Karakter utama di One Piece.\nDia adalah bajak laut yang bercita-cita menjadi Raja Bajak Laut.",
|
||||
},
|
||||
{
|
||||
"label": "Oni Chan",
|
||||
"image": "images/klipartz.png",
|
||||
"description":
|
||||
"Karakter ikonik dari anime.\nIa dikenal karena sifatnya yang protektif dan penyayang.",
|
||||
},
|
||||
{
|
||||
"label": "Cepot",
|
||||
"image": "images/cepott.png",
|
||||
"description":
|
||||
"Tokoh wayang golek terkenal.\nCepot dikenal dengan lelucon dan kebijaksanaannya.",
|
||||
},
|
||||
{
|
||||
"label": "Cepot",
|
||||
"image": "images/cepott.png",
|
||||
"description":
|
||||
"Tokoh wayang golek terkenal.\nCepot dikenal dengan lelucon dan kebijaksanaannya.",
|
||||
},
|
||||
];
|
||||
|
||||
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, String>> filteredCollections =
|
||||
_collections
|
||||
.where(
|
||||
(item) => item["label"]!.toLowerCase().contains(
|
||||
_searchQuery.toLowerCase(),
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
color: const Color.fromARGB(251, 122, 129, 121).withOpacity(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,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Text(
|
||||
DateTime.now().toString(),
|
||||
style: const TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
|
||||
child: Container(
|
||||
height: 47,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
color: const Color.fromARGB(50, 237, 227, 227),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
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),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 120,
|
||||
vertical: 40,
|
||||
),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: 20,
|
||||
mainAxisSpacing: 20,
|
||||
children:
|
||||
filteredCollections.map((item) {
|
||||
return CollectionContainer(
|
||||
label: item["label"]!,
|
||||
imagesrc: item["image"]!,
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder:
|
||||
(context) => DetailScreen(
|
||||
title: item["label"]!,
|
||||
image: item["image"]!,
|
||||
description: item["description"]!,
|
||||
),
|
||||
),
|
||||
),
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_html/flutter_html.dart';
|
||||
|
||||
class ListDetailScreen extends StatefulWidget {
|
||||
final String title;
|
||||
final String imagePath;
|
||||
final List<String> paragraphs;
|
||||
|
||||
const ListDetailScreen({
|
||||
Key? key,
|
||||
required this.title,
|
||||
required this.imagePath,
|
||||
required this.paragraphs,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
_ListDetailScreenState createState() => _ListDetailScreenState();
|
||||
}
|
||||
|
||||
class _ListDetailScreenState extends State<ListDetailScreen> {
|
||||
late List<bool> _readStatus;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_readStatus = List.generate(widget.paragraphs.length, (index) => false);
|
||||
}
|
||||
|
||||
void _toggleReadStatus(int index) {
|
||||
setState(() {
|
||||
_readStatus[index] = !_readStatus[index];
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
appBar: AppBar(
|
||||
title: Text(widget.title),
|
||||
backgroundColor: Color.fromARGB(225, 79, 76, 182),
|
||||
),
|
||||
body: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: 10,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(40),
|
||||
bottomRight: Radius.circular(40),
|
||||
),
|
||||
color: Color.fromARGB(225, 79, 76, 182),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(20.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Image.asset(
|
||||
widget.imagePath,
|
||||
width: 100,
|
||||
height: 100,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(18.0),
|
||||
child: ListView.builder(
|
||||
itemCount: widget.paragraphs.length,
|
||||
itemBuilder: (context, index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 16.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child:
|
||||
// Text(
|
||||
// widget.paragraphs[index] +
|
||||
// style: TextStyle(color: Colors.black),
|
||||
Html(
|
||||
style: {"body": Style(color: Colors.black)},
|
||||
data:
|
||||
widget.paragraphs.toString() +
|
||||
"""
|
||||
<html>
|
||||
<!-- Text between angle brackets is an HTML tag and is not displayed.
|
||||
Most tags, such as the HTML and /HTML tags that surround the contents of
|
||||
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
|
||||
alone. Comments, such as the text you're reading, are not displayed when
|
||||
the Web page is shown. The information between the HEAD and /HEAD tags is
|
||||
not displayed. The information between the BODY and /BODY tags is displayed.-->
|
||||
<head>
|
||||
<title>Enter a title, displayed at the top of the window.</title>
|
||||
</head>
|
||||
<!-- The information between the BODY and /BODY tags is displayed.-->
|
||||
<body>
|
||||
<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="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
|
||||
<p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.
|
||||
Break up your page with a horizontal rule or two. </p>
|
||||
<hr>
|
||||
<p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
|
||||
<!-- And add a copyright notice.-->
|
||||
<p>© Wiley Publishing, 2011</p>
|
||||
</body>
|
||||
</html>
|
||||
""",
|
||||
),
|
||||
),
|
||||
// ),
|
||||
// Checkbox(
|
||||
// value: _readStatus[index],
|
||||
// onChanged: (bool? value) {
|
||||
// _toggleReadStatus(index);
|
||||
// },
|
||||
// ),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// ),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
import 'package:furibase/components/menu_button.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:furibase/screen/Home_screen.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;
|
||||
|
||||
void _onMenuTapped(int index) {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
});
|
||||
_pageController.animateToPage(
|
||||
index,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
// Header Section
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
color: const Color.fromARGB(251, 122, 129, 121).withOpacity(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(50, 237, 227, 227),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.search, color: Colors.black54, size: 18),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
style: const TextStyle(color: Colors.black, fontSize: 12),
|
||||
decoration: const InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: 'Search...',
|
||||
hintStyle: TextStyle(color: Colors.grey),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Collection Items
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 120,
|
||||
vertical: 40,
|
||||
),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 2, // Membuat dua kolom dalam grid
|
||||
crossAxisSpacing: 20,
|
||||
mainAxisSpacing: 20,
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Luffy",
|
||||
imagesrc: 'images/luffy.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => ListEducation(),
|
||||
),
|
||||
),
|
||||
},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Oni Chan",
|
||||
imagesrc: 'images/klipartz.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Cepot",
|
||||
imagesrc: 'images/cepott.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Cepot",
|
||||
imagesrc: 'images/cepott.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Horizontal Scroll List
|
||||
SizedBox(
|
||||
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(15),
|
||||
),
|
||||
child: Container(
|
||||
width: 80,
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.book,
|
||||
size: 50,
|
||||
color: Colors.blueAccent,
|
||||
),
|
||||
Text(
|
||||
'Item $index',
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Navigation
|
||||
Container(
|
||||
color: Colors.transparent,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
MenuButton(
|
||||
label: "E-furibuddy",
|
||||
icon: 'icons/furrybuddy.svg',
|
||||
onPress:
|
||||
() => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => HomeScreen()),
|
||||
),
|
||||
),
|
||||
MenuButton(
|
||||
label: "Koleksi",
|
||||
icon: 'icons/koleksi.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
ScanButton(),
|
||||
MenuButton(
|
||||
label: "Pustaka",
|
||||
icon: 'icons/Pustaka.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
MenuButton(
|
||||
label: "Saya",
|
||||
icon: 'icons/Saya.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
import 'package:furibase/components/menu_button.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:furibase/screen/Home_screen.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, String>> _collections = [
|
||||
{"label": "Luffy", "image": "images/luffy.png"},
|
||||
{"label": "Oni Chan", "image": "images/klipartz.png"},
|
||||
{"label": "Cepot", "image": "images/cepott.png"},
|
||||
{"label": "Cepot", "image": "images/cepott.png"},
|
||||
];
|
||||
|
||||
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, String>> filteredCollections =
|
||||
_collections
|
||||
.where(
|
||||
(item) => item["label"]!.toLowerCase().contains(
|
||||
_searchQuery.toLowerCase(),
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
// Header Section
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
color: const Color.fromARGB(251, 122, 129, 121).withOpacity(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(50, 237, 227, 227),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
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
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 120,
|
||||
vertical: 40,
|
||||
),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 2,
|
||||
crossAxisSpacing: 20,
|
||||
mainAxisSpacing: 20,
|
||||
children:
|
||||
filteredCollections.map((item) {
|
||||
return CollectionContainer(
|
||||
label: item["label"]!,
|
||||
imagesrc: item["image"]!,
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => ListEducation(),
|
||||
),
|
||||
),
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Horizontal Scroll List
|
||||
SizedBox(
|
||||
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(15),
|
||||
),
|
||||
child: Container(
|
||||
width: 80,
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.book,
|
||||
size: 50,
|
||||
color: Colors.blueAccent,
|
||||
),
|
||||
Text(
|
||||
'Item $index',
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Navigation
|
||||
Container(
|
||||
color: Colors.transparent,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
MenuButton(
|
||||
label: "E-furibuddy",
|
||||
icon: 'icons/furrybuddy.svg',
|
||||
onPress:
|
||||
() => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => HomeScreen()),
|
||||
),
|
||||
),
|
||||
MenuButton(
|
||||
label: "Koleksi",
|
||||
icon: 'icons/koleksi.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
ScanButton(),
|
||||
MenuButton(
|
||||
label: "Pustaka",
|
||||
icon: 'icons/Pustaka.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
MenuButton(
|
||||
label: "Saya",
|
||||
icon: 'icons/Saya.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/buildcard_info.dart';
|
||||
import 'package:furibase/components/collection_container.dart';
|
||||
import 'package:furibase/components/menu_button.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:furibase/screen/Home_screen.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;
|
||||
|
||||
void _onMenuTapped(int index) {
|
||||
setState(() {
|
||||
_selectedIndex = index;
|
||||
});
|
||||
_pageController.animateToPage(
|
||||
index,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeInOut,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
// Header Section
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
color: const Color.fromARGB(251, 122, 129, 121).withOpacity(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(50, 237, 227, 227),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.search, color: Colors.black54, size: 18),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
style: const TextStyle(color: Colors.black, fontSize: 12),
|
||||
decoration: const InputDecoration(
|
||||
border: InputBorder.none,
|
||||
hintText: 'Search...',
|
||||
hintStyle: TextStyle(color: Colors.grey),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Collection Items
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 120,
|
||||
vertical: 40,
|
||||
),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 2, // Membuat dua kolom dalam grid
|
||||
crossAxisSpacing: 20,
|
||||
mainAxisSpacing: 20,
|
||||
children: [
|
||||
CollectionContainer(
|
||||
label: "Luffy",
|
||||
imagesrc: 'images/luffy.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => ListEducation(),
|
||||
),
|
||||
),
|
||||
},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Oni Chan",
|
||||
imagesrc: 'images/klipartz.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Cepot",
|
||||
imagesrc: 'images/cepott.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc: () => {},
|
||||
),
|
||||
CollectionContainer(
|
||||
label: "Cepot",
|
||||
imagesrc: 'images/cepott.png',
|
||||
width: 100,
|
||||
height: 100,
|
||||
onTapAc: () => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Horizontal Scroll List
|
||||
SizedBox(
|
||||
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(15),
|
||||
),
|
||||
child: Container(
|
||||
width: 80,
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.book,
|
||||
size: 50,
|
||||
color: Colors.blueAccent,
|
||||
),
|
||||
Text(
|
||||
'Item $index',
|
||||
style: const TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Navigation
|
||||
Container(
|
||||
color: Colors.transparent,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
MenuButton(
|
||||
label: "E-furibuddy",
|
||||
icon: 'icons/furrybuddy.svg',
|
||||
onPress:
|
||||
() => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => HomeScreen()),
|
||||
),
|
||||
),
|
||||
MenuButton(
|
||||
label: "Koleksi",
|
||||
icon: 'icons/koleksi.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
ScanButton(),
|
||||
MenuButton(
|
||||
label: "Pustaka",
|
||||
icon: 'icons/Pustaka.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
MenuButton(
|
||||
label: "Saya",
|
||||
icon: 'icons/Saya.svg',
|
||||
onPress: () {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
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": "icons/healthy.svg", "color": "#cdd0ee"},
|
||||
{"label": "Gizi", "image": "icons/Nutrition.svg", "color": "#e8e29a"},
|
||||
{"label": "Pendidikan", "image": "icons/Education.svg", "color": "#efd8c6"},
|
||||
{"label": "Keselamatan", "image": "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(50, 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
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 100,
|
||||
vertical: 40,
|
||||
),
|
||||
child: GridView.builder(
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
maxCrossAxisExtent: 140, // Maksimum lebar tiap item
|
||||
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(),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
// GridView.count(
|
||||
// crossAxisCount: 2,
|
||||
// crossAxisSpacing: 20,
|
||||
// mainAxisSpacing: 20,
|
||||
// children:
|
||||
// filteredCollections.map((item) {
|
||||
// return CollectionContainer(
|
||||
// label: item["label"]!,
|
||||
// imageSvg: item["image"]!,
|
||||
// width: 80,
|
||||
// height: 80,
|
||||
// textColor: Colors.black,
|
||||
// circle: true,
|
||||
// colorContiner: item["color"]! as Color,
|
||||
// onTapAc:
|
||||
// () => {
|
||||
// Navigator.push(
|
||||
// context,
|
||||
// MaterialPageRoute(
|
||||
// builder: (context) => ListEducation(),
|
||||
// ),
|
||||
// ),
|
||||
// },
|
||||
// );
|
||||
// }).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 40,
|
||||
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: 40, vertical: 10),
|
||||
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: 1,
|
||||
left: MediaQuery.of(context).size.width / 2 - 48,
|
||||
child: Transform.translate(
|
||||
offset: Offset(0, -20),
|
||||
child: ScanButton(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,225 @@
|
||||
import 'dart:typed_data';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/bottom_navbar.dart';
|
||||
import 'package:furibase/components/main_menu.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:image_picker_web/image_picker_web.dart';
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
|
||||
class AkunSaya extends StatefulWidget {
|
||||
@override
|
||||
_AkunSayaState createState() => _AkunSayaState();
|
||||
}
|
||||
|
||||
class _AkunSayaState extends State<AkunSaya> {
|
||||
dynamic _profileImage;
|
||||
dynamic _headerImage;
|
||||
final ImagePicker _picker = ImagePicker();
|
||||
|
||||
Future<void> _pickImage(bool isProfile) async {
|
||||
if (kIsWeb) {
|
||||
Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
|
||||
if (bytesFromPicker != null) {
|
||||
setState(() {
|
||||
if (isProfile) {
|
||||
_profileImage = bytesFromPicker;
|
||||
} else {
|
||||
_headerImage = bytesFromPicker;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
|
||||
if (pickedFile != null) {
|
||||
setState(() {
|
||||
if (isProfile) {
|
||||
_profileImage = File(pickedFile.path);
|
||||
} else {
|
||||
_headerImage = File(pickedFile.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text("Saya"),
|
||||
backgroundColor: Color.fromARGB(225, 79, 76, 182),
|
||||
),
|
||||
backgroundColor: const Color.fromARGB(255, 255, 255, 255),
|
||||
body: Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 20.0, left: 20, right: 20),
|
||||
child: Container(
|
||||
height: MediaQuery.of(context).size.height * 0.7,
|
||||
width: MediaQuery.of(context).size.width,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 205, 202, 189),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(20),
|
||||
topRight: Radius.circular(20),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
// Header image (bisa diubah)
|
||||
SizedBox(
|
||||
height: 80,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(40),
|
||||
bottomRight: Radius.circular(40),
|
||||
),
|
||||
color: Color.fromARGB(225, 79, 76, 182),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 40),
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(20),
|
||||
child: ListView(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 40),
|
||||
children: [
|
||||
TextFormField(
|
||||
initialValue: "Cepot",
|
||||
decoration: const InputDecoration(
|
||||
border: UnderlineInputBorder(),
|
||||
labelText: 'Nama',
|
||||
labelStyle: TextStyle(color: Colors.black),
|
||||
),
|
||||
style: TextStyle(color: Colors.black),
|
||||
),
|
||||
TextFormField(
|
||||
initialValue: "cpt09",
|
||||
decoration: const InputDecoration(
|
||||
border: UnderlineInputBorder(),
|
||||
labelText: 'Nama Pengguna',
|
||||
labelStyle: TextStyle(color: Colors.black),
|
||||
),
|
||||
style: TextStyle(color: Colors.black),
|
||||
),
|
||||
|
||||
TextFormField(
|
||||
initialValue: "Jl. Sentosa jaya",
|
||||
decoration: const InputDecoration(
|
||||
border: UnderlineInputBorder(),
|
||||
labelText: 'Alamat',
|
||||
labelStyle: TextStyle(color: Colors.black),
|
||||
),
|
||||
style: TextStyle(color: Colors.black),
|
||||
),
|
||||
|
||||
TextFormField(
|
||||
initialValue: "******",
|
||||
decoration: const InputDecoration(
|
||||
border: UnderlineInputBorder(),
|
||||
labelText: 'Kata Sandi',
|
||||
labelStyle: TextStyle(color: Colors.black),
|
||||
),
|
||||
style: TextStyle(color: Colors.black),
|
||||
),
|
||||
TextFormField(
|
||||
initialValue: "+62923",
|
||||
decoration: const InputDecoration(
|
||||
border: UnderlineInputBorder(),
|
||||
labelText: 'No. HP',
|
||||
labelStyle: TextStyle(color: Colors.black),
|
||||
),
|
||||
style: TextStyle(color: Colors.black),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Profile Picture (bisa diubah)
|
||||
Positioned(
|
||||
top: 25,
|
||||
left: MediaQuery.of(context).size.width / 2 - 50,
|
||||
child: GestureDetector(
|
||||
onTap: () => _pickImage(true),
|
||||
child: Stack(
|
||||
alignment: Alignment.bottomRight,
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 50,
|
||||
backgroundColor: Colors.grey[300],
|
||||
backgroundImage:
|
||||
_profileImage != null
|
||||
? (kIsWeb
|
||||
? MemoryImage(_profileImage) as ImageProvider
|
||||
: FileImage(_profileImage) as ImageProvider)
|
||||
: null,
|
||||
child:
|
||||
_profileImage == null
|
||||
? Icon(Icons.person, size: 50, color: Colors.white)
|
||||
: null,
|
||||
),
|
||||
CircleAvatar(
|
||||
radius: 15,
|
||||
backgroundColor: Colors.blue,
|
||||
child: Icon(Icons.edit, color: Colors.white, size: 15),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Positioned(
|
||||
top: 130,
|
||||
left: MediaQuery.of(context).size.width / 2 - 50,
|
||||
child: GestureDetector(
|
||||
onTap: () => _pickImage(true),
|
||||
child: Stack(
|
||||
alignment: Alignment.bottomRight,
|
||||
children: [
|
||||
Text(
|
||||
"Nama Akun",
|
||||
style: TextStyle(
|
||||
color: Colors.deepPurple,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildListItem(IconData icon, String label, {bool isLogout = false}) {
|
||||
return ListTile(
|
||||
leading: Icon(
|
||||
icon,
|
||||
color:
|
||||
isLogout
|
||||
? const Color.fromARGB(255, 181, 47, 47)
|
||||
: const Color.fromARGB(255, 255, 255, 255),
|
||||
),
|
||||
title: Text(label, style: TextStyle(fontSize: 16, color: Colors.black)),
|
||||
trailing: Icon(Icons.arrow_forward_ios, size: 16),
|
||||
onTap: () {},
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,209 @@
|
||||
import 'dart:typed_data';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_html/flutter_html.dart';
|
||||
import 'package:furibase/components/bottom_navbar.dart';
|
||||
import 'package:furibase/components/main_menu.dart';
|
||||
import 'package:furibase/components/scan_button.dart';
|
||||
import 'package:furibase/screen/saya/akun_saya.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:image_picker_web/image_picker_web.dart';
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
|
||||
class ProfileScreenCopy extends StatefulWidget {
|
||||
@override
|
||||
_ProfileScreenState createState() => _ProfileScreenState();
|
||||
}
|
||||
|
||||
class _ProfileScreenState extends State<ProfileScreenCopy> {
|
||||
// File? _profileImage;
|
||||
// File? _headerImage;
|
||||
// final ImagePicker _picker = ImagePicker();
|
||||
dynamic _profileImage;
|
||||
dynamic _headerImage;
|
||||
final ImagePicker _picker = ImagePicker();
|
||||
|
||||
Future<void> _pickImage(bool isProfile) async {
|
||||
if (kIsWeb) {
|
||||
Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
|
||||
if (bytesFromPicker != null) {
|
||||
setState(() {
|
||||
if (isProfile) {
|
||||
_profileImage = bytesFromPicker;
|
||||
} else {
|
||||
_headerImage = bytesFromPicker;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
|
||||
if (pickedFile != null) {
|
||||
setState(() {
|
||||
if (isProfile) {
|
||||
_profileImage = File(pickedFile.path);
|
||||
} else {
|
||||
_headerImage = File(pickedFile.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color.fromARGB(255, 159, 156, 156),
|
||||
body: Stack(
|
||||
children: [
|
||||
Stack(
|
||||
children: [
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: SizedBox(height: 85, child: BottomNavbar()),
|
||||
),
|
||||
],
|
||||
),
|
||||
Column(
|
||||
children: [
|
||||
// Header image (bisa diubah)
|
||||
GestureDetector(
|
||||
onTap: () => _pickImage(false),
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
height: 200,
|
||||
width: double.infinity,
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image:
|
||||
_headerImage != null
|
||||
? (kIsWeb
|
||||
? MemoryImage(_headerImage)
|
||||
as ImageProvider
|
||||
: FileImage(_headerImage)
|
||||
as ImageProvider)
|
||||
: AssetImage('images/background.jpeg'),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(height: 80),
|
||||
Expanded(
|
||||
child: ListView(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20),
|
||||
children: [
|
||||
_buildListItem(Icons.person, "Akun", () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => AkunSaya()),
|
||||
);
|
||||
}),
|
||||
_buildListItem(Icons.person, "Data Diri", () => {}),
|
||||
_buildListItem(
|
||||
Icons.lock,
|
||||
"Kata Sandi",
|
||||
() => {},
|
||||
), // bisa diubah disini
|
||||
_buildListItem(Icons.language, "Bahasa", () => {}),
|
||||
_buildListItem(
|
||||
Icons.logout,
|
||||
"Keluar",
|
||||
isLogout: true,
|
||||
() => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Profile Picture (bisa diubah)
|
||||
Positioned(
|
||||
top: 140,
|
||||
left: MediaQuery.of(context).size.width / 2 - 50,
|
||||
child: GestureDetector(
|
||||
onTap: () => _pickImage(true),
|
||||
child: Stack(
|
||||
alignment: Alignment.bottomRight,
|
||||
children: [
|
||||
// CircleAvatar(
|
||||
// radius: 50,
|
||||
// backgroundColor: Colors.grey[300],
|
||||
// backgroundImage:
|
||||
// _profileImage != null
|
||||
// ? FileImage(_profileImage!)
|
||||
// : null,
|
||||
// child:
|
||||
// _profileImage == null
|
||||
// ? Icon(Icons.person, size: 50, color: Colors.white)
|
||||
// : null,
|
||||
// ),
|
||||
// CircleAvatar(
|
||||
// radius: 15,
|
||||
// backgroundColor: Colors.blue,
|
||||
// child: Icon(Icons.edit, color: Colors.white, size: 15),
|
||||
// ),
|
||||
CircleAvatar(
|
||||
radius: 50,
|
||||
backgroundColor: Colors.grey[300],
|
||||
backgroundImage:
|
||||
_profileImage != null
|
||||
? (kIsWeb
|
||||
? MemoryImage(_profileImage) as ImageProvider
|
||||
: FileImage(_profileImage) as ImageProvider)
|
||||
: null,
|
||||
child:
|
||||
_profileImage == null
|
||||
? Icon(Icons.person, size: 50, color: Colors.white)
|
||||
: null,
|
||||
),
|
||||
CircleAvatar(
|
||||
radius: 15,
|
||||
backgroundColor: Colors.blue,
|
||||
child: Icon(Icons.edit, color: Colors.white, size: 15),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
// Bottom Navigation Bar
|
||||
Positioned(bottom: 0, left: 0, right: 0, child: MainMenu()),
|
||||
Positioned(
|
||||
bottom: 1,
|
||||
left: MediaQuery.of(context).size.width / 2 - 48,
|
||||
child: Transform.translate(
|
||||
offset: Offset(0, -20),
|
||||
child: ScanButton(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildListItem(
|
||||
IconData icon,
|
||||
String label,
|
||||
VoidCallback onTap, {
|
||||
bool isLogout = false,
|
||||
}) {
|
||||
return ListTile(
|
||||
leading: Icon(
|
||||
icon,
|
||||
color:
|
||||
isLogout
|
||||
? const Color.fromARGB(255, 181, 47, 47)
|
||||
: const Color.fromARGB(255, 255, 255, 255),
|
||||
),
|
||||
title: Text(label, style: TextStyle(fontSize: 16, color: Colors.black)),
|
||||
trailing: Icon(Icons.arrow_forward_ios, size: 16),
|
||||
onTap: onTap,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,375 @@
|
||||
import 'dart:typed_data';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_html/flutter_html.dart';
|
||||
import 'package:furibase/components/bottom_navbar.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/screen/saya/akun_saya.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:image_picker_web/image_picker_web.dart';
|
||||
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
|
||||
class ProfileScreen extends StatefulWidget {
|
||||
@override
|
||||
_ProfileScreenState createState() => _ProfileScreenState();
|
||||
}
|
||||
|
||||
class _ProfileScreenState extends State<ProfileScreen> {
|
||||
// File? _profileImage;
|
||||
// File? _headerImage;
|
||||
// final ImagePicker _picker = ImagePicker();
|
||||
dynamic _profileImage;
|
||||
dynamic _headerImage;
|
||||
final ImagePicker _picker = ImagePicker();
|
||||
|
||||
Future<void> _pickImage(bool isProfile) async {
|
||||
if (kIsWeb) {
|
||||
Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();
|
||||
if (bytesFromPicker != null) {
|
||||
setState(() {
|
||||
if (isProfile) {
|
||||
_profileImage = bytesFromPicker;
|
||||
} else {
|
||||
_headerImage = bytesFromPicker;
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
|
||||
if (pickedFile != null) {
|
||||
setState(() {
|
||||
if (isProfile) {
|
||||
_profileImage = File(pickedFile.path);
|
||||
} else {
|
||||
_headerImage = File(pickedFile.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
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: 70, child: TopbarContainer()),
|
||||
),
|
||||
|
||||
SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
// Header image (bisa diubah)
|
||||
SizedBox(height: 80),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 20.0,
|
||||
vertical: 5,
|
||||
),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 241, 238, 238),
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(20),
|
||||
bottom: Radius.circular(20),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withValues(alpha: 0.8),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: Offset(0, 3), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ListView(
|
||||
shrinkWrap: true,
|
||||
padding: EdgeInsets.symmetric(horizontal: 0),
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(0.0),
|
||||
child: Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 0,
|
||||
vertical: 15,
|
||||
),
|
||||
|
||||
height: 100,
|
||||
width: 60,
|
||||
color: Color.fromARGB(0, 1, 10, 225),
|
||||
child: // Profile Picture (bisa diubah)
|
||||
Row(
|
||||
children: [
|
||||
Positioned(
|
||||
top: 0,
|
||||
child: GestureDetector(
|
||||
onTap: () => _pickImage(true),
|
||||
child: Stack(
|
||||
alignment: Alignment.centerLeft,
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 50,
|
||||
backgroundColor: Colors.grey[300],
|
||||
backgroundImage:
|
||||
_profileImage != null
|
||||
? (kIsWeb
|
||||
? MemoryImage(
|
||||
_profileImage,
|
||||
)
|
||||
as ImageProvider
|
||||
: FileImage(_profileImage)
|
||||
as ImageProvider)
|
||||
: null,
|
||||
child:
|
||||
_profileImage == null
|
||||
? Icon(
|
||||
Icons.person,
|
||||
size: 50,
|
||||
color: Colors.white,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
// CircleAvatar(
|
||||
// radius: 20,
|
||||
// backgroundColor: Colors.blue,
|
||||
// child: Icon(
|
||||
// Icons.edit,
|
||||
// color: Colors.white,
|
||||
// size: 15,
|
||||
// ),
|
||||
// ),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 15),
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
"Name",
|
||||
style: TextStyle(
|
||||
color: Colors.blueAccent,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
"Edit Profile",
|
||||
style: TextStyle(
|
||||
color: Colors.blueAccent,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
_buildListItem(Icons.person, "Akun", () {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => AkunSaya()),
|
||||
);
|
||||
}),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 25.0),
|
||||
child: Divider(height: 0),
|
||||
),
|
||||
_buildListItem(Icons.person, "Data Diri", () => {}),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 25.0),
|
||||
child: Divider(height: 0),
|
||||
),
|
||||
_buildListItem(Icons.person, "Point Saya", () => {}),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 25.0,
|
||||
vertical: 0,
|
||||
),
|
||||
child: Divider(height: 0),
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 241, 238, 238),
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(20),
|
||||
bottom: Radius.circular(20),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withValues(alpha: 0.8),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: Offset(0, 3), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildListItem(
|
||||
Icons.lock,
|
||||
"FAQ",
|
||||
() => {},
|
||||
), // bisa diubah disini
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 241, 238, 238),
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(20),
|
||||
bottom: Radius.circular(20),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withValues(alpha: 0.8),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: Offset(0, 3), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildListItem(
|
||||
Icons.language,
|
||||
"Kebijakan & Privasi",
|
||||
() => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 241, 238, 238),
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(20),
|
||||
bottom: Radius.circular(20),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withValues(alpha: 0.8),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: Offset(0, 3), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildListItem(Icons.language, "Bantuan", () => {}),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(255, 241, 238, 238),
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: Radius.circular(20),
|
||||
bottom: Radius.circular(20),
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withValues(alpha: 0.8),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 1,
|
||||
offset: Offset(0, 3), // changes position of shadow
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildListItem(
|
||||
Icons.logout,
|
||||
"Keluar",
|
||||
isLogout: true,
|
||||
() => {},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Bottom Navigation Bar
|
||||
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: 1,
|
||||
left: MediaQuery.of(context).size.width / 2 - 48,
|
||||
child: Transform.translate(
|
||||
offset: Offset(0, -20),
|
||||
child: ScanButton(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildListItem(
|
||||
IconData icon,
|
||||
String label,
|
||||
VoidCallback onTap, {
|
||||
bool isLogout = false,
|
||||
}) {
|
||||
return ListTile(
|
||||
leading: Icon(
|
||||
icon,
|
||||
color:
|
||||
isLogout
|
||||
? const Color.fromARGB(255, 181, 47, 47)
|
||||
: const Color.fromARGB(255, 54, 52, 52),
|
||||
),
|
||||
title: Text(label, style: TextStyle(fontSize: 16, color: Colors.black)),
|
||||
trailing: Icon(Icons.arrow_forward_ios, size: 16),
|
||||
onTap: onTap,
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user