base
This commit is contained in:
='fauz
@@ -0,0 +1,28 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/navbar_container.dart';
|
||||
import 'package:furibase/components/navbar_shape_1.dart';
|
||||
import 'package:furibase/components/navbar_shape_2.dart';
|
||||
import 'package:furibase/components/navbar_shape_3.dart';
|
||||
import 'package:furibase/components/custom_shape.dart';
|
||||
|
||||
class BottomNavbar extends StatefulWidget {
|
||||
const BottomNavbar({super.key});
|
||||
|
||||
@override
|
||||
State<BottomNavbar> createState() => _BottomNavbarState();
|
||||
}
|
||||
|
||||
class _BottomNavbarState extends State<BottomNavbar> {
|
||||
Widget build(BuildContext context) {
|
||||
final Size screenSize = MediaQuery.of(context).size;
|
||||
return CustomPaint(
|
||||
size: Size(screenSize.width, 100.0),
|
||||
painter:
|
||||
// BNBCustomPainter1(),
|
||||
// BNBCustomPainter2(),
|
||||
BNBCustomPainter3(),
|
||||
// RPSCustomPainter(),
|
||||
// MyShape(),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class BuildcardInfo extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String text;
|
||||
final double? width; // = 120,
|
||||
final IconData? extraIcon; //,
|
||||
final String? extraText; //,
|
||||
const BuildcardInfo({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.text,
|
||||
required this.width,
|
||||
this.extraIcon,
|
||||
this.extraText,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 36,
|
||||
width: width ?? 120,
|
||||
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 5),
|
||||
decoration: BoxDecoration(
|
||||
color: Color.fromARGB(200, 255, 255, 255),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
// color: Color.fromARGB(255, 214, 213, 121),
|
||||
blurRadius: 0,
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
IconTheme(
|
||||
data: IconThemeData(
|
||||
size: 20,
|
||||
color: Color.fromARGB(255, 244, 189, 72),
|
||||
),
|
||||
child: Icon(icon),
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: const Color.fromARGB(255, 0, 0, 0),
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (extraIcon != null && extraText != null) ...[
|
||||
SizedBox(width: 6),
|
||||
IconTheme(
|
||||
data: IconThemeData(
|
||||
size: 18,
|
||||
color: Color.fromARGB(255, 244, 189, 72),
|
||||
),
|
||||
child: Icon(extraIcon),
|
||||
),
|
||||
SizedBox(width: 4),
|
||||
Text(
|
||||
extraText ?? '',
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color.fromARGB(255, 0, 0, 0),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class CardList extends StatelessWidget {
|
||||
const CardList({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
|
||||
elevation: 5,
|
||||
color: const Color.fromARGB(225, 79, 76, 182),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(
|
||||
10.0,
|
||||
), // Opsional: membuat gambar lebih rounded
|
||||
child: Image.asset(
|
||||
'images/cepott.png', // Ganti dengan path gambar Anda
|
||||
width: 80, // Atur ukuran gambar
|
||||
height: 120,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
"Judul Card",
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 5, width: 10),
|
||||
Text(
|
||||
"Deskripsi singkat tentang item ini. karena ini sangat panjang maka ini akan dipotong",
|
||||
style: const TextStyle(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.normal,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: const Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text("50"),
|
||||
SizedBox(width: 40),
|
||||
Text("100"),
|
||||
],
|
||||
),
|
||||
Text("Quiz"),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
|
||||
class CollectionContainer extends StatelessWidget {
|
||||
final String? label;
|
||||
final String? imagesrc;
|
||||
final String? imageSvg;
|
||||
final double? width;
|
||||
final double? height;
|
||||
final double? iconw;
|
||||
final double? iconh;
|
||||
final VoidCallback onTapAc;
|
||||
final Color? textColor;
|
||||
final double? lblSize;
|
||||
final bool? circle;
|
||||
const CollectionContainer({
|
||||
super.key,
|
||||
this.label,
|
||||
this.imagesrc,
|
||||
this.width,
|
||||
this.height,
|
||||
required this.onTapAc,
|
||||
this.textColor,
|
||||
this.imageSvg,
|
||||
this.iconh,
|
||||
this.iconw,
|
||||
this.lblSize,
|
||||
this.circle,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: width ?? 130,
|
||||
height: height ?? 150,
|
||||
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
|
||||
child: GestureDetector(
|
||||
onTap: onTapAc,
|
||||
child: Card(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
),
|
||||
elevation: 5,
|
||||
color: const Color.fromARGB(255, 255, 255, 255).withOpacity(0.5),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
child:
|
||||
imageSvg != null && imageSvg!.isNotEmpty
|
||||
? Container(
|
||||
decoration:
|
||||
(circle ?? false)
|
||||
? BoxDecoration(
|
||||
color: const Color.fromARGB(
|
||||
225,
|
||||
79,
|
||||
76,
|
||||
182,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
)
|
||||
: null,
|
||||
child: Container(
|
||||
decoration:
|
||||
(circle ?? false)
|
||||
? BoxDecoration(
|
||||
color: const Color.fromARGB(
|
||||
225,
|
||||
79,
|
||||
76,
|
||||
182,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
shape: BoxShape.circle,
|
||||
)
|
||||
: null,
|
||||
child: Container(
|
||||
decoration:
|
||||
(circle ?? false)
|
||||
? BoxDecoration(
|
||||
color: const Color.fromARGB(
|
||||
225,
|
||||
79,
|
||||
76,
|
||||
182,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
shape: BoxShape.circle,
|
||||
)
|
||||
: null,
|
||||
child: SvgPicture.asset(
|
||||
imageSvg!,
|
||||
width: 20,
|
||||
height: 20,
|
||||
colorFilter: const ColorFilter.mode(
|
||||
Color.fromARGB(255, 118, 3, 3),
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: imagesrc != null && imagesrc!.isNotEmpty
|
||||
? Image.asset(
|
||||
imagesrc!,
|
||||
width: iconw ?? 60,
|
||||
height: iconh ?? 60,
|
||||
fit: BoxFit.cover,
|
||||
)
|
||||
: const SizedBox(
|
||||
width: 60,
|
||||
height: 60,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.image_not_supported,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
// color: Colors.amber,
|
||||
child: Text(
|
||||
label ?? '',
|
||||
style: TextStyle(
|
||||
fontSize: lblSize ?? 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
|
||||
class CollectionContainer extends StatelessWidget {
|
||||
final String? label;
|
||||
final String? imagesrc;
|
||||
final String? imageSvg;
|
||||
final double? width;
|
||||
final double? height;
|
||||
final VoidCallback onTapAc;
|
||||
final Color? textColor;
|
||||
final double? iconw;
|
||||
final double? iconh;
|
||||
final double? lblSize;
|
||||
final bool? circle;
|
||||
final Color? colorContiner;
|
||||
|
||||
const CollectionContainer({
|
||||
Key? key,
|
||||
this.label,
|
||||
this.imagesrc,
|
||||
this.imageSvg,
|
||||
this.width,
|
||||
this.height,
|
||||
required this.onTapAc,
|
||||
this.textColor,
|
||||
this.iconh,
|
||||
this.iconw,
|
||||
this.lblSize,
|
||||
this.circle,
|
||||
this.colorContiner,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: onTapAc,
|
||||
child: Container(
|
||||
// padding: EdgeInsets.only(top: 20),
|
||||
width: width ?? 130,
|
||||
height: height ?? 170,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromARGB(0, 83, 246, 8),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Card(
|
||||
// shape: RoundedRectangleBorder(
|
||||
// borderRadius: BorderRadius.circular(10.0),
|
||||
// ),
|
||||
elevation: 5,
|
||||
color: colorContiner ?? Color.fromRGBO(76, 77, 164, 1.0),
|
||||
child: Stack(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 30.0),
|
||||
child:
|
||||
imageSvg != null && imageSvg!.isNotEmpty
|
||||
? Container(
|
||||
decoration:
|
||||
(circle ?? false)
|
||||
? BoxDecoration(
|
||||
color: const Color.fromARGB(
|
||||
224,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
)
|
||||
: null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(
|
||||
8.0,
|
||||
), // Tambahkan padding di sini
|
||||
child: SvgPicture.asset(
|
||||
imageSvg!,
|
||||
width: iconw ?? 40,
|
||||
height: iconh ?? 40,
|
||||
colorFilter: const ColorFilter.mode(
|
||||
Color.fromARGB(255, 242, 242, 242),
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: imagesrc != null && imagesrc!.isNotEmpty
|
||||
? Image.asset(imagesrc!, fit: BoxFit.cover)
|
||||
: const SizedBox(
|
||||
// width: 60,
|
||||
// height: 60,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.image_not_supported,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
bottom: 10,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Text(
|
||||
label ?? '',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: lblSize ?? 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textColor ?? Colors.black,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/navbar_shape_2.dart';
|
||||
|
||||
class CustomShape extends StatelessWidget {
|
||||
const CustomShape({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var screen = MediaQuery.of(context).size;
|
||||
return Positioned(
|
||||
child: Container(
|
||||
width: screen.width,
|
||||
height: screen.height,
|
||||
color: const Color.fromARGB(255, 38, 139, 92),
|
||||
child: CustomPaint(child: CustomPaint(painter: RPSCustomPainter())),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class RPSCustomPainter extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
// Layer 1
|
||||
|
||||
Paint paint_fill_0 =
|
||||
Paint()
|
||||
..color = const Color.fromARGB(255, 189, 18, 18)
|
||||
..style = PaintingStyle.fill
|
||||
..strokeWidth = size.width * 0.00
|
||||
..strokeCap = StrokeCap.butt
|
||||
..strokeJoin = StrokeJoin.miter;
|
||||
|
||||
Path path_0 = Path();
|
||||
path_0.moveTo(size.width * 0.8040007, size.height * 0.1994400);
|
||||
path_0.cubicTo(
|
||||
size.width * 0.3471602,
|
||||
size.height * 0.1989000,
|
||||
size.width * 0.3471602,
|
||||
size.height * 0.1989000,
|
||||
size.width * 0.1948800,
|
||||
size.height * 0.1987200,
|
||||
);
|
||||
path_0.cubicTo(
|
||||
size.width * 0.1333300,
|
||||
size.height * 0.2084400,
|
||||
size.width * 0.1371800,
|
||||
size.height * 0.3968400,
|
||||
size.width * 0.1964501,
|
||||
size.height * 0.4014400,
|
||||
);
|
||||
path_0.cubicTo(
|
||||
size.width * 0.3483083,
|
||||
size.height * 0.4004200,
|
||||
size.width * 0.6520247,
|
||||
size.height * 0.3983800,
|
||||
size.width * 0.8038829,
|
||||
size.height * 0.3973600,
|
||||
);
|
||||
path_0.cubicTo(
|
||||
size.width * 0.8621500,
|
||||
size.height * 0.3952400,
|
||||
size.width * 0.8608700,
|
||||
size.height * 0.2083600,
|
||||
size.width * 0.8040007,
|
||||
size.height * 0.1994400,
|
||||
);
|
||||
path_0.close();
|
||||
|
||||
canvas.drawPath(path_0, paint_fill_0);
|
||||
|
||||
// Layer 1
|
||||
|
||||
Paint paint_stroke_0 =
|
||||
Paint()
|
||||
..color = const Color.fromARGB(255, 33, 150, 243)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = size.width * 0.00
|
||||
..strokeCap = StrokeCap.butt
|
||||
..strokeJoin = StrokeJoin.miter;
|
||||
|
||||
canvas.drawPath(path_0, paint_stroke_0);
|
||||
|
||||
// Layer 1
|
||||
|
||||
Paint paint_fill_1 =
|
||||
Paint()
|
||||
..color = const Color.fromARGB(255, 28, 163, 52)
|
||||
..style = PaintingStyle.fill
|
||||
..strokeWidth = size.width * 0.00
|
||||
..strokeCap = StrokeCap.butt
|
||||
..strokeJoin = StrokeJoin.miter;
|
||||
|
||||
Path path_1 = Path();
|
||||
path_1.moveTo(size.width * 0.4000300, size.height * 0.1987400);
|
||||
path_1.lineTo(size.width * 0.6010900, size.height * 0.2005400);
|
||||
path_1.quadraticBezierTo(
|
||||
size.width * 0.5764200,
|
||||
size.height * 0.1947400,
|
||||
size.width * 0.5721900,
|
||||
size.height * 0.1545000,
|
||||
);
|
||||
path_1.cubicTo(
|
||||
size.width * 0.5500300,
|
||||
size.height * 0.0020000,
|
||||
size.width * 0.4492300,
|
||||
size.height * 0.0042400,
|
||||
size.width * 0.4271600,
|
||||
size.height * 0.1487400,
|
||||
);
|
||||
path_1.quadraticBezierTo(
|
||||
size.width * 0.4232300,
|
||||
size.height * 0.1963200,
|
||||
size.width * 0.4000300,
|
||||
size.height * 0.1987400,
|
||||
);
|
||||
path_1.close();
|
||||
|
||||
canvas.drawPath(path_1, paint_fill_1);
|
||||
|
||||
// Layer 1
|
||||
|
||||
Paint paint_stroke_1 =
|
||||
Paint()
|
||||
..color = const Color.fromARGB(255, 33, 150, 243)
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = size.width * 0.00
|
||||
..strokeCap = StrokeCap.butt
|
||||
..strokeJoin = StrokeJoin.miter;
|
||||
|
||||
canvas.drawPath(path_1, paint_stroke_1);
|
||||
|
||||
// layer 2
|
||||
// Paint paint_fill_0 =
|
||||
// Paint()
|
||||
// ..color = const Color.fromARGB(255, 28, 163, 52)
|
||||
// ..style = PaintingStyle.fill
|
||||
// ..strokeWidth = size.width * 0.00
|
||||
// ..strokeCap = StrokeCap.butt
|
||||
// ..strokeJoin = StrokeJoin.miter;
|
||||
|
||||
// Path path_0 = Path();
|
||||
path_0.moveTo(size.width * 0.4000300, size.height * 0.1987400);
|
||||
path_0.lineTo(size.width * 0.6010900, size.height * 0.2005400);
|
||||
path_0.quadraticBezierTo(
|
||||
size.width * 0.5764200,
|
||||
size.height * 0.1947400,
|
||||
size.width * 0.5721900,
|
||||
size.height * 0.1545000,
|
||||
);
|
||||
path_0.cubicTo(
|
||||
size.width * 0.5500300,
|
||||
size.height * 0.0020000,
|
||||
size.width * 0.4492300,
|
||||
size.height * 0.0042400,
|
||||
size.width * 0.4271600,
|
||||
size.height * 0.1487400,
|
||||
);
|
||||
path_0.quadraticBezierTo(
|
||||
size.width * 0.4232300,
|
||||
size.height * 0.1963200,
|
||||
size.width * 0.4000300,
|
||||
size.height * 0.1987400,
|
||||
);
|
||||
path_0.close();
|
||||
|
||||
canvas.drawPath(path_0, paint_fill_0);
|
||||
|
||||
// Layer 1
|
||||
|
||||
// Paint paint_stroke_0 =
|
||||
// Paint()
|
||||
// ..color = const Color.fromARGB(255, 33, 150, 243)
|
||||
// ..style = PaintingStyle.stroke
|
||||
// ..strokeWidth = size.width * 0.00
|
||||
// ..strokeCap = StrokeCap.butt
|
||||
// ..strokeJoin = StrokeJoin.miter;
|
||||
|
||||
// canvas.drawPath(path_0, paint_stroke_0);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant CustomPainter oldDelegate) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/bottom_navbar.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/koleksi_screen.dart';
|
||||
import 'package:furibase/screen/pustaka_screen.dart';
|
||||
import 'package:furibase/screen/saya/profile_screen.dart';
|
||||
|
||||
class MainMenu extends StatelessWidget {
|
||||
const MainMenu({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Size size = MediaQuery.of(context).size;
|
||||
return Container(
|
||||
color: Colors.transparent,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
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:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => KoleksiScreen()),
|
||||
),
|
||||
},
|
||||
),
|
||||
SizedBox(width: 120),
|
||||
MenuButton(
|
||||
label: "Pustaka",
|
||||
icon: 'icons/Pustaka.svg',
|
||||
onPress:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => PustakaScreen()),
|
||||
),
|
||||
},
|
||||
),
|
||||
MenuButton(
|
||||
label: "Saya",
|
||||
icon: 'icons/Saya.svg',
|
||||
onPress:
|
||||
() => {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => ProfileScreen()),
|
||||
),
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
|
||||
class MenuButton extends StatelessWidget {
|
||||
final String? label;
|
||||
final String? icon;
|
||||
final VoidCallback? onPress;
|
||||
final bool? isSelected;
|
||||
final double? w;
|
||||
final double? h;
|
||||
|
||||
const MenuButton({
|
||||
super.key,
|
||||
this.label,
|
||||
this.icon,
|
||||
this.onPress,
|
||||
this.isSelected,
|
||||
this.w,
|
||||
this.h,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: SvgPicture.asset(
|
||||
icon ?? '',
|
||||
width: w ?? 28,
|
||||
height: h ?? 28,
|
||||
// allowDrawingOutsideViewBox: true,
|
||||
colorFilter: ColorFilter.mode(
|
||||
Color.fromARGB(255, 255, 255, 255),
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
),
|
||||
onPressed: onPress,
|
||||
),
|
||||
Text(
|
||||
label ?? '',
|
||||
style: TextStyle(
|
||||
color: Color.fromARGB(255, 239, 224, 232),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/navbar_shape_2.dart';
|
||||
|
||||
class NavbarContainer extends StatelessWidget {
|
||||
const NavbarContainer({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var screen = MediaQuery.of(context).size;
|
||||
return Positioned(
|
||||
child: Container(
|
||||
width: screen.width,
|
||||
height: screen.height,
|
||||
color: const Color.fromARGB(255, 38, 139, 92),
|
||||
child: CustomPaint(child: CustomPaint(painter: MyShape())),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyShape extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
// TODO: implement paint
|
||||
Paint paint =
|
||||
new Paint()
|
||||
..color = const Color.fromARGB(255, 166, 12, 66)
|
||||
..style = PaintingStyle.fill;
|
||||
|
||||
Path path = Path();
|
||||
path.moveTo(20, size.height / 2); // Start at bottom-left
|
||||
|
||||
// shape curve kiri
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.04,
|
||||
size.height * 0.7, // Control point
|
||||
size.width * 0.09, // almost half
|
||||
size.height * 0.8, // End point
|
||||
);
|
||||
|
||||
path.lineTo(size.width * 0.92, size.height - 20);
|
||||
|
||||
// Curve kanan bawah
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.96,
|
||||
size.height * 0.7, // Control point
|
||||
size.width * 0.964,
|
||||
size.height / 2, // End point (bottom-right)
|
||||
);
|
||||
|
||||
// curve ujung kanan atas
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.95,
|
||||
size.height * 0.28, // Control point
|
||||
size.width * 0.91,
|
||||
size.height * 0.23, // End point (bottom-right)
|
||||
);
|
||||
|
||||
path.lineTo(size.width / 2 + 80, size.height * 0.23);
|
||||
// ==========
|
||||
// sebelum curve tengah
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 + 30,
|
||||
18,
|
||||
size.width / 2 + 10,
|
||||
5, // End point (bottom-right)
|
||||
);
|
||||
|
||||
// ==========================================
|
||||
//==========================================
|
||||
// curve tengah sebelah kanan
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 - 20,
|
||||
13,
|
||||
size.width / 2 + 2,
|
||||
size.height * 0.030,
|
||||
);
|
||||
|
||||
// sebelah kiri curve
|
||||
path.quadraticBezierTo(
|
||||
(size.width / 2) * 0.92,
|
||||
size.height * 0.189,
|
||||
size.width / 2 - 40,
|
||||
18,
|
||||
);
|
||||
|
||||
// ===============================================
|
||||
// setelah curve tengah
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 - 30,
|
||||
size.height * 0.188, // Control point
|
||||
size.width / 2 - 80,
|
||||
20, // End point (bottom-right)
|
||||
);
|
||||
path.lineTo(size.width * 0.1, 20);
|
||||
|
||||
path.quadraticBezierTo(
|
||||
24,
|
||||
size.height * 0.2, // Control point
|
||||
20,
|
||||
size.height / 2, // End point (bottom-right)
|
||||
);
|
||||
|
||||
path.close();
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant CustomPainter oldDelegate) {
|
||||
// TODO: implement shouldRepaint
|
||||
throw false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class BNBCustomPainter1 extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
debugPrint("Drawing navbar...");
|
||||
Paint paint =
|
||||
new Paint()
|
||||
..color = const Color.fromARGB(255, 79, 76, 182)
|
||||
..style = PaintingStyle.fill;
|
||||
|
||||
// Path path = Path();
|
||||
// path.moveTo(0, 10); // Start
|
||||
// path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
|
||||
// path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
|
||||
// path.arcToPoint(
|
||||
// Offset(size.width * 0.60, 20),
|
||||
// radius: Radius.circular(20.0),
|
||||
// clockwise: false,
|
||||
// );
|
||||
// path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.63, 0);
|
||||
// path.quadraticBezierTo(size.width * 0.88, 0, size.width, 10);
|
||||
// path.lineTo(size.width, size.height);
|
||||
// path.lineTo(0, size.height);
|
||||
// path.lineTo(0, 20);
|
||||
// canvas.drawShadow(path, Colors.black, 5, true);
|
||||
// canvas.drawPath(path, paint);
|
||||
|
||||
// Path path = Path();
|
||||
|
||||
// double cornerRadius = 35; // Radius untuk sisi kiri & kanan
|
||||
// double centerCircleRadius = 40; // Radius untuk lengkungan tengah
|
||||
|
||||
// // Mulai dari sisi kiri bawah
|
||||
// path.moveTo(cornerRadius, size.height);
|
||||
|
||||
// // Buat lengkungan di sisi kiri
|
||||
// path.quadraticBezierTo(0, size.height, 0, size.height - cornerRadius);
|
||||
|
||||
// // Tarik garis lurus ke atas sebelum lengkungan tengah
|
||||
// path.lineTo(0, cornerRadius);
|
||||
|
||||
// // Kurva sisi kiri menuju bagian atas
|
||||
// path.quadraticBezierTo(0, 0, cornerRadius, 0);
|
||||
|
||||
// // Garis lurus ke bagian tengah sebelum lekukan
|
||||
// path.lineTo(size.width / 2 - centerCircleRadius - 20, 0);
|
||||
|
||||
// // *** Lengkungan ke atas untuk ikon tengah ***
|
||||
// path.quadraticBezierTo(
|
||||
// size.width / 2 - centerCircleRadius,
|
||||
// -centerCircleRadius,
|
||||
// size.width / 2,
|
||||
// -centerCircleRadius,
|
||||
// );
|
||||
|
||||
// path.quadraticBezierTo(
|
||||
// size.width / 2 + centerCircleRadius,
|
||||
// -centerCircleRadius,
|
||||
// size.width / 2 + centerCircleRadius + 20,
|
||||
// 0,
|
||||
// );
|
||||
|
||||
// // Lanjutkan garis ke kanan
|
||||
// path.lineTo(size.width - cornerRadius, 0);
|
||||
|
||||
// // Kurva sisi kanan
|
||||
// path.quadraticBezierTo(size.width, 0, size.width, cornerRadius);
|
||||
|
||||
// // Tarik garis lurus ke bawah
|
||||
// path.lineTo(size.width, size.height - cornerRadius);
|
||||
|
||||
// // Buat lengkungan di sisi kanan
|
||||
// path.quadraticBezierTo(
|
||||
// size.width,
|
||||
// size.height,
|
||||
// size.width - cornerRadius,
|
||||
// size.height,
|
||||
// );
|
||||
|
||||
// // Tarik garis ke kiri hingga kembali ke titik awal
|
||||
// path.close();
|
||||
|
||||
// canvas.drawPath(path, paint);
|
||||
|
||||
Path path = Path();
|
||||
|
||||
double cornerRadius = 45; // Radius sudut kiri & kanan
|
||||
double centerCircleRadius = 40; // Meningkatkan puncak 10px dari sebelumnya
|
||||
|
||||
// Mulai dari sisi kiri bawah
|
||||
path.moveTo(cornerRadius, size.height);
|
||||
|
||||
// Buat lengkungan di sisi kiri
|
||||
path.quadraticBezierTo(0, size.height, 0, size.height - cornerRadius);
|
||||
|
||||
// Tarik garis lurus ke atas sebelum lengkungan tengah
|
||||
path.lineTo(0, cornerRadius);
|
||||
|
||||
// Kurva sisi kiri menuju bagian atas
|
||||
path.quadraticBezierTo(0, 0, cornerRadius, 0);
|
||||
|
||||
// Garis lurus ke bagian tengah sebelum lekukan
|
||||
path.lineTo(size.width / 2 - centerCircleRadius - 55, 0);
|
||||
|
||||
// *** Transisi menuju puncak gunung lebih smooth ***
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 - centerCircleRadius - 20,
|
||||
-20,
|
||||
size.width / 2 - centerCircleRadius,
|
||||
-35,
|
||||
);
|
||||
|
||||
// *** Puncak lebih tinggi & curve lebih halus ***
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2,
|
||||
-centerCircleRadius - 20,
|
||||
size.width / 2 + centerCircleRadius,
|
||||
-35,
|
||||
);
|
||||
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 + centerCircleRadius + 20,
|
||||
-20,
|
||||
size.width / 2 + centerCircleRadius + 55,
|
||||
0,
|
||||
);
|
||||
|
||||
// Lanjutkan garis ke kanan
|
||||
path.lineTo(size.width - cornerRadius, 0);
|
||||
|
||||
// Kurva sisi kanan
|
||||
path.quadraticBezierTo(size.width, 0, size.width, cornerRadius);
|
||||
|
||||
// Tarik garis lurus ke bawah
|
||||
path.lineTo(size.width, size.height - cornerRadius);
|
||||
|
||||
// Buat lengkungan di sisi kanan
|
||||
path.quadraticBezierTo(
|
||||
size.width,
|
||||
size.height,
|
||||
size.width - cornerRadius,
|
||||
size.height,
|
||||
);
|
||||
|
||||
// Tutup path
|
||||
path.close();
|
||||
|
||||
// Gambar path
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class BNBCustomPainter2 extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
debugPrint("Drawing navbar...");
|
||||
Paint paint =
|
||||
new Paint()
|
||||
..color = const Color.fromARGB(255, 79, 76, 182)
|
||||
..style = PaintingStyle.fill;
|
||||
|
||||
// Path path = Path();
|
||||
// path.moveTo(0, 10); // Start
|
||||
// path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
|
||||
// path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
|
||||
// path.arcToPoint(
|
||||
// Offset(size.width * 0.60, 20),
|
||||
// radius: Radius.circular(20.0),
|
||||
// clockwise: false,
|
||||
// );
|
||||
// path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.63, 0);
|
||||
// path.quadraticBezierTo(size.width * 0.88, 0, size.width, 10);
|
||||
// path.lineTo(size.width, size.height);
|
||||
// path.lineTo(0, size.height);
|
||||
// path.lineTo(0, 20);
|
||||
// canvas.drawShadow(path, Colors.black, 5, true);
|
||||
// canvas.drawPath(path, paint);
|
||||
|
||||
Path path = Path();
|
||||
|
||||
double cornerRadius = 35; // Radius untuk sisi kiri & kanan
|
||||
double centerCircleRadius = 40; // Radius untuk lengkungan tengah
|
||||
|
||||
// Mulai dari sisi kiri bawah
|
||||
path.moveTo(cornerRadius, size.height);
|
||||
|
||||
// Buat lengkungan di sisi kiri
|
||||
path.quadraticBezierTo(0, size.height, 0, size.height - cornerRadius);
|
||||
|
||||
// Tarik garis lurus ke atas sebelum lengkungan tengah
|
||||
path.lineTo(0, cornerRadius);
|
||||
|
||||
// Kurva sisi kiri menuju bagian atas
|
||||
path.quadraticBezierTo(0, 0, cornerRadius, 0);
|
||||
|
||||
// Garis lurus ke bagian tengah sebelum lekukan
|
||||
path.lineTo(size.width / 2 - centerCircleRadius - 20, 0);
|
||||
|
||||
// *** Lengkungan ke atas untuk ikon tengah ***
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 - centerCircleRadius,
|
||||
-centerCircleRadius,
|
||||
size.width / 2,
|
||||
-centerCircleRadius,
|
||||
);
|
||||
|
||||
path.quadraticBezierTo(
|
||||
size.width / 2 + centerCircleRadius,
|
||||
-centerCircleRadius,
|
||||
size.width / 2 + centerCircleRadius + 20,
|
||||
0,
|
||||
);
|
||||
|
||||
// Lanjutkan garis ke kanan
|
||||
path.lineTo(size.width - cornerRadius, 0);
|
||||
|
||||
// Kurva sisi kanan
|
||||
path.quadraticBezierTo(size.width, 0, size.width, cornerRadius);
|
||||
|
||||
// Tarik garis lurus ke bawah
|
||||
path.lineTo(size.width, size.height - cornerRadius);
|
||||
|
||||
// Buat lengkungan di sisi kanan
|
||||
path.quadraticBezierTo(
|
||||
size.width,
|
||||
size.height,
|
||||
size.width - cornerRadius,
|
||||
size.height,
|
||||
);
|
||||
|
||||
// Tarik garis ke kiri hingga kembali ke titik awal
|
||||
path.close();
|
||||
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class BNBCustomPainter3 extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
debugPrint("Drawing navbar...");
|
||||
Paint paint =
|
||||
new Paint()
|
||||
..color = const Color.fromARGB(255, 79, 76, 182)
|
||||
..style = PaintingStyle.fill;
|
||||
|
||||
Path path = Path();
|
||||
path.moveTo(0, 10); // Start
|
||||
path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
|
||||
path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
|
||||
path.arcToPoint(
|
||||
Offset(size.width * 0.60, 20),
|
||||
radius: Radius.circular(20.0),
|
||||
clockwise: false,
|
||||
);
|
||||
path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.63, 0);
|
||||
path.quadraticBezierTo(size.width * 0.88, 0, size.width, 10);
|
||||
path.lineTo(size.width, size.height);
|
||||
path.lineTo(0, size.height);
|
||||
path.lineTo(0, 20);
|
||||
canvas.drawShadow(path, Colors.black, 5, true);
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(CustomPainter oldDelegate) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/svg.dart';
|
||||
|
||||
class ScanButton extends StatelessWidget {
|
||||
const ScanButton({super.key});
|
||||
static const Color transparent = Color(0xFFFFFFF);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Expanded(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: const Color.fromARGB(223, 67, 63, 179),
|
||||
),
|
||||
padding: EdgeInsets.all(10),
|
||||
child: IconButton(
|
||||
icon: SvgPicture.asset(
|
||||
'icons/Scan.svg',
|
||||
width: 60,
|
||||
height: 60,
|
||||
colorFilter: ColorFilter.mode(
|
||||
Color.fromARGB(255, 217, 219, 227),
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
),
|
||||
onPressed: () {},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
|
||||
class TabMenuButton extends StatelessWidget {
|
||||
final String? label;
|
||||
final String? icon;
|
||||
final VoidCallback onPress;
|
||||
final bool isSelected;
|
||||
|
||||
const TabMenuButton({
|
||||
super.key,
|
||||
this.label,
|
||||
this.icon,
|
||||
required this.onPress,
|
||||
this.isSelected = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null && icon!.isNotEmpty)
|
||||
IconButton(
|
||||
icon: SvgPicture.asset(
|
||||
icon!,
|
||||
width: 28,
|
||||
height: 28,
|
||||
colorFilter: ColorFilter.mode(
|
||||
isSelected
|
||||
? const Color.fromARGB(255, 106, 24, 207)
|
||||
: Colors.white,
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
),
|
||||
onPressed: onPress, // Semua aksi klik hanya lewat satu function
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: onPress, // Menggunakan satu event handler saja
|
||||
child: Container(
|
||||
width: 120,
|
||||
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
|
||||
decoration: BoxDecoration(
|
||||
color:
|
||||
isSelected
|
||||
? const Color.fromARGB(255, 199, 204, 212).withOpacity(0)
|
||||
: Colors.transparent,
|
||||
|
||||
border:
|
||||
isSelected
|
||||
? const Border(
|
||||
top: BorderSide(color: Colors.white, width: 2),
|
||||
)
|
||||
: null,
|
||||
// borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
label ?? '',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color:
|
||||
isSelected
|
||||
? const Color.fromARGB(255, 255, 255, 255)
|
||||
: const Color.fromARGB(255, 0, 0, 0),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class TopbarContainer extends StatefulWidget {
|
||||
const TopbarContainer({super.key});
|
||||
|
||||
@override
|
||||
State<TopbarContainer> createState() => _TopbarContainerState();
|
||||
}
|
||||
|
||||
class _TopbarContainerState extends State<TopbarContainer> {
|
||||
Widget build(BuildContext context) {
|
||||
final Size size = MediaQuery.of(context).size;
|
||||
return Container(
|
||||
width: size.width,
|
||||
height: 120,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color.fromRGBO(76, 77, 164, 1.0),
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(25),
|
||||
bottomRight: Radius.circular(25),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ColorHelper {
|
||||
static Color hexToColor(String hex) {
|
||||
hex = hex.replaceAll('#', '').replaceFirst('0x', '');
|
||||
if (hex.length == 6) hex = 'FF$hex'; // Tambah alpha jika belum ada
|
||||
return Color(int.parse('0x$hex'));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:furibase/components/navbar_container.dart';
|
||||
import 'package:furibase/providers/character_provider.dart';
|
||||
import 'package:furibase/screen/Home_screen.dart';
|
||||
import 'package:furibase/screen/drraw_screen.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ChangeNotifierProvider(
|
||||
create: (context) => CharacterProvider(),
|
||||
child: MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'AR Character App',
|
||||
theme: ThemeData.dark(),
|
||||
home:
|
||||
// DrawScreen(),
|
||||
HomeScreen(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
class AccessoryProvider extends ChangeNotifier {
|
||||
List<String> _accessories = [];
|
||||
|
||||
List<String> get accessories => _accessories;
|
||||
|
||||
AccessoryProvider() {
|
||||
_loadAccessories();
|
||||
}
|
||||
|
||||
void _loadAccessories() async {
|
||||
SharedPreferences prefs = await SharedPreferences.getInstance();
|
||||
_accessories = prefs.getStringList("accessories") ?? [];
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void addAccessory(String accessoryName) async {
|
||||
if (!_accessories.contains(accessoryName)) {
|
||||
_accessories.add(accessoryName);
|
||||
SharedPreferences prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setStringList("accessories", _accessories);
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
void removeAccessory(String accessoryName) async {
|
||||
_accessories.remove(accessoryName);
|
||||
SharedPreferences prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setStringList("accessories", _accessories);
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
class CharacterProvider extends ChangeNotifier {
|
||||
List<String> _characters = [];
|
||||
|
||||
List<String> get characters => _characters;
|
||||
String _currentAccessory = "Tanpa Aksesori";
|
||||
|
||||
String get currentAccessory => _currentAccessory;
|
||||
|
||||
CharacterProvider() {
|
||||
_loadCharacters();
|
||||
}
|
||||
|
||||
void _loadCharacters() async {
|
||||
SharedPreferences prefs = await SharedPreferences.getInstance();
|
||||
_characters = prefs.getStringList("characters") ?? [];
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void addCharacter(String characterName) async {
|
||||
if (!_characters.contains(characterName)) {
|
||||
_characters.add(characterName);
|
||||
SharedPreferences prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setStringList("characters", _characters);
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
|
||||
void removeCharacter(String characterName) async {
|
||||
_characters.remove(characterName);
|
||||
SharedPreferences prefs = await SharedPreferences.getInstance();
|
||||
await prefs.setStringList("characters", _characters);
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
void applyAccessory(String accessory) {
|
||||
_currentAccessory = accessory;
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
Reference in New Issue
Block a user