refactor(shared): 공통 위젯 및 색상 정리
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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,
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user