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:image_picker_web/image_picker_web.dart'; import 'package:flutter/foundation.dart' show kIsWeb; class ProfileScreen extends StatefulWidget { const ProfileScreen({super.key}); @override _ProfileScreenState createState() => _ProfileScreenState(); } class _ProfileScreenState extends State { // File? _profileImage; // File? _headerImage; // final ImagePicker _picker = ImagePicker(); dynamic _profileImage; dynamic _headerImage; ImageProvider? imageProvider; final ImagePicker _picker = ImagePicker(); Future _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, ); } }