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

253
lib/tema/componentes_farolero.dart
View File

@@ -20,9 +20,36 @@ class FondoFarolero extends StatelessWidget {
Widget build(BuildContext context) {
return DecoratedBox(
decoration: const BoxDecoration(gradient: TemaApp.gradienteFondo),
child: CustomPaint(
painter: _FondoFaroleroPainter(intenso: intenso),
child: child,
child: Stack(
children: [
Positioned.fill(
child: CustomPaint(painter: _FondoFaroleroPainter(intenso: intenso)),
),
Positioned(
top: intenso ? -180 : -140,
left: -220,
right: -220,
child: IgnorePointer(
child: Image.asset(
'assets/ui/premium/lantern_radial_glow.png',
height: intenso ? 720 : 560,
fit: BoxFit.contain,
opacity: AlwaysStoppedAnimation(intenso ? 0.56 : 0.34),
),
),
),
Positioned.fill(
child: IgnorePointer(
child: Image.asset(
'assets/ui/premium/sparks_overlay.png',
fit: BoxFit.cover,
repeat: ImageRepeat.repeat,
opacity: AlwaysStoppedAnimation(intenso ? 0.38 : 0.22),
),
),
),
Positioned.fill(child: child),
],
),
);
}
@@ -49,9 +76,138 @@ class PanelFarolero extends StatelessWidget {
return Container(
width: double.infinity,
margin: margin,
padding: padding,
decoration: TemaApp.decoracionPanel(color: color, borderColor: borderColor),
child: child,
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
child: Stack(
children: [
Positioned.fill(
child: Image.asset(
'assets/ui/premium/card_sheen_overlay.png',
fit: BoxFit.cover,
opacity: const AlwaysStoppedAnimation(0.26),
),
),
Padding(padding: padding, child: child),
],
),
),
);
}
}
class EncabezadoFarolero extends StatelessWidget {
final IconData icono;
final String titulo;
final String? subtitulo;
final Color color;
final Widget? trailing;
final EdgeInsetsGeometry padding;
const EncabezadoFarolero({
super.key,
required this.icono,
required this.titulo,
this.subtitulo,
this.color = TemaApp.colorNaranja,
this.trailing,
this.padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 18),
});
@override
Widget build(BuildContext context) {
return PanelFarolero(
padding: padding,
child: Row(
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
color.withValues(alpha: 0.34),
TemaApp.colorSuperficie.withValues(alpha: 0.72),
],
),
border: Border.all(color: color.withValues(alpha: 0.72)),
boxShadow: [
BoxShadow(
color: color.withValues(alpha: 0.22),
blurRadius: 22,
),
],
),
child: Icon(icono, color: color, size: 30),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
titulo,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: TemaApp.colorDorado,
fontWeight: FontWeight.w900,
),
),
if (subtitulo != null) ...[
const SizedBox(height: 3),
Text(
subtitulo!,
style: Theme.of(context).textTheme.bodyMedium,
),
],
],
),
),
if (trailing != null) ...[
const SizedBox(width: 12),
trailing!,
],
],
),
);
}
}
class EstadoVacioFarolero extends StatelessWidget {
final IconData icono;
final String titulo;
final String subtitulo;
const EstadoVacioFarolero({
super.key,
required this.icono,
required this.titulo,
required this.subtitulo,
});
@override
Widget build(BuildContext context) {
return PanelFarolero(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 28),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icono, color: TemaApp.colorNaranja, size: 46),
const SizedBox(height: 14),
Text(
titulo,
style: Theme.of(context).textTheme.titleLarge,
textAlign: TextAlign.center,
),
const SizedBox(height: 8),
Text(
subtitulo,
style: Theme.of(context).textTheme.bodyMedium,
textAlign: TextAlign.center,
),
],
),
);
}
}
@@ -138,17 +294,17 @@ class BotonFarolero extends StatelessWidget {
return Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(18),
onTap: onPressed,
child: Ink(
height: 54,
height: 58,
decoration: BoxDecoration(
gradient: habilitado
? gradient
: const LinearGradient(
colors: [TemaApp.colorTarjeta, TemaApp.colorSuperficie],
),
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(18),
border: Border.all(
color: habilitado
? TemaApp.colorDorado.withValues(alpha: 0.74)
@@ -157,29 +313,46 @@ class BotonFarolero extends StatelessWidget {
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.34),
blurRadius: 14,
offset: const Offset(0, 8),
blurRadius: 18,
offset: const Offset(0, 10),
),
if (habilitado)
BoxShadow(
color: TemaApp.colorNaranja.withValues(alpha: 0.16),
blurRadius: 22,
),
],
),
child: Row(
child: Stack(
children: [
SizedBox(
width: 58,
child: Icon(icono, color: foreground, size: 28),
),
Expanded(
child: Text(
texto.toUpperCase(),
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: foreground,
fontSize: 18,
fontWeight: FontWeight.w800,
),
Positioned.fill(
child: Image.asset(
'assets/ui/premium/card_sheen_overlay.png',
fit: BoxFit.cover,
opacity: const AlwaysStoppedAnimation(0.18),
),
),
const SizedBox(width: 58),
Row(
children: [
SizedBox(
width: 58,
child: Icon(icono, color: foreground, size: 28),
),
Expanded(
child: Text(
texto.toUpperCase(),
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: foreground,
fontSize: 18,
fontWeight: FontWeight.w900,
letterSpacing: 0.8,
),
),
),
const SizedBox(width: 58),
],
),
],
),
),
@@ -254,15 +427,27 @@ class TarjetaPalabraFarolero extends StatelessWidget {
),
],
),
child: Text(
palabra.toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.oswald(
color: const Color(0xFF1B0C05),
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: 0,
),
child: Stack(
alignment: Alignment.center,
children: [
Positioned.fill(
child: Image.asset(
'assets/ui/premium/word_reveal_glow.png',
fit: BoxFit.cover,
opacity: const AlwaysStoppedAnimation(0.28),
),
),
Text(
palabra.toUpperCase(),
textAlign: TextAlign.center,
style: GoogleFonts.oswald(
color: const Color(0xFF1B0C05),
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: 0,
),
),
],
),
);
}

39
lib/tema/tema_app.dart
View File

@@ -89,8 +89,8 @@ class TemaApp {
elevation: 0,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: const BorderSide(color: colorBorde),
borderRadius: BorderRadius.circular(18),
side: BorderSide(color: colorDorado.withValues(alpha: 0.34)),
),
),
elevatedButtonTheme: ElevatedButtonThemeData(
@@ -99,12 +99,13 @@ class TemaApp {
foregroundColor: Colors.black,
disabledBackgroundColor: colorTarjeta,
disabledForegroundColor: colorTextoSecundario,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 15),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
elevation: 0,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
textStyle: GoogleFonts.oswald(
fontWeight: FontWeight.w700,
fontSize: 16,
letterSpacing: 0,
fontSize: 17,
letterSpacing: 0.6,
),
),
),
@@ -112,8 +113,8 @@ class TemaApp {
style: OutlinedButton.styleFrom(
foregroundColor: colorTexto,
side: const BorderSide(color: colorBorde),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 15),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(18)),
textStyle: GoogleFonts.oswald(
fontWeight: FontWeight.w700,
fontSize: 16,
@@ -125,22 +126,22 @@ class TemaApp {
filled: true,
fillColor: const Color(0xFF0B1117),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: colorBorde),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: colorBorde),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(16),
borderSide: const BorderSide(color: colorNaranja),
),
labelStyle: const TextStyle(color: colorTextoSecundario),
hintStyle: const TextStyle(color: colorTextoSecundario),
),
appBarTheme: AppBarTheme(
backgroundColor: colorFondo,
backgroundColor: Colors.transparent,
foregroundColor: colorNaranja,
centerTitle: true,
elevation: 0,
@@ -199,13 +200,19 @@ class TemaApp {
}) {
return BoxDecoration(
color: color ?? colorTarjeta.withValues(alpha: 0.84),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: borderColor ?? colorBorde),
borderRadius: BorderRadius.circular(18),
border: Border.all(
color: borderColor ?? colorDorado.withValues(alpha: 0.30),
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.35),
blurRadius: 18,
offset: const Offset(0, 10),
blurRadius: 22,
offset: const Offset(0, 12),
),
BoxShadow(
color: colorNaranja.withValues(alpha: 0.10),
blurRadius: 24,
),
],
);