366 lines
14 KiB
Dart
366 lines
14 KiB
Dart
import 'dart:io';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:playmaker/classe/theme.dart';
|
|
import 'package:supabase_flutter/supabase_flutter.dart';
|
|
import 'package:image_picker/image_picker.dart';
|
|
|
|
import '../utils/size_extension.dart';
|
|
import 'login.dart'; // 👇 Necessário para o redirecionamento do logout
|
|
import '../main.dart'; // 👇 OBRIGATÓRIO PARA LER A VARIÁVEL "themeNotifier"
|
|
|
|
class SettingsScreen extends StatefulWidget {
|
|
const SettingsScreen({super.key});
|
|
|
|
@override
|
|
State<SettingsScreen> createState() => _SettingsScreenState();
|
|
}
|
|
|
|
class _SettingsScreenState extends State<SettingsScreen> {
|
|
|
|
// 👇 VARIÁVEIS DE ESTADO PARA FOTO DE PERFIL
|
|
File? _localImageFile;
|
|
String? _uploadedImageUrl;
|
|
bool _isUploadingImage = false;
|
|
|
|
final supabase = Supabase.instance.client;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_loadUserAvatar();
|
|
}
|
|
|
|
// 👇 LÊ A IMAGEM ATUAL DA BASE DE DADOS (Tabela 'profiles')
|
|
void _loadUserAvatar() async {
|
|
final userId = supabase.auth.currentUser?.id;
|
|
if (userId == null) return;
|
|
|
|
try {
|
|
// ⚠️ NOTA: Ajusta 'profiles' e 'avatar_url' se os nomes na tua BD forem diferentes!
|
|
final data = await supabase
|
|
.from('profiles')
|
|
.select('avatar_url')
|
|
.eq('id', userId)
|
|
.maybeSingle(); // maybeSingle evita erro se o perfil ainda não existir
|
|
|
|
if (mounted && data != null && data['avatar_url'] != null) {
|
|
setState(() {
|
|
_uploadedImageUrl = data['avatar_url'];
|
|
});
|
|
}
|
|
} catch (e) {
|
|
print("Erro ao carregar avatar: $e");
|
|
}
|
|
}
|
|
|
|
// =========================================================================
|
|
// 👇 A MÁGICA DE ESCOLHER E FAZER UPLOAD DA FOTO 👇
|
|
// =========================================================================
|
|
Future<void> _handleImageChange() async {
|
|
final ImagePicker picker = ImagePicker();
|
|
|
|
// 1. ABRIR GALERIA
|
|
final XFile? pickedFile = await picker.pickImage(source: ImageSource.gallery);
|
|
if (pickedFile == null || !mounted) return;
|
|
|
|
try {
|
|
// 2. MOSTRAR IMAGEM LOCAL E ATIVAR LOADING
|
|
setState(() {
|
|
_localImageFile = File(pickedFile.path);
|
|
_isUploadingImage = true;
|
|
});
|
|
|
|
final userId = supabase.auth.currentUser?.id;
|
|
if (userId == null) throw Exception("Utilizador não autenticado.");
|
|
|
|
final String storagePath = '$userId/profile_picture.png';
|
|
|
|
// 3. FAZER UPLOAD (Método direto e seguro!)
|
|
await supabase.storage.from('avatars').upload(
|
|
storagePath,
|
|
_localImageFile!, // Envia o ficheiro File diretamente!
|
|
fileOptions: const FileOptions(cacheControl: '3600', upsert: true)
|
|
);
|
|
|
|
// 4. OBTER URL PÚBLICO
|
|
final String publicUrl = supabase.storage.from('avatars').getPublicUrl(storagePath);
|
|
|
|
// 5. ATUALIZAR NA BASE DE DADOS
|
|
// ⚠️ NOTA: Garante que a tabela 'profiles' existe e tem o teu user_id
|
|
await supabase
|
|
.from('profiles')
|
|
.upsert({
|
|
'id': userId, // Garante que atualiza o perfil certo ou cria um novo
|
|
'avatar_url': publicUrl
|
|
});
|
|
|
|
// 6. SUCESSO!
|
|
if (mounted) {
|
|
setState(() {
|
|
_uploadedImageUrl = publicUrl;
|
|
_isUploadingImage = false;
|
|
_localImageFile = null;
|
|
});
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text("Foto atualizada!"), backgroundColor: Colors.green)
|
|
);
|
|
}
|
|
|
|
} catch (e) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isUploadingImage = false;
|
|
_localImageFile = null;
|
|
});
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(content: Text("Erro: $e"), backgroundColor: AppTheme.primaryRed)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final Color primaryRed = AppTheme.primaryRed;
|
|
final Color bgColor = Theme.of(context).scaffoldBackgroundColor;
|
|
final Color cardColor = Theme.of(context).cardTheme.color ?? Theme.of(context).colorScheme.surface;
|
|
final Color textColor = Theme.of(context).colorScheme.onSurface;
|
|
final Color textLightColor = textColor.withOpacity(0.6);
|
|
|
|
bool isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return Scaffold(
|
|
backgroundColor: bgColor,
|
|
appBar: AppBar(
|
|
backgroundColor: primaryRed,
|
|
foregroundColor: Colors.white,
|
|
elevation: 0,
|
|
centerTitle: true,
|
|
title: Text(
|
|
"Perfil e Definições",
|
|
style: TextStyle(fontSize: 18 * context.sf, fontWeight: FontWeight.w600),
|
|
),
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
),
|
|
body: SingleChildScrollView(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.0 * context.sf, vertical: 24.0 * context.sf),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// ==========================================
|
|
// CARTÃO DE PERFIL
|
|
// ==========================================
|
|
Container(
|
|
padding: EdgeInsets.all(20 * context.sf),
|
|
decoration: BoxDecoration(
|
|
color: cardColor,
|
|
borderRadius: BorderRadius.circular(16 * context.sf),
|
|
border: Border.all(color: Colors.grey.withOpacity(0.1)),
|
|
boxShadow: [
|
|
BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4)),
|
|
],
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// 👇 IMAGEM TAPPABLE AQUI 👇
|
|
_buildTappableProfileAvatar(context, primaryRed),
|
|
SizedBox(width: 16 * context.sf),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"Treinador",
|
|
style: TextStyle(fontSize: 18 * context.sf, fontWeight: FontWeight.bold, color: textColor),
|
|
),
|
|
SizedBox(height: 4 * context.sf),
|
|
Text(
|
|
supabase.auth.currentUser?.email ?? "sem@email.com",
|
|
style: TextStyle(color: textLightColor, fontSize: 14 * context.sf),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 32 * context.sf),
|
|
|
|
// ==========================================
|
|
// SECÇÃO: DEFINIÇÕES
|
|
// ==========================================
|
|
Padding(
|
|
padding: EdgeInsets.only(left: 4 * context.sf, bottom: 12 * context.sf),
|
|
child: Text(
|
|
"Definições",
|
|
style: TextStyle(color: textLightColor, fontSize: 14 * context.sf, fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: cardColor,
|
|
borderRadius: BorderRadius.circular(16 * context.sf),
|
|
border: Border.all(color: Colors.grey.withOpacity(0.1)),
|
|
boxShadow: [
|
|
BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4)),
|
|
],
|
|
),
|
|
child: ListTile(
|
|
contentPadding: EdgeInsets.symmetric(horizontal: 20 * context.sf, vertical: 8 * context.sf),
|
|
leading: Icon(isDark ? Icons.dark_mode : Icons.light_mode, color: primaryRed, size: 28 * context.sf),
|
|
title: Text(
|
|
"Modo Escuro",
|
|
style: TextStyle(fontWeight: FontWeight.bold, color: textColor, fontSize: 16 * context.sf),
|
|
),
|
|
subtitle: Text(
|
|
"Altera as cores da aplicação",
|
|
style: TextStyle(color: textLightColor, fontSize: 13 * context.sf),
|
|
),
|
|
trailing: Switch(
|
|
value: isDark,
|
|
activeColor: primaryRed,
|
|
onChanged: (bool value) {
|
|
themeNotifier.value = value ? ThemeMode.dark : ThemeMode.light;
|
|
},
|
|
),
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 32 * context.sf),
|
|
|
|
// ==========================================
|
|
// SECÇÃO: CONTA
|
|
// ==========================================
|
|
Padding(
|
|
padding: EdgeInsets.only(left: 4 * context.sf, bottom: 12 * context.sf),
|
|
child: Text(
|
|
"Conta",
|
|
style: TextStyle(color: textLightColor, fontSize: 14 * context.sf, fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: cardColor,
|
|
borderRadius: BorderRadius.circular(16 * context.sf),
|
|
border: Border.all(color: Colors.grey.withOpacity(0.1)),
|
|
boxShadow: [
|
|
BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 10, offset: const Offset(0, 4)),
|
|
],
|
|
),
|
|
child: ListTile(
|
|
contentPadding: EdgeInsets.symmetric(horizontal: 20 * context.sf, vertical: 4 * context.sf),
|
|
leading: Icon(Icons.logout_outlined, color: primaryRed, size: 26 * context.sf),
|
|
title: Text(
|
|
"Terminar Sessão",
|
|
style: TextStyle(color: primaryRed, fontWeight: FontWeight.bold, fontSize: 15 * context.sf),
|
|
),
|
|
onTap: () => _confirmLogout(context),
|
|
),
|
|
),
|
|
|
|
SizedBox(height: 50 * context.sf),
|
|
|
|
// ==========================================
|
|
// VERSÃO DA APP
|
|
// ==========================================
|
|
Center(
|
|
child: Text(
|
|
"PlayMaker v1.0.0",
|
|
style: TextStyle(color: textLightColor.withOpacity(0.7), fontSize: 13 * context.sf),
|
|
),
|
|
),
|
|
SizedBox(height: 20 * context.sf),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// 👇 O WIDGET DA FOTO DE PERFIL (Protegido com GestureDetector)
|
|
Widget _buildTappableProfileAvatar(BuildContext context, Color primaryRed) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
print("CLIQUEI NA FOTO! A abrir galeria..."); // 👇 Vê na consola se isto aparece
|
|
_handleImageChange();
|
|
},
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 36 * context.sf,
|
|
backgroundColor: primaryRed.withOpacity(0.1),
|
|
backgroundImage: _isUploadingImage && _localImageFile != null
|
|
? FileImage(_localImageFile!)
|
|
: (_uploadedImageUrl != null && _uploadedImageUrl!.isNotEmpty
|
|
? NetworkImage(_uploadedImageUrl!)
|
|
: null),
|
|
child: (_uploadedImageUrl == null && !(_isUploadingImage && _localImageFile != null))
|
|
? Icon(Icons.person, color: primaryRed, size: 36 * context.sf)
|
|
: null,
|
|
),
|
|
|
|
// ÍCONE DE LÁPIS
|
|
Positioned(
|
|
bottom: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: EdgeInsets.all(6 * context.sf),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: Colors.grey.withOpacity(0.2)),
|
|
),
|
|
child: Icon(Icons.edit_outlined, color: primaryRed, size: 16 * context.sf),
|
|
),
|
|
),
|
|
|
|
// LOADING OVERLAY
|
|
if (_isUploadingImage)
|
|
Positioned.fill(
|
|
child: Container(
|
|
decoration: BoxDecoration(color: Colors.black.withOpacity(0.4), shape: BoxShape.circle),
|
|
child: const Padding(
|
|
padding: EdgeInsets.all(16.0),
|
|
child: CircularProgressIndicator(color: Colors.white, strokeWidth: 3),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 👇 FUNÇÃO DE LOGOUT
|
|
void _confirmLogout(BuildContext context) {
|
|
showDialog(
|
|
context: context,
|
|
builder: (ctx) => AlertDialog(
|
|
backgroundColor: Theme.of(context).colorScheme.surface,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16 * context.sf)),
|
|
title: Text("Terminar Sessão", style: TextStyle(color: Theme.of(context).colorScheme.onSurface, fontWeight: FontWeight.bold)),
|
|
content: Text("Tens a certeza que queres sair da conta?", style: TextStyle(color: Theme.of(context).colorScheme.onSurface)),
|
|
actions: [
|
|
TextButton(onPressed: () => Navigator.pop(ctx), child: const Text("Cancelar", style: TextStyle(color: Colors.grey))),
|
|
ElevatedButton(
|
|
style: ElevatedButton.styleFrom(backgroundColor: AppTheme.primaryRed, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
|
|
onPressed: () async {
|
|
await Supabase.instance.client.auth.signOut();
|
|
if (ctx.mounted) {
|
|
Navigator.of(ctx).pushAndRemoveUntil(
|
|
MaterialPageRoute(builder: (context) => const LoginPage()),
|
|
(Route<dynamic> route) => false,
|
|
);
|
|
}
|
|
},
|
|
child: const Text("Sair", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold))
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} |