FreeTLab/farolero
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cambios visuales completos

Browse Source
This commit is contained in:
freetlab
2026-05-10 17:28:35 +02:00
parent 8b4ca132aa
commit 42f01949c4
33 changed files with 887 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
lib/pantallas/pantalla_seleccion_modo_juego.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import '../tema/componentes_farolero.dart';
import '../tema/tema_app.dart';
@@ -10,40 +11,27 @@ class PantallaSeleccionModoJuego extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Elegir modo de juego')),
extendBodyBehindAppBar: true,
appBar: AppBar(title: const Text('Elegir modo')),
body: FondoFarolero(
intenso: true,
child: SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
padding: const EdgeInsets.fromLTRB(20, 24, 20, 28),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 460),
constraints: const BoxConstraints(maxWidth: 470),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Icon(
Icons.sports_esports,
size: 64,
color: TemaApp.colorNaranja,
),
const SizedBox(height: 16),
Text(
'¿Cómo querés jugar?',
style: Theme.of(context).textTheme.headlineMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Text(
'Elegí primero el tipo de partida para configurar solo lo necesario.',
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
const SizedBox(height: 28),
const SizedBox(height: 12),
const _ModoHero().animate().fadeIn(duration: 320.ms).slideY(begin: -0.12),
const SizedBox(height: 34),
_ModoCard(
icono: Icons.phone_android,
titulo: 'Partida en este dispositivo',
descripcion:
'Todos los jugadores usan este móvil. Acá se agregan los nombres manualmente.',
icono: Icons.phone_android_rounded,
titulo: 'Un móvil',
subtitulo: 'Partida en este dispositivo',
descripcion: 'Ideal para jugar todos juntos pasando el móvil. Configuración rápida y directa.',
onTap: () => Navigator.push(
context,
MaterialPageRoute(
@@ -53,13 +41,13 @@ class PantallaSeleccionModoJuego extends StatelessWidget {
),
),
),
),
const SizedBox(height: 14),
).animate().fadeIn(delay: 120.ms).slideX(begin: -0.08),
const SizedBox(height: 16),
_ModoCard(
icono: Icons.devices,
titulo: 'Partida multidispositivo',
descripcion:
'Este móvil crea el servidor. Los usuarios se gestionan después en el lobby.',
icono: Icons.devices_rounded,
titulo: 'Multidispositivo',
subtitulo: 'Cada jugador en su móvil',
descripcion: 'Crea una sala premium, comparte QR y gestiona usuarios desde el lobby.',
destacado: true,
onTap: () => Navigator.push(
context,
@@ -70,7 +58,7 @@ class PantallaSeleccionModoJuego extends StatelessWidget {
),
),
),
),
).animate().fadeIn(delay: 200.ms).slideX(begin: 0.08),
],
),
),
@@ -82,9 +70,82 @@ class PantallaSeleccionModoJuego extends StatelessWidget {
}
}
class _ModoHero extends StatelessWidget {
const _ModoHero();
@override
Widget build(BuildContext context) {
return SizedBox(
height: 230,
child: Stack(
alignment: Alignment.center,
children: [
Positioned.fill(
child: Image.asset(
'assets/ui/premium/lantern_radial_glow.png',
fit: BoxFit.contain,
opacity: const AlwaysStoppedAnimation(0.58),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 90,
height: 90,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
TemaApp.colorDorado.withValues(alpha: 0.95),
TemaApp.colorNaranja.withValues(alpha: 0.58),
Colors.black.withValues(alpha: 0.76),
],
),
border: Border.all(color: TemaApp.colorDorado, width: 3),
boxShadow: [
BoxShadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.55),
blurRadius: 42,
spreadRadius: 5,
),
],
),
child: const Icon(Icons.sports_esports_rounded, size: 48, color: Color(0xFF241103)),
),
const SizedBox(height: 18),
Text(
'¿Cómo querés jugar?',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: TemaApp.colorDorado,
fontSize: 32,
fontWeight: FontWeight.w900,
shadows: [
Shadow(color: TemaApp.colorNaranja.withValues(alpha: 0.45), blurRadius: 16),
],
),
),
const SizedBox(height: 8),
Text(
'Elegí el tipo de partida y arrancá sin fricción.',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: TemaApp.colorTextoSecundario,
),
),
],
),
],
),
);
}
}
class _ModoCard extends StatelessWidget {
final IconData icono;
final String titulo;
final String subtitulo;
final String descripcion;
final bool destacado;
final VoidCallback onTap;
@@ -92,6 +153,7 @@ class _ModoCard extends StatelessWidget {
const _ModoCard({
required this.icono,
required this.titulo,
required this.subtitulo,
required this.descripcion,
required this.onTap,
this.destacado = false,
@@ -100,45 +162,86 @@ class _ModoCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = destacado ? TemaApp.colorNaranja : TemaApp.colorAcento;
return Card(
color: TemaApp.colorTarjeta,
return Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(28),
onTap: onTap,
child: Padding(
padding: const EdgeInsets.all(18),
child: Row(
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.18),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: color.withValues(alpha: 0.7)),
),
child: Icon(icono, color: color, size: 30),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFF111C29).withValues(alpha: 0.94),
(destacado ? const Color(0xFF2A1620) : const Color(0xFF15111F)).withValues(alpha: 0.92),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(28),
border: Border.all(color: color.withValues(alpha: destacado ? 0.78 : 0.48)),
boxShadow: [
BoxShadow(
color: color.withValues(alpha: destacado ? 0.26 : 0.14),
blurRadius: destacado ? 34 : 22,
offset: const Offset(0, 14),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
],
),
child: Stack(
children: [
Positioned.fill(
child: Image.asset(
'assets/ui/premium/card_sheen_overlay.png',
fit: BoxFit.cover,
opacity: AlwaysStoppedAnimation(destacado ? 0.34 : 0.22),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: Row(
children: [
Text(titulo, style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 6),
Text(
descripcion,
style: Theme.of(context).textTheme.bodyMedium,
Container(
width: 64,
height: 64,
decoration: BoxDecoration(
color: color.withValues(alpha: 0.18),
borderRadius: BorderRadius.circular(22),
border: Border.all(color: color.withValues(alpha: 0.72)),
),
child: Icon(icono, color: color, size: 34),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
titulo.toUpperCase(),
style: Theme.of(context).textTheme.titleLarge?.copyWith(
color: destacado ? TemaApp.colorDorado : Colors.white,
fontWeight: FontWeight.w900,
letterSpacing: 0.8,
),
),
const SizedBox(height: 3),
Text(
subtitulo,
style: Theme.of(context).textTheme.titleMedium?.copyWith(color: color),
),
const SizedBox(height: 7),
Text(descripcion, style: Theme.of(context).textTheme.bodyMedium),
],
),
),
const SizedBox(width: 8),
Icon(Icons.chevron_right_rounded, color: color, size: 32),
],
),
),
const SizedBox(width: 8),
const Icon(Icons.chevron_right),
],
),
),
),
);
}
}
}