Gamificación
This commit is contained in:
@@ -3,6 +3,7 @@ import 'dart:math' as math;
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
import '../modelos/gamificacion_usuario.dart';
|
||||
import 'tema_app.dart';
|
||||
|
||||
class FondoFarolero extends StatelessWidget {
|
||||
@@ -272,6 +273,8 @@ class AvatarFarolero extends StatelessWidget {
|
||||
final String? assetPath;
|
||||
final Color color;
|
||||
final double size;
|
||||
final int fuego;
|
||||
final List<String> medallas;
|
||||
|
||||
const AvatarFarolero({
|
||||
super.key,
|
||||
@@ -279,43 +282,172 @@ class AvatarFarolero extends StatelessWidget {
|
||||
this.assetPath,
|
||||
this.color = TemaApp.colorNaranja,
|
||||
this.size = 40,
|
||||
this.fuego = 0,
|
||||
this.medallas = const [],
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [color.withValues(alpha: 0.9), TemaApp.colorSuperficie],
|
||||
),
|
||||
border: Border.all(color: TemaApp.colorDorado, width: 2),
|
||||
),
|
||||
child: Center(
|
||||
child: assetPath == null
|
||||
? Text(
|
||||
texto,
|
||||
style: TextStyle(
|
||||
color: TemaApp.colorTexto,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: size * 0.36,
|
||||
),
|
||||
)
|
||||
: ClipOval(
|
||||
child: Image.asset(
|
||||
assetPath!,
|
||||
width: size,
|
||||
height: size,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
final lienzo = size + 10;
|
||||
return SizedBox(
|
||||
width: lienzo,
|
||||
height: lienzo,
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
CustomPaint(
|
||||
size: Size(lienzo, lienzo),
|
||||
painter: _FuegoAvatarPainter(fuego: fuego),
|
||||
),
|
||||
Container(
|
||||
width: size,
|
||||
height: size,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: RadialGradient(
|
||||
colors: [color.withValues(alpha: 0.9), TemaApp.colorSuperficie],
|
||||
),
|
||||
border: Border.all(color: TemaApp.colorDorado, width: 2),
|
||||
),
|
||||
child: Center(
|
||||
child: assetPath == null
|
||||
? Text(
|
||||
texto,
|
||||
style: TextStyle(
|
||||
color: TemaApp.colorTexto,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: size * 0.36,
|
||||
),
|
||||
)
|
||||
: ClipOval(
|
||||
child: Image.asset(
|
||||
assetPath!,
|
||||
width: size,
|
||||
height: size,
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (medallas.isNotEmpty)
|
||||
Positioned(
|
||||
right: -2,
|
||||
bottom: -4,
|
||||
child: _MiniMedalla(id: medallas.first),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MedallasCompactasFarolero extends StatelessWidget {
|
||||
final List<String> ids;
|
||||
final int max;
|
||||
|
||||
const MedallasCompactasFarolero({
|
||||
super.key,
|
||||
required this.ids,
|
||||
this.max = 3,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final visibles = ids.take(max).toList();
|
||||
if (visibles.isEmpty) return const SizedBox.shrink();
|
||||
return Wrap(
|
||||
spacing: 4,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
for (final id in visibles) _MiniMedalla(id: id),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MiniMedalla extends StatelessWidget {
|
||||
final String id;
|
||||
|
||||
const _MiniMedalla({required this.id});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final medalla = EstadisticasPerfilUsuario.catalogoMedallas[id];
|
||||
if (medalla == null) return const SizedBox.shrink();
|
||||
return Tooltip(
|
||||
message: '${medalla.nombre}: ${medalla.descripcion}',
|
||||
child: Container(
|
||||
width: 26,
|
||||
height: 26,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: TemaApp.colorSuperficie.withValues(alpha: 0.92),
|
||||
shape: BoxShape.circle,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.32),
|
||||
blurRadius: 6,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Image.asset(
|
||||
medalla.assetPath,
|
||||
width: 26,
|
||||
height: 26,
|
||||
fit: BoxFit.contain,
|
||||
errorBuilder: (_, __, ___) =>
|
||||
Text(medalla.emoji, style: const TextStyle(fontSize: 12)),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _FuegoAvatarPainter extends CustomPainter {
|
||||
final int fuego;
|
||||
|
||||
const _FuegoAvatarPainter({required this.fuego});
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final porcentaje = fuego.clamp(0, 100) / 100;
|
||||
final rect = Offset.zero & size;
|
||||
final centro = rect.center;
|
||||
final radio = math.min(size.width, size.height) / 2 - 3;
|
||||
final base = Paint()
|
||||
..isAntiAlias = true
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 4
|
||||
..strokeCap = StrokeCap.round
|
||||
..color = Colors.black.withValues(alpha: 0.28);
|
||||
canvas.drawCircle(centro, radio, base);
|
||||
if (porcentaje <= 0) return;
|
||||
|
||||
final fuegoPaint = Paint()
|
||||
..isAntiAlias = true
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = 4
|
||||
..strokeCap = StrokeCap.round
|
||||
..shader = const SweepGradient(
|
||||
colors: [Color(0xFFFFC247), Color(0xFFFF7A1A), Color(0xFFE53935)],
|
||||
).createShader(Rect.fromCircle(center: centro, radius: radio));
|
||||
canvas.drawArc(
|
||||
Rect.fromCircle(center: centro, radius: radio),
|
||||
-math.pi / 2,
|
||||
math.pi * 2 * porcentaje,
|
||||
false,
|
||||
fuegoPaint,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _FuegoAvatarPainter oldDelegate) {
|
||||
return oldDelegate.fuego != fuego;
|
||||
}
|
||||
}
|
||||
|
||||
class _FondoFaroleroPainter extends CustomPainter {
|
||||
final bool intenso;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user