SolarNetwork/App
3
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Redesign leveling card

Browse Source
This commit is contained in:
LittleSheep
2025-09-24 14:29:50 +08:00
parent 83e40cd860
commit bb9adb963a
4 changed files with 162 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
lib/widgets/account/leveling_progress.dart
View File

@@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:styled_widget/styled_widget.dart';
@@ -8,52 +7,152 @@ class LevelingProgressCard extends StatelessWidget {
final int level;
final int experience;
final double progress;
final VoidCallback? onTap;
final bool isCompact;
const LevelingProgressCard({
super.key,
required this.level,
required this.experience,
required this.progress,
this.onTap,
this.isCompact = false,
});
@override
Widget build(BuildContext context) {
return Card(
// Calculate level stage (1-12, each stage covers 10 levels)
int stage = ((level - 1) ~/ 10) + 1;
stage = stage.clamp(1, 12); // Ensure stage is within 1-12
// Define colors for each stage
const List<Color> stageColors = [
Colors.green,
Colors.blue,
Colors.teal,
Colors.cyan,
Colors.indigo,
Colors.lime,
Colors.yellow,
Colors.amber,
Colors.orange,
Colors.deepOrange,
Colors.pink,
Colors.red,
];
Color stageColor = stageColors[stage - 1];
// Compact mode adjustments
final double levelFontSize = isCompact ? 14 : 18;
final double stageFontSize = isCompact ? 13 : 14;
final double experienceFontSize = isCompact ? 12 : 14;
final double progressHeight = isCompact ? 6 : 10;
final double horizontalPadding = isCompact ? 16 : 20;
final double verticalPadding = isCompact ? 12 : 16;
final double gapSize = isCompact ? 4 : 8;
final double rowSpacing = 12;
final cardContent = Card(
margin: EdgeInsets.zero,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
spacing: 8,
crossAxisAlignment: CrossAxisAlignment.baseline,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
textBaseline: TextBaseline.alphabetic,
children: [
Text(
'levelingProgressLevel'.tr(args: [level.toString()]),
style: GoogleFonts.robotoMono(),
).fontSize(13).bold(),
Text(
'levelingProgressExperience'.tr(args: [experience.toString()]),
style: GoogleFonts.robotoMono(),
).fontSize(13),
],
),
const Gap(8),
Tooltip(
message: '${(progress).toStringAsFixed(1)}%',
child: LinearProgressIndicator(
minHeight: 4,
value: progress / 100,
stopIndicatorRadius: 0,
trackGap: 0,
color: Theme.of(context).colorScheme.primary,
backgroundColor:
Theme.of(context).colorScheme.surfaceContainerHigh,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
gradient: LinearGradient(
colors: [
stageColor.withOpacity(0.1),
Theme.of(context).colorScheme.surface,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
],
).padding(horizontal: 16, vertical: 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
spacing: rowSpacing,
crossAxisAlignment: CrossAxisAlignment.baseline,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text(
'levelingProgressLevel'.tr(args: [level.toString()]),
style: TextStyle(
color: stageColor,
fontWeight: FontWeight.bold,
fontSize: levelFontSize,
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'levelingStage$stage'.tr(),
style: TextStyle(
color: stageColor.withOpacity(0.7),
fontWeight: FontWeight.w500,
fontSize: stageFontSize,
),
),
if (onTap != null) ...[
const Gap(4),
Icon(
Icons.arrow_forward_ios,
size: isCompact ? 10 : 12,
color: stageColor.withOpacity(0.7),
),
],
],
),
],
),
Gap(gapSize),
Row(
spacing: rowSpacing,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Tooltip(
message: '${progress.toStringAsFixed(1)}%',
child: LinearProgressIndicator(
minHeight: progressHeight,
value: progress,
borderRadius: BorderRadius.circular(32),
backgroundColor: Theme.of(
context,
).colorScheme.surfaceContainerLow.withOpacity(0.75),
color: stageColor,
stopIndicatorRadius: 0,
trackGap: 0,
),
),
),
Text(
'levelingProgressExperience'.tr(
args: [experience.toString()],
),
style: TextStyle(
color: Theme.of(
context,
).colorScheme.onSurface.withOpacity(0.8),
fontSize: experienceFontSize,
),
),
],
),
],
).padding(horizontal: horizontalPadding, vertical: verticalPadding),
),
),
);
return cardContent;
}
}