417 lines
14 KiB
Dart
417 lines
14 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'constants/app_colors.dart';
|
|
|
|
void main() {
|
|
// O ponto de entrada do aplicativo.
|
|
runApp(const MyApp());
|
|
}
|
|
|
|
/// Widget raiz do aplicativo que configura o MaterialApp.
|
|
class MyApp extends StatelessWidget {
|
|
const MyApp({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const MaterialApp(
|
|
// Remove a bandeira de "debug" no canto superior direito.
|
|
debugShowCheckedModeBanner: false,
|
|
// Define a tela inicial como RunningScreen.
|
|
home: RunningScreen(),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Tela principal que exibe o progresso, estatísticas e menu.
|
|
class RunningScreen extends StatefulWidget {
|
|
const RunningScreen({super.key});
|
|
|
|
@override
|
|
State<RunningScreen> createState() => _RunningScreenState();
|
|
}
|
|
|
|
class _RunningScreenState extends State<RunningScreen>
|
|
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.
|
|
|
|
/// 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) {
|
|
return Scaffold(
|
|
backgroundColor: AppColors.background, // Cor de fundo escura definida nas constantes.
|
|
body: Stack(
|
|
children: [
|
|
// 1. Indicador de progresso circular posicionado no topo central.
|
|
Align(
|
|
alignment: Alignment.topCenter,
|
|
child: Padding(
|
|
padding: const EdgeInsets.only(top: 60),
|
|
child: _buildCircularProgressIndicator(),
|
|
),
|
|
),
|
|
|
|
// 2. Exibição da distância (ex: 0.0 KM | 8.0 KM).
|
|
Positioned(
|
|
top: 280,
|
|
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 simulado.
|
|
Positioned(
|
|
top: 340,
|
|
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 desenho do mapa simulado.
|
|
Expanded(
|
|
flex: 6,
|
|
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.
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// 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 clicado!'),
|
|
_buildMenuButton(Icons.group_outlined, 'Grupos clicado!'),
|
|
_buildMenuButton(Icons.access_time, 'Histórico clicado!'),
|
|
_buildMenuButton(Icons.notifications_none, 'Notificações clicado!', showBadge: true),
|
|
_buildMenuButton(Icons.person, 'Perfil clicado!', isAvatar: true),
|
|
],
|
|
),
|
|
),
|
|
|
|
// 6. Botão de Bluetooth no canto superior direito.
|
|
Positioned(
|
|
top: 60,
|
|
right: 30,
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
// Exibe uma mensagem rápida quando clicado.
|
|
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 que exibe um SnackBar.
|
|
Widget _buildMenuButton(IconData icon, String message, {bool showBadge = false, bool isAvatar = false}) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text(message),
|
|
duration: const Duration(seconds: 1),
|
|
),
|
|
);
|
|
},
|
|
child: Stack(
|
|
children: [
|
|
// Exibe um avatar circular ou um ícone padrão.
|
|
isAvatar
|
|
? const CircleAvatar(
|
|
radius: 20,
|
|
backgroundColor: Colors.orange,
|
|
child: CircleAvatar(radius: 18, backgroundImage: NetworkImage('https://i.pravatar.cc/150?u=1')),
|
|
)
|
|
: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: const BoxDecoration(color: 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 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;
|
|
}
|