240403/runvisionpro_app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework do design, mapa, e adicao de uma tela provisoria sobre a conexao bluetooth que esta a funcionar (placeholder para oque o fabio fez ate aquilo estar tudo certo)

Browse Source
This commit is contained in:
240403
2026-03-04 16:15:48 +00:00
parent bbd6185401
commit 666f06ab6a
10 changed files with 1093 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
lib/main.dart
View File

@@ -1,9 +1,10 @@
import 'package:flutter/material.dart';
import 'constants/app_colors.dart';
import 'screens/google_map_screen.dart';
import 'screens/bluetooth_connection_screen.dart'; // Importando a nova tela
void main() {
// O ponto de entrada do aplicativo.
// Ponto de entrada do aplicativo.
runApp(const MyApp());
}
@@ -33,38 +34,54 @@ class RunningScreen extends StatefulWidget {
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 progress = 0.35; // Progresso inicial simulado para estética.
double targetDistance = 8.0; // Distância alvo em KM.
double currentDistance = 0.0; // Distância atual percorrida.
double currentDistance = 2.8; // Distância atual percorrida simulada.
/// Constrói o indicador de progresso circular central.
/// Constrói o indicador de progresso circular central com melhorias estéticas.
Widget _buildCircularProgressIndicator() {
return SizedBox(
width: 200,
height: 200,
width: 210,
height: 210,
child: Stack(
alignment: Alignment.center,
children: [
// Efeito de brilho (glow) sutil atrás do progresso.
Container(
width: 180,
height: 180,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: AppColors.white.withOpacity(0.05),
blurRadius: 30,
spreadRadius: 10,
),
],
),
),
// 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),
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
builder: (context, value, _) {
return CustomPaint(
size: const Size(200, 200),
size: const Size(210, 210),
painter: CircularProgressPainter(
progress: value,
strokeWidth: 12,
strokeWidth: 14,
progressColor: AppColors.white,
backgroundColor: AppColors.white.withOpacity(0.3),
backgroundColor: AppColors.white.withOpacity(0.15),
),
);
},
),
// Círculo interno cinza que contém o texto da porcentagem.
// Círculo interno que contém o texto da porcentagem.
Container(
width: 170,
height: 170,
width: 175,
height: 175,
decoration: const BoxDecoration(
color: AppColors.backgroundGrey,
shape: BoxShape.circle,
@@ -75,14 +92,20 @@ class _RunningScreenState extends State<RunningScreen>
Text(
"${(progress * 100).toInt()}%",
style: const TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
fontSize: 42,
fontWeight: FontWeight.w900,
color: Colors.white,
letterSpacing: -1,
),
),
const Text(
Text(
"COMPLETO",
style: TextStyle(color: Colors.white70, fontSize: 12),
style: TextStyle(
color: Colors.white.withOpacity(0.5),
fontSize: 11,
fontWeight: FontWeight.bold,
letterSpacing: 1.5,
),
),
],
),
@@ -95,112 +118,142 @@ class _RunningScreenState extends State<RunningScreen>
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor:
AppColors.background, // Cor de fundo escura definida nas constantes.
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),
padding: const EdgeInsets.only(top: 70),
child: _buildCircularProgressIndicator(),
),
),
// 2. Exibição da distância (ex: 0.0 KM | 8.0 KM).
// 2. Exibição da distância estilizada como um badge.
Positioned(
top: 280,
top: 300,
left: 0,
right: 0,
child: Center(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 8,
),
padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 10),
decoration: BoxDecoration(
color: AppColors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(20),
color: Colors.white.withOpacity(0.08),
borderRadius: BorderRadius.circular(25),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Text(
"${currentDistance.toStringAsFixed(1)} KM | ${targetDistance.toStringAsFixed(1)} KM",
style: const TextStyle(
color: AppColors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
fontSize: 15,
fontWeight: FontWeight.w800,
letterSpacing: 0.5,
),
),
),
),
),
// 3. Contêiner de estatísticas (Passos, BPM, K/CAL) e o mapa simulado.
// 3. Contêiner de estatísticas e o mapa interativo.
Positioned(
top: 340,
top: 360,
left: 20,
right: 20,
child: Container(
height: 200,
height: 210,
decoration: BoxDecoration(
color: AppColors.backgroundGrey,
borderRadius: BorderRadius.circular(24),
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Row(
children: [
// Coluna esquerda com ícones e valores de estatística.
// Lado Esquerdo: Estatísticas.
Expanded(
flex: 4,
child: Padding(
padding: const EdgeInsets.all(16.0),
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 15),
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",
),
_buildStatItem(Icons.directions_run_rounded, "3219", "PASSOS"),
Divider(color: Colors.white.withOpacity(0.1), height: 1),
_buildStatItem(Icons.favorite_rounded, "98", "BPM"),
Divider(color: Colors.white.withOpacity(0.1), height: 1),
_buildStatItem(Icons.local_fire_department_rounded, "480", "K/CAL"),
],
),
),
),
// Coluna direita contendo o desenho do mapa simulado.
// Lado Direito: Miniatura do Mapa Clicável.
Expanded(
flex: 6,
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const GoogleMapScreen(),
),
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.
),
],
child: Container(
margin: const EdgeInsets.all(8),
child: ClipRRect(
borderRadius: BorderRadius.circular(22),
child: Stack(
children: [
Container(color: const Color(0xFF2C2C2E)),
CustomPaint(
size: Size.infinite,
painter: MapPainter(),
),
// Overlay estético indicando interatividade.
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.4),
],
),
),
),
Positioned(
bottom: 12,
right: 12,
child: Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
color: AppColors.background.withOpacity(0.8),
shape: BoxShape.circle,
),
child: const Icon(Icons.fullscreen_rounded, color: Colors.white, size: 20),
),
),
const Positioned(
top: 12,
left: 12,
child: Text(
"MAPA",
style: TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w900,
letterSpacing: 1,
),
),
),
],
),
),
),
),
@@ -210,105 +263,55 @@ class _RunningScreenState extends State<RunningScreen>
),
),
// 4. Barra de progresso linear (centralizada acima dos botões inferiores).
// 4. Barra de progresso linear centralizada.
Positioned(
bottom: 160,
left:
40, // Espaçamento igual na esquerda e direita para centralizar.
right: 40,
bottom: 170,
left: 50,
right: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(10),
child: LinearProgressIndicator(
value: progress,
minHeight: 12,
backgroundColor: AppColors.backgroundGrey.withOpacity(0.3),
valueColor: const AlwaysStoppedAnimation<Color>(
AppColors.white,
),
minHeight: 8,
backgroundColor: Colors.white.withOpacity(0.1),
valueColor: const AlwaysStoppedAnimation<Color>(AppColors.white),
),
),
),
// 5. Botões de menu inferiores.
// 5. Menu de navegação inferior.
Positioned(
bottom: 60,
bottom: 50,
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,
),
_buildMenuButton(Icons.settings_outlined, 'Configurações'),
_buildMenuButton(Icons.group_outlined, 'Grupos'),
_buildMenuButton(Icons.history_rounded, 'Histórico'),
_buildMenuButton(Icons.notifications_none_rounded, 'Notificações', showBadge: true),
_buildMenuButton(Icons.person_outline_rounded, 'Perfil', isAvatar: true),
],
),
),
// 6. Botão de Bluetooth no canto superior direito.
// 6. Ação rápida de Bluetooth.
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,
),
),
),
],
),
),
),
right: 25,
child: _buildSmallActionButton(Icons.bluetooth, Colors.red),
),
],
),
);
}
/// Constrói uma linha de estatística com ícone, valor e rótulo.
/// Item de estatística com design refinado.
Widget _buildStatItem(IconData icon, String value, String label) {
return Row(
children: [
Icon(icon, color: Colors.white70, size: 24),
Icon(icon, color: AppColors.coral.withOpacity(0.8), size: 22),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -318,13 +321,18 @@ class _RunningScreenState extends State<RunningScreen>
value,
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
fontSize: 19,
fontWeight: FontWeight.w900,
),
),
Text(
label,
style: const TextStyle(color: Colors.white60, fontSize: 10),
style: TextStyle(
color: Colors.white.withOpacity(0.4),
fontSize: 9,
fontWeight: FontWeight.bold,
letterSpacing: 0.5,
),
),
],
),
@@ -332,55 +340,53 @@ class _RunningScreenState extends State<RunningScreen>
);
}
/// 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,
}) {
/// Botões do menu com melhorias visuais.
Widget _buildMenuButton(IconData icon, String message, {bool showBadge = false, bool isAvatar = false}) {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
behavior: SnackBarBehavior.floating,
duration: const Duration(seconds: 1),
),
);
},
child: Stack(
clipBehavior: Clip.none,
children: [
// Exibe um avatar circular ou um ícone padrão.
isAvatar
? CircleAvatar(
radius: 20,
backgroundColor: Colors.orange,
child: CircleAvatar(
? Container(
padding: const EdgeInsets.all(3),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.coral, width: 2),
),
child: const CircleAvatar(
radius: 18,
backgroundImage: NetworkImage(
'https://i.pravatar.cc/150?u=1',
),
backgroundImage: NetworkImage('https://i.pravatar.cc/150?u=1'),
),
)
: Container(
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppColors.backgroundGrey,
shape: BoxShape.circle,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: Colors.white.withOpacity(0.05)),
),
child: Icon(icon, color: AppColors.white, size: 24),
child: Icon(icon, color: Colors.white.withOpacity(0.9), size: 24),
),
// Exibe um pontinho vermelho de notificação se showBadge for true.
if (showBadge)
Positioned(
left: 0,
bottom: 0,
right: -2,
top: -2,
child: Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: Colors.red,
width: 10,
height: 10,
decoration: BoxDecoration(
color: AppColors.coral,
shape: BoxShape.circle,
border: Border.all(color: AppColors.background, width: 2),
),
),
),
@@ -388,68 +394,84 @@ class _RunningScreenState extends State<RunningScreen>
),
);
}
/// Botão de ação rápida (Bluetooth).
Widget _buildSmallActionButton(IconData icon, Color badgeColor) {
return GestureDetector(
onTap: () {
// Navegando para a nova tela de conexão Bluetooth
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const BluetoothConnectionScreen()),
);
},
child: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColors.backgroundGrey,
shape: BoxShape.circle,
border: Border.all(color: Colors.white.withOpacity(0.05)),
),
child: Stack(
children: [
Icon(icon, color: Colors.white, size: 20),
Positioned(
right: 0,
top: 0,
child: Container(
width: 7,
height: 7,
decoration: BoxDecoration(
color: badgeColor,
shape: BoxShape.circle,
border: Border.all(color: AppColors.backgroundGrey, width: 1.5),
),
),
),
],
),
),
);
}
}
/// Pintor customizado para desenhar o traçado do mapa simulado.
/// Pintor customizado para o mapa miniatura estético.
class MapPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.white38
final paintPath = Paint()
..color = AppColors.coral.withOpacity(0.5)
..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);
path.quadraticBezierTo(size.width * 0.3, size.height * 0.9, size.width * 0.5, size.height * 0.5);
path.quadraticBezierTo(size.width * 0.7, size.height * 0.1, size.width * 0.9, size.height * 0.3);
// Desenha uma "estrada" mais grossa branca.
final roadPaint = Paint()
..color = Colors.white
..strokeWidth = 8
final paintRoad = Paint()
..color = Colors.white.withOpacity(0.1)
..strokeWidth = 10
..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,
);
final road = Path();
road.moveTo(0, size.height * 0.5);
road.lineTo(size.width, size.height * 0.6);
canvas.drawPath(path, paint);
canvas.drawPath(roadPath, roadPaint);
canvas.drawPath(road, paintRoad);
canvas.drawPath(path, paintPath);
// 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);
final markerPaint = Paint()..color = AppColors.coral;
canvas.drawCircle(Offset(size.width * 0.5, size.height * 0.5), 5, markerPaint);
canvas.drawCircle(Offset(size.width * 0.5, size.height * 0.5), 8, Paint()..color = AppColors.coral.withOpacity(0.3));
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
/// Pintor customizado para desenhar o arco de progresso circular.
/// Pintor customizado para o arco de progresso circular.
class CircularProgressPainter extends CustomPainter {
final double progress;
final double strokeWidth;
@@ -468,31 +490,21 @@ class CircularProgressPainter extends CustomPainter {
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()
canvas.drawCircle(center, radius, Paint()
..color = backgroundColor
..strokeWidth = strokeWidth
..style = PaintingStyle.stroke;
..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,
-1.5708, // -90 graus em radianos
6.2831 * progress, // 360 graus em radianos * progresso
false,
progressPaint,
);