fix(ui): 버프 아이콘 3개 이상 시 오버플로 수정

- SizedBox(width: 60)를 ConstrainedBox(maxWidth: 72)로 변경
- Row를 Wrap으로 변경하여 자동 줄바꿈 처리
This commit is contained in:
JiWoong Sul
2025-12-31 17:46:19 +09:00
parent 1d22161d2c
commit 0a2ecfc5b5

View File

@@ -1,11 +1,11 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
import 'package:askiineverdie/src/core/animation/ascii_animation_type.dart';
import 'package:askiineverdie/src/core/model/combat_event.dart';
import 'package:askiineverdie/src/core/model/combat_state.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/features/game/widgets/ascii_animation_card.dart';
import 'package:asciineverdie/data/game_text_l10n.dart' as l10n;
import 'package:asciineverdie/src/core/animation/ascii_animation_type.dart';
import 'package:asciineverdie/src/core/model/combat_event.dart';
import 'package:asciineverdie/src/core/model/combat_state.dart';
import 'package:asciineverdie/src/core/model/game_state.dart';
import 'package:asciineverdie/src/features/game/widgets/ascii_animation_card.dart';
/// 모바일용 확장 애니메이션 패널
///
@@ -414,6 +414,8 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
}
/// 활성 버프 아이콘 (최대 3개)
///
/// Wrap 위젯을 사용하여 공간 부족 시 자동 줄바꿈 처리
Widget _buildBuffIcons() {
final buffs = widget.skillSystem.activeBuffs;
final currentMs = widget.skillSystem.elapsedMs;
@@ -425,41 +427,40 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
// 최대 3개만 표시
final displayBuffs = buffs.take(3).toList();
return SizedBox(
width: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
return ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 72, minWidth: 60),
child: Wrap(
alignment: WrapAlignment.center,
spacing: 2,
runSpacing: 2,
children: displayBuffs.map((buff) {
final remainingMs = buff.remainingDuration(currentMs);
final progress = remainingMs / buff.effect.durationMs;
final isExpiring = remainingMs < 3000;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: Stack(
alignment: Alignment.center,
children: [
// 진행률 원형 표시
SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
value: progress.clamp(0.0, 1.0),
strokeWidth: 2,
backgroundColor: Colors.grey.shade700,
valueColor: AlwaysStoppedAnimation(
isExpiring ? Colors.orange : Colors.lightBlue,
),
return Stack(
alignment: Alignment.center,
children: [
// 진행률 원형 표시
SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
value: progress.clamp(0.0, 1.0),
strokeWidth: 2,
backgroundColor: Colors.grey.shade700,
valueColor: AlwaysStoppedAnimation(
isExpiring ? Colors.orange : Colors.lightBlue,
),
),
// 버프 아이콘
Icon(
Icons.trending_up,
size: 10,
color: isExpiring ? Colors.orange : Colors.lightBlue,
),
],
),
),
// 버프 아이콘
Icon(
Icons.trending_up,
size: 10,
color: isExpiring ? Colors.orange : Colors.lightBlue,
),
],
);
}).toList(),
),