653 lines
20 KiB
Dart
653 lines
20 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import '../constants/app_colors.dart';
|
|
import '../services/supabase_service.dart';
|
|
import '../screens/inicial_screen.dart';
|
|
import '../screens/google_maps_screen.dart';
|
|
import '../screens/setting_screen.dart';
|
|
|
|
/// Tela principal para usuários logados com estatísticas de corrida e menu.
|
|
class LogadoInicialScreen extends StatefulWidget {
|
|
const LogadoInicialScreen({super.key});
|
|
|
|
@override
|
|
State<LogadoInicialScreen> createState() => _LogadoInicialScreenState();
|
|
}
|
|
|
|
class _LogadoInicialScreenState extends State<LogadoInicialScreen>
|
|
with SingleTickerProviderStateMixin {
|
|
// Variáveis de estado para controlar os dados da corrida.
|
|
double progress = 0.0; // Progresso de 0.0 a 1.0 (ex: 0.5 = 50%).
|
|
double targetDistance = 8.0; // Distância alvo em KM.
|
|
double currentDistance = 0.0; // Distância atual percorrida.
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// Simular progresso inicial
|
|
_simulateProgress();
|
|
}
|
|
|
|
void _simulateProgress() {
|
|
Timer.periodic(const Duration(seconds: 3), (timer) {
|
|
if (mounted && progress < 1.0) {
|
|
setState(() {
|
|
progress = (progress + 0.1).clamp(0.0, 1.0);
|
|
currentDistance = targetDistance * progress;
|
|
});
|
|
} else {
|
|
timer.cancel();
|
|
}
|
|
});
|
|
}
|
|
|
|
/// Constrói o indicador de progresso circular central.
|
|
Widget _buildCircularProgressIndicator() {
|
|
return SizedBox(
|
|
width: 200,
|
|
height: 200,
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
// TweenAnimationBuilder cria uma animação suave quando o valor do progresso muda.
|
|
TweenAnimationBuilder<double>(
|
|
tween: Tween(begin: 0.0, end: progress),
|
|
duration: const Duration(milliseconds: 500),
|
|
builder: (context, value, _) {
|
|
return CustomPaint(
|
|
size: const Size(200, 200),
|
|
painter: CircularProgressPainter(
|
|
progress: value,
|
|
strokeWidth: 12,
|
|
progressColor: AppColors.white,
|
|
backgroundColor: AppColors.white.withOpacity(0.3),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
// Círculo interno cinza que contém o texto da porcentagem.
|
|
Container(
|
|
width: 170,
|
|
height: 170,
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.backgroundGrey,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
"${(progress * 100).toInt()}%",
|
|
style: const TextStyle(
|
|
fontSize: 36,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
const Text(
|
|
"COMPLETO",
|
|
style: TextStyle(color: Colors.white70, fontSize: 12),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final user = SupabaseService.currentUser;
|
|
final userName =
|
|
user?.userMetadata?['name'] ?? user?.email?.split('@')[0] ?? 'Usuário';
|
|
|
|
return Scaffold(
|
|
backgroundColor: AppColors.background,
|
|
body: Stack(
|
|
children: [
|
|
// Static dark gray triangles
|
|
Positioned(
|
|
top: -50,
|
|
left: -80,
|
|
child: CustomPaint(
|
|
size: const Size(160, 120),
|
|
painter: TrianglePainter(
|
|
color: Colors.grey.shade800.withOpacity(0.4),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 20,
|
|
right: -60,
|
|
child: CustomPaint(
|
|
size: const Size(120, 90),
|
|
painter: TrianglePainter(
|
|
color: Colors.grey.shade800.withOpacity(0.3),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 80,
|
|
left: 40,
|
|
child: CustomPaint(
|
|
size: const Size(140, 105),
|
|
painter: TrianglePainter(
|
|
color: Colors.grey.shade800.withOpacity(0.35),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 120,
|
|
right: 80,
|
|
child: CustomPaint(
|
|
size: const Size(100, 75),
|
|
painter: TrianglePainter(
|
|
color: Colors.grey.shade800.withOpacity(0.25),
|
|
),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 160,
|
|
left: -40,
|
|
child: CustomPaint(
|
|
size: const Size(130, 98),
|
|
painter: TrianglePainter(
|
|
color: Colors.grey.shade800.withOpacity(0.3),
|
|
),
|
|
),
|
|
),
|
|
|
|
// User info header
|
|
Positioned(
|
|
top: 40,
|
|
left: 20,
|
|
right: 20,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Olá, $userName!',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Text(
|
|
'Bem-vindo de volta!',
|
|
style: TextStyle(color: Colors.white70, fontSize: 14),
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
width: 50,
|
|
height: 50,
|
|
decoration: BoxDecoration(
|
|
color: AppColors.buttonColor,
|
|
borderRadius: BorderRadius.circular(25),
|
|
),
|
|
child: const Icon(
|
|
Icons.person,
|
|
color: AppColors.white,
|
|
size: 24,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// 1. Indicador de progresso circular posicionado no topo central.
|
|
Align(
|
|
alignment: Alignment.topCenter,
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(top: 140),
|
|
child: _buildCircularProgressIndicator(),
|
|
),
|
|
),
|
|
|
|
// 2. Exibição da distância (ex: 0.0 KM | 8.0 KM).
|
|
Positioned(
|
|
top: 360,
|
|
left: 0,
|
|
right: 0,
|
|
child: Center(
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 8,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.white.withOpacity(0.2),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Text(
|
|
"${currentDistance.toStringAsFixed(1)} KM | ${targetDistance.toStringAsFixed(1)} KM",
|
|
style: const TextStyle(
|
|
color: AppColors.white,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// 3. Contêiner de estatísticas (Passos, BPM, K/CAL) e o mapa clicável.
|
|
Positioned(
|
|
top: 420,
|
|
left: 20,
|
|
right: 20,
|
|
child: Container(
|
|
height: 200,
|
|
decoration: BoxDecoration(
|
|
color: AppColors.backgroundGrey,
|
|
borderRadius: BorderRadius.circular(24),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// Coluna esquerda com ícones e valores de estatística.
|
|
Expanded(
|
|
flex: 4,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(16.0),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
_buildStatItem(
|
|
Icons.directions_run,
|
|
"3219",
|
|
"PASSOS",
|
|
),
|
|
const Divider(color: Colors.white24, height: 1),
|
|
_buildStatItem(Icons.favorite_border, "98", "BPM"),
|
|
const Divider(color: Colors.white24, height: 1),
|
|
_buildStatItem(
|
|
Icons.local_fire_department,
|
|
"480",
|
|
"K/CAL",
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Coluna direita contendo o mapa clicável.
|
|
Expanded(
|
|
flex: 6,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => const GoogleMapScreen(),
|
|
),
|
|
);
|
|
},
|
|
child: ClipRRect(
|
|
borderRadius: const BorderRadius.only(
|
|
topRight: Radius.circular(24),
|
|
bottomRight: Radius.circular(24),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
color: const Color(0xFF3A3A3C),
|
|
), // Fundo do mapa.
|
|
CustomPaint(
|
|
size: Size.infinite,
|
|
painter:
|
|
MapPainter(), // Desenha as linhas e o marcador.
|
|
),
|
|
// Overlay para indicar que é clicável
|
|
Container(
|
|
color: Colors.black.withOpacity(0.1),
|
|
child: const Center(
|
|
child: Icon(
|
|
Icons.touch_app,
|
|
color: Colors.white54,
|
|
size: 40,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// 4. Barra de progresso linear (centralizada acima dos botões inferiores).
|
|
Positioned(
|
|
bottom: 160,
|
|
left:
|
|
40, // Espaçamento igual na esquerda e direita para centralizar.
|
|
right: 40,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(20),
|
|
child: LinearProgressIndicator(
|
|
value: progress,
|
|
minHeight: 12,
|
|
backgroundColor: AppColors.backgroundGrey.withOpacity(0.3),
|
|
valueColor: const AlwaysStoppedAnimation<Color>(
|
|
AppColors.white,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// 5. Botões de menu inferiores.
|
|
Positioned(
|
|
bottom: 60,
|
|
left: 0,
|
|
right: 0,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
_buildMenuButton(
|
|
Icons.settings,
|
|
'Configurações',
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => const SettingsScreen(),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
_buildMenuButton(Icons.group_outlined, 'Grupos'),
|
|
_buildMenuButton(Icons.access_time, 'Histórico'),
|
|
_buildMenuButton(
|
|
Icons.notifications_none,
|
|
'Notificações',
|
|
showBadge: true,
|
|
),
|
|
_buildMenuButton(Icons.logout, 'Sair', isLogout: true),
|
|
],
|
|
),
|
|
),
|
|
|
|
// 6. Botão de Bluetooth no canto superior direito.
|
|
Positioned(
|
|
top: 40,
|
|
right: 30,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text('Bluetooth clicado!'),
|
|
duration: Duration(seconds: 1),
|
|
),
|
|
);
|
|
},
|
|
child: Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.backgroundGrey,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
const Icon(
|
|
Icons.bluetooth,
|
|
color: AppColors.white,
|
|
size: 20,
|
|
),
|
|
// Pontinho vermelho indicando status ou notificação.
|
|
Positioned(
|
|
left: 0,
|
|
bottom: 0,
|
|
child: Container(
|
|
width: 6,
|
|
height: 6,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.red,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
/// Constrói uma linha de estatística com ícone, valor e rótulo.
|
|
Widget _buildStatItem(IconData icon, String value, String label) {
|
|
return Row(
|
|
children: [
|
|
Icon(icon, color: Colors.white70, size: 24),
|
|
const SizedBox(width: 12),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
value,
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Text(
|
|
label,
|
|
style: const TextStyle(color: Colors.white60, fontSize: 10),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
/// Constrói um botão de menu clicável.
|
|
Widget _buildMenuButton(
|
|
IconData icon,
|
|
String message, {
|
|
bool showBadge = false,
|
|
bool isLogout = false,
|
|
VoidCallback? onTap,
|
|
}) {
|
|
return GestureDetector(
|
|
onTap:
|
|
onTap ??
|
|
() async {
|
|
if (isLogout) {
|
|
await SupabaseService.signOut();
|
|
if (mounted) {
|
|
Navigator.of(context).pushAndRemoveUntil(
|
|
MaterialPageRoute(
|
|
builder: (context) => const InicialScreen(),
|
|
),
|
|
(route) => false,
|
|
);
|
|
}
|
|
} else {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text('$message clicado!'),
|
|
duration: const Duration(seconds: 1),
|
|
),
|
|
);
|
|
}
|
|
},
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: isLogout ? Colors.red.shade600 : AppColors.backgroundGrey,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(icon, color: AppColors.white, size: 24),
|
|
),
|
|
// Exibe um pontinho vermelho de notificação se showBadge for true.
|
|
if (showBadge)
|
|
Positioned(
|
|
left: 0,
|
|
bottom: 0,
|
|
child: Container(
|
|
width: 8,
|
|
height: 8,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.red,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Pintor customizado para desenhar os triângulos estáticos.
|
|
class TrianglePainter extends CustomPainter {
|
|
final Color color;
|
|
|
|
TrianglePainter({required this.color});
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final paint = Paint()
|
|
..color = color
|
|
..style = PaintingStyle.fill;
|
|
|
|
final path = Path();
|
|
path.moveTo(size.width / 2, 0);
|
|
path.lineTo(0, size.height);
|
|
path.lineTo(size.width, size.height);
|
|
path.close();
|
|
|
|
canvas.drawPath(path, paint);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(covariant CustomPainter oldDelegate) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
/// Pintor customizado para desenhar o traçado do mapa simulado.
|
|
class MapPainter extends CustomPainter {
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final paint = Paint()
|
|
..color = Colors.white38
|
|
..strokeWidth = 3
|
|
..style = PaintingStyle.stroke
|
|
..strokeCap = StrokeCap.round;
|
|
|
|
// Desenha a linha sinuosa do percurso.
|
|
final path = Path();
|
|
path.moveTo(size.width * 0.1, size.height * 0.8);
|
|
path.quadraticBezierTo(
|
|
size.width * 0.3,
|
|
size.height * 0.7,
|
|
size.width * 0.4,
|
|
size.height * 0.4,
|
|
);
|
|
path.quadraticBezierTo(
|
|
size.width * 0.5,
|
|
size.height * 0.1,
|
|
size.width * 0.7,
|
|
size.height * 0.3,
|
|
);
|
|
path.lineTo(size.width * 0.9, size.height * 0.2);
|
|
|
|
// Desenha uma "estrada" mais grossa branca.
|
|
final roadPaint = Paint()
|
|
..color = Colors.white
|
|
..strokeWidth = 8
|
|
..style = PaintingStyle.stroke;
|
|
|
|
final roadPath = Path();
|
|
roadPath.moveTo(size.width * 0.6, size.height * 1.1);
|
|
roadPath.quadraticBezierTo(
|
|
size.width * 0.7,
|
|
size.height * 0.8,
|
|
size.width * 1.1,
|
|
size.height * 0.7,
|
|
);
|
|
|
|
canvas.drawPath(path, paint);
|
|
canvas.drawPath(roadPath, roadPaint);
|
|
|
|
// Desenha o marcador circular (o pino no mapa).
|
|
final markerPaint = Paint()..color = const Color(0xFFFF6B6B);
|
|
final markerPos = Offset(size.width * 0.4, size.height * 0.4);
|
|
canvas.drawCircle(markerPos, 6, markerPaint);
|
|
|
|
// Desenha o centro branco do marcador.
|
|
final innerPaint = Paint()..color = Colors.white;
|
|
canvas.drawCircle(markerPos, 2, innerPaint);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(CustomPainter oldDelegate) => false;
|
|
}
|
|
|
|
/// Pintor customizado para desenhar o arco de progresso circular.
|
|
class CircularProgressPainter extends CustomPainter {
|
|
final double progress;
|
|
final double strokeWidth;
|
|
final Color progressColor;
|
|
final Color backgroundColor;
|
|
|
|
CircularProgressPainter({
|
|
required this.progress,
|
|
required this.strokeWidth,
|
|
required this.progressColor,
|
|
required this.backgroundColor,
|
|
});
|
|
|
|
@override
|
|
void paint(Canvas canvas, Size size) {
|
|
final center = Offset(size.width / 2, size.height / 2);
|
|
final radius = (size.width - strokeWidth) / 2;
|
|
|
|
// Desenha o círculo de fundo (cinza transparente).
|
|
final backgroundPaint = Paint()
|
|
..color = backgroundColor
|
|
..strokeWidth = strokeWidth
|
|
..style = PaintingStyle.stroke;
|
|
|
|
canvas.drawCircle(center, radius, backgroundPaint);
|
|
|
|
// Desenha o arco de progresso (branco).
|
|
final progressPaint = Paint()
|
|
..color = progressColor
|
|
..strokeWidth = strokeWidth
|
|
..style = PaintingStyle.stroke
|
|
..strokeCap = StrokeCap.round;
|
|
|
|
const startAngle = -3.14159265359 / 2; // Começa no topo (-90 graus).
|
|
final sweepAngle =
|
|
2 *
|
|
3.14159265359 *
|
|
progress; // Define o tamanho do arco com base no progresso.
|
|
|
|
canvas.drawArc(
|
|
Rect.fromCircle(center: center, radius: radius),
|
|
startAngle,
|
|
sweepAngle,
|
|
false,
|
|
progressPaint,
|
|
);
|
|
}
|
|
|
|
@override
|
|
bool shouldRepaint(CircularProgressPainter oldDelegate) =>
|
|
oldDelegate.progress != progress;
|
|
}
|