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