refactor(shared): 공통 위젯 및 색상 정리

This commit is contained in:
JiWoong Sul
2026-01-12 16:17:29 +09:00
parent 448f500ca0
commit b1d02de656
6 changed files with 92 additions and 96 deletions

View File

@@ -248,49 +248,49 @@ class RetroColors {
/// 다크 모드 ColorScheme /// 다크 모드 ColorScheme
static ColorScheme get darkColorScheme => ColorScheme.dark( static ColorScheme get darkColorScheme => ColorScheme.dark(
primary: _darkGold, primary: _darkGold,
onPrimary: _darkBg, onPrimary: _darkBg,
primaryContainer: _darkGoldDark, primaryContainer: _darkGoldDark,
onPrimaryContainer: _darkTextPrimary, onPrimaryContainer: _darkTextPrimary,
secondary: _darkBorder, secondary: _darkBorder,
onSecondary: _darkTextPrimary, onSecondary: _darkTextPrimary,
secondaryContainer: _darkPanelBg, secondaryContainer: _darkPanelBg,
onSecondaryContainer: _darkTextPrimary, onSecondaryContainer: _darkTextPrimary,
tertiary: _darkMp, tertiary: _darkMp,
onTertiary: _darkBg, onTertiary: _darkBg,
tertiaryContainer: _darkMpDark, tertiaryContainer: _darkMpDark,
onTertiaryContainer: _darkTextPrimary, onTertiaryContainer: _darkTextPrimary,
error: _darkHp, error: _darkHp,
onError: _darkBg, onError: _darkBg,
surface: _darkBg, surface: _darkBg,
onSurface: _darkTextPrimary, onSurface: _darkTextPrimary,
surfaceContainerHighest: _darkPanelBg, surfaceContainerHighest: _darkPanelBg,
outline: _darkBorder, outline: _darkBorder,
outlineVariant: _darkBorderLight, outlineVariant: _darkBorderLight,
); );
/// 라이트 모드 ColorScheme /// 라이트 모드 ColorScheme
static ColorScheme get lightColorScheme => ColorScheme.light( static ColorScheme get lightColorScheme => ColorScheme.light(
primary: _lightGold, primary: _lightGold,
onPrimary: _lightSurface, onPrimary: _lightSurface,
primaryContainer: _lightGoldLight, primaryContainer: _lightGoldLight,
onPrimaryContainer: _lightTextPrimary, onPrimaryContainer: _lightTextPrimary,
secondary: _lightBorder, secondary: _lightBorder,
onSecondary: _lightTextPrimary, onSecondary: _lightTextPrimary,
secondaryContainer: _lightPanelBg, secondaryContainer: _lightPanelBg,
onSecondaryContainer: _lightTextPrimary, onSecondaryContainer: _lightTextPrimary,
tertiary: _lightMp, tertiary: _lightMp,
onTertiary: _lightSurface, onTertiary: _lightSurface,
tertiaryContainer: _lightMpDark, tertiaryContainer: _lightMpDark,
onTertiaryContainer: _lightSurface, onTertiaryContainer: _lightSurface,
error: _lightHp, error: _lightHp,
onError: _lightSurface, onError: _lightSurface,
surface: _lightBg, surface: _lightBg,
onSurface: _lightTextPrimary, onSurface: _lightTextPrimary,
surfaceContainerHighest: _lightPanelBg, surfaceContainerHighest: _lightPanelBg,
outline: _lightBorder, outline: _lightBorder,
outlineVariant: _lightBorderDark, outlineVariant: _lightBorderDark,
); );
/// @deprecated Use darkColorScheme or lightColorScheme instead /// @deprecated Use darkColorScheme or lightColorScheme instead
static ColorScheme get colorScheme => darkColorScheme; static ColorScheme get colorScheme => darkColorScheme;

View File

@@ -40,23 +40,21 @@ class PixelBorderPainter extends CustomPainter {
..color = fillColor! ..color = fillColor!
..style = PaintingStyle.fill; ..style = PaintingStyle.fill;
canvas.drawRect( canvas.drawRect(
Rect.fromLTWH(borderWidth, borderWidth, Rect.fromLTWH(
size.width - borderWidth * 2, size.height - borderWidth * 2), borderWidth,
borderWidth,
size.width - borderWidth * 2,
size.height - borderWidth * 2,
),
bgPaint, bgPaint,
); );
} }
// 외곽 테두리 (상단, 좌측 - 어두운 색으로 깊이감) // 외곽 테두리 (상단, 좌측 - 어두운 색으로 깊이감)
// 상단 // 상단
canvas.drawRect( canvas.drawRect(Rect.fromLTWH(0, 0, size.width, borderWidth), outerPaint);
Rect.fromLTWH(0, 0, size.width, borderWidth),
outerPaint,
);
// 좌측 // 좌측
canvas.drawRect( canvas.drawRect(Rect.fromLTWH(0, 0, borderWidth, size.height), outerPaint);
Rect.fromLTWH(0, 0, borderWidth, size.height),
outerPaint,
);
// 외곽 테두리 (하단, 우측 - 어두운 색) // 외곽 테두리 (하단, 우측 - 어두운 색)
// 하단 // 하단
@@ -73,14 +71,22 @@ class PixelBorderPainter extends CustomPainter {
// 내곽 하이라이트 (상단, 좌측 내부 - 밝은 색으로 입체감) // 내곽 하이라이트 (상단, 좌측 내부 - 밝은 색으로 입체감)
// 상단 내부 // 상단 내부
canvas.drawRect( canvas.drawRect(
Rect.fromLTWH(borderWidth, borderWidth, Rect.fromLTWH(
size.width - borderWidth * 2, borderWidth * 0.5), borderWidth,
borderWidth,
size.width - borderWidth * 2,
borderWidth * 0.5,
),
innerPaint, innerPaint,
); );
// 좌측 내부 // 좌측 내부
canvas.drawRect( canvas.drawRect(
Rect.fromLTWH(borderWidth, borderWidth, Rect.fromLTWH(
borderWidth * 0.5, size.height - borderWidth * 2), borderWidth,
borderWidth,
borderWidth * 0.5,
size.height - borderWidth * 2,
),
innerPaint, innerPaint,
); );
} }
@@ -96,11 +102,9 @@ class PixelBorderPainter extends CustomPainter {
/// 골드 테두리 스타일 (타이틀, 중요 패널용) /// 골드 테두리 스타일 (타이틀, 중요 패널용)
class GoldBorderPainter extends PixelBorderPainter { class GoldBorderPainter extends PixelBorderPainter {
const GoldBorderPainter({ const GoldBorderPainter({super.borderWidth = 3.0, super.fillColor})
super.borderWidth = 3.0, : super(
super.fillColor, outerColor: RetroColors.goldDark,
}) : super( innerColor: RetroColors.goldLight,
outerColor: RetroColors.goldDark, );
innerColor: RetroColors.goldLight,
);
} }

View File

@@ -76,7 +76,9 @@ class _RetroButtonState extends State<RetroButton> {
child: GestureDetector( child: GestureDetector(
onTapDown: _isEnabled ? (_) => setState(() => _isPressed = true) : null, onTapDown: _isEnabled ? (_) => setState(() => _isPressed = true) : null,
onTapUp: _isEnabled ? (_) => setState(() => _isPressed = false) : null, onTapUp: _isEnabled ? (_) => setState(() => _isPressed = false) : null,
onTapCancel: _isEnabled ? () => setState(() => _isPressed = false) : null, onTapCancel: _isEnabled
? () => setState(() => _isPressed = false)
: null,
onTap: widget.onPressed, onTap: widget.onPressed,
child: AnimatedContainer( child: AnimatedContainer(
duration: const Duration(milliseconds: 100), duration: const Duration(milliseconds: 100),

View File

@@ -71,17 +71,12 @@ class RetroDialog extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: accent.withValues(alpha: 0.2), color: accent.withValues(alpha: 0.2),
border: Border( border: Border(bottom: BorderSide(color: accent, width: 2)),
bottom: BorderSide(color: accent, width: 2),
),
), ),
child: Row( child: Row(
children: [ children: [
if (titleIcon != null) ...[ if (titleIcon != null) ...[
Text( Text(titleIcon!, style: TextStyle(fontSize: 14, color: accent)),
titleIcon!,
style: TextStyle(fontSize: 14, color: accent),
),
const SizedBox(width: 8), const SizedBox(width: 8),
], ],
Expanded( Expanded(
@@ -140,25 +135,18 @@ class RetroTabBar extends StatelessWidget {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(bottom: BorderSide(color: borderColor, width: 2)),
bottom: BorderSide(color: borderColor, width: 2),
),
), ),
child: TabBar( child: TabBar(
controller: controller, controller: controller,
isScrollable: tabs.length > 3, isScrollable: tabs.length > 3,
indicator: BoxDecoration( indicator: BoxDecoration(
color: accent.withValues(alpha: 0.3), color: accent.withValues(alpha: 0.3),
border: Border( border: Border(bottom: BorderSide(color: accent, width: 2)),
bottom: BorderSide(color: accent, width: 2),
),
), ),
labelColor: accent, labelColor: accent,
unselectedLabelColor: mutedColor, unselectedLabelColor: mutedColor,
labelStyle: const TextStyle( labelStyle: const TextStyle(fontFamily: 'PressStart2P', fontSize: 9),
fontFamily: 'PressStart2P',
fontSize: 9,
),
unselectedLabelStyle: const TextStyle( unselectedLabelStyle: const TextStyle(
fontFamily: 'PressStart2P', fontFamily: 'PressStart2P',
fontSize: 9, fontSize: 9,
@@ -193,10 +181,7 @@ class RetroSectionHeader extends StatelessWidget {
child: Row( child: Row(
children: [ children: [
if (icon != null) ...[ if (icon != null) ...[
Text( Text(icon!, style: TextStyle(fontSize: 12, color: accent)),
icon!,
style: TextStyle(fontSize: 12, color: accent),
),
const SizedBox(width: 6), const SizedBox(width: 6),
], ],
Text( Text(
@@ -231,11 +216,7 @@ class RetroSectionHeader extends StatelessWidget {
/// 레트로 스타일 정보 박스 /// 레트로 스타일 정보 박스
/// 라이트/다크 모드 자동 지원 /// 라이트/다크 모드 자동 지원
class RetroInfoBox extends StatelessWidget { class RetroInfoBox extends StatelessWidget {
const RetroInfoBox({ const RetroInfoBox({super.key, required this.content, this.backgroundColor});
super.key,
required this.content,
this.backgroundColor,
});
final String content; final String content;
final Color? backgroundColor; final Color? backgroundColor;

View File

@@ -37,8 +37,14 @@ class RetroPanel extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final painter = useGoldBorder final painter = useGoldBorder
? GoldBorderPainter(borderWidth: borderWidth, fillColor: backgroundColor) ? GoldBorderPainter(
: PixelBorderPainter(borderWidth: borderWidth, fillColor: backgroundColor); borderWidth: borderWidth,
fillColor: backgroundColor,
)
: PixelBorderPainter(
borderWidth: borderWidth,
fillColor: backgroundColor,
);
return CustomPaint( return CustomPaint(
painter: painter, painter: painter,
@@ -77,7 +83,9 @@ class _PanelTitle extends StatelessWidget {
: RetroColors.panelBorderOuter.withValues(alpha: 0.5), : RetroColors.panelBorderOuter.withValues(alpha: 0.5),
border: Border( border: Border(
bottom: BorderSide( bottom: BorderSide(
color: useGoldBorder ? RetroColors.gold : RetroColors.panelBorderInner, color: useGoldBorder
? RetroColors.gold
: RetroColors.panelBorderInner,
width: 1, width: 1,
), ),
), ),

View File

@@ -45,7 +45,8 @@ class RetroProgressBar extends StatelessWidget {
/// 퍼센트 표시 여부 /// 퍼센트 표시 여부
final bool showPercentage; final bool showPercentage;
double get _percentage => maxValue > 0 ? (value / maxValue).clamp(0.0, 1.0) : 0; double get _percentage =>
maxValue > 0 ? (value / maxValue).clamp(0.0, 1.0) : 0;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@@ -69,9 +70,7 @@ class RetroProgressBar extends StatelessWidget {
color: emptyColor, color: emptyColor,
border: Border.all(color: RetroColors.panelBorderOuter, width: 2), border: Border.all(color: RetroColors.panelBorderOuter, width: 2),
), ),
child: showSegments child: showSegments ? _buildSegmentedBar() : _buildSolidBar(),
? _buildSegmentedBar()
: _buildSolidBar(),
), ),
), ),
if (showPercentage) ...[ if (showPercentage) ...[
@@ -108,7 +107,9 @@ class RetroProgressBar extends StatelessWidget {
border: Border( border: Border(
right: index < segmentCount - 1 right: index < segmentCount - 1
? BorderSide( ? BorderSide(
color: RetroColors.panelBorderOuter.withValues(alpha: 0.5), color: RetroColors.panelBorderOuter.withValues(
alpha: 0.5,
),
width: 1, width: 1,
) )
: BorderSide.none, : BorderSide.none,