105 lines
2.9 KiB
Dart
105 lines
2.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../../../../core/theme/app_theme.dart';
|
|
|
|
class XPBarWidget extends StatelessWidget {
|
|
final int currentXP;
|
|
final int level;
|
|
final double progress;
|
|
final int nextLevelXP;
|
|
|
|
const XPBarWidget({
|
|
super.key,
|
|
required this.currentXP,
|
|
required this.level,
|
|
required this.progress,
|
|
required this.nextLevelXP,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
// XP Text
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'XP',
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
Text(
|
|
'$currentXP / $nextLevelXP',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: AppTheme.primaryColor,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
|
|
// Progress Bar
|
|
Stack(
|
|
children: [
|
|
// Background
|
|
Container(
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color: AppTheme.xpBarBackground,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(
|
|
color: AppTheme.primaryColor.withValues(alpha: 0.3),
|
|
width: 2,
|
|
),
|
|
),
|
|
),
|
|
|
|
// Fill
|
|
FractionallySizedBox(
|
|
widthFactor: progress.clamp(0.0, 1.0),
|
|
child: Container(
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [
|
|
AppTheme.primaryColor,
|
|
AppTheme.primaryColor.withValues(alpha: 0.7),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppTheme.primaryColor.withValues(alpha: 0.5),
|
|
blurRadius: 8,
|
|
spreadRadius: 1,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
// Percentage Text
|
|
Container(
|
|
height: 32,
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
'${(progress * 100).toStringAsFixed(0)}%',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
shadows: [
|
|
const Shadow(
|
|
color: Colors.black,
|
|
blurRadius: 4,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|