398 lines
15 KiB
Dart
398 lines
15 KiB
Dart
import 'dart:typed_data';
|
|
|
|
import 'package:flutter/material.dart';
|
|
// import 'package:flutter_html/flutter_html.dart';
|
|
import 'package:freekake/components/bottom_navbar.dart';
|
|
import 'package:freekake/components/main_menu.dart';
|
|
import 'package:freekake/components/scan_button.dart';
|
|
import 'package:freekake/components/topbar_container.dart';
|
|
import 'package:freekake/screen/saya/akun_saya.dart';
|
|
import 'package:image_picker/image_picker.dart';
|
|
import 'dart:io';
|
|
|
|
import 'package:flutter/foundation.dart' show kIsWeb;
|
|
|
|
class ProfileScreen extends StatefulWidget {
|
|
const ProfileScreen({super.key});
|
|
|
|
@override
|
|
_ProfileScreenState createState() => _ProfileScreenState();
|
|
}
|
|
|
|
class _ProfileScreenState extends State<ProfileScreen> {
|
|
// File? _profileImage;
|
|
// File? _headerImage;
|
|
// final ImagePicker _picker = ImagePicker();
|
|
dynamic _profileImage;
|
|
dynamic _headerImage;
|
|
ImageProvider? imageProvider;
|
|
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) {
|
|
final imageFile = File(pickedFile.path);
|
|
setState(() {
|
|
if (isProfile) {
|
|
_profileImage = imageFile;
|
|
} else {
|
|
_headerImage = imageFile;
|
|
}
|
|
|
|
imageProvider =
|
|
kIsWeb ? MemoryImage(_profileImage) : FileImage(_profileImage);
|
|
});
|
|
} else {
|
|
imageProvider = AssetImage("assets/images/luffy.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final buttonScanSize = screenWidth * 0.20;
|
|
final double bottomPadding = (9000 / screenWidth).clamp(0, 0.2);
|
|
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
|
|
? Image.asset(
|
|
"assets/images/luffy.png",
|
|
)
|
|
: 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(
|
|
"Luffy",
|
|
style: TextStyle(
|
|
color: const Color.fromARGB(
|
|
255,
|
|
0,
|
|
0,
|
|
0,
|
|
),
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
"Luffy Kun",
|
|
style: TextStyle(
|
|
color: const Color.fromARGB(
|
|
255,
|
|
0,
|
|
0,
|
|
0,
|
|
),
|
|
fontWeight: FontWeight.normal,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
_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: bottomPadding * 98,
|
|
left: (screenWidth - buttonScanSize) / 2,
|
|
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,
|
|
);
|
|
}
|
|
}
|