| ํญ๋ชฉ | ๋ด์ฉ |
|---|---|
| Invoke | /shared:resources |
| Aliases | /ui:theme, /widget:create |
| Tools | Read, Edit, Write, Glob, Grep |
| Model | sonnet |
| Skills | flutter-ui |
Resources Agent#
Specialized agent for UI component, theme, and extension method generation
Role#
Creates and manages UI elements in the Resources package.
- AppTheme (Light/Dark mode)
- CoUI Flutter component customization
- Common widgets (Banner, Card, Dialog, Table)
- BuildContext extension methods
Activation Conditions#
/shared:resourcesActivated when command is invoked- Invoked during UI component, theme, and extension method work
Parameters#
| Parameter | Required | Description |
|---|---|---|
component_type |
โ | theme, widget, extension |
component_name | โ | Component name (PascalCase) |
category | โ | Widget category (banner, card, dialog, table etc.) |
Package Structure#
package/resources/lib/
โโโ resources.dart # Export ํ์ผ
โโโ src/
โโโ core/
โ โโโ extensions/ # BuildContext ํ์ฅ
โ โ โโโ theme_context_extension.dart
โ โโโ locale/ # ๋ก์ผ์ผ ์ ํธ๋ฆฌํฐ
โ โโโ size/ # ์ฌ์ด์ฆ ์์
โ โโโ theme/ # ํ
๋ง ์ ์
โ โ โโโ app_theme.dart
โ โ โโโ app_color_scheme.dart
โ โ โโโ app_typography.dart
โ โ โโโ app_component_theme.dart
โ โโโ util/ # ์ ํธ๋ฆฌํฐ
โ โโโ generated/ # ์๋ ์์ฑ (assets)
โโโ widgets/ # ๊ณตํต ์์ ฏ
โโโ banner/
โโโ card/
โโโ console/
โโโ dialog/
โโโ navigation/
โโโ table/
Import Order (Required)#
// 1. Flutter standard
import 'package:flutter/material.dart';
// 2. CoUI Flutter
import 'package:coui_flutter/coui_flutter.dart';
// 3. ๋ด๋ถ ๋ชจ๋
import '../theme/app_color_scheme.dart';
import '../theme/app_typography.dart';
Core Patterns#
1. AppTheme Definition#
import 'package:coui_flutter/coui_flutter.dart';
import 'package:flutter/material.dart';
import 'app_color_scheme.dart';
import 'app_component_theme.dart';
import 'app_typography.dart';
/// ์ฑ ํ
๋ง ์ ์
///
/// CoUI์ [ThemeData]๋ฅผ ํ์ฅํ์ฌ Light/Dark ๋ชจ๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
abstract final class AppTheme {
/// default ๋ค๋น๊ฒ์ด์
๋ฐ ๋์ด
static const double defaultNavBarHeight = 60;
// ============ Light Theme ============
static const ColorScheme _lightColorScheme = AppColorScheme.light;
static const Typography _lightTypography = AppTypography.pretendard;
/// Light ํ
๋ง
static ThemeData get light => ThemeData.new(
colorScheme: _lightColorScheme,
componentTheme: AppComponentTheme.from(
colorScheme: _lightColorScheme,
typography: _lightTypography,
),
typography: _lightTypography,
);
// ============ Dark Theme ============
static const ColorScheme _darkColorScheme = AppColorScheme.dark;
static const Typography _darkTypography = AppTypography.pretendard;
/// Dark ํ
๋ง
static ThemeData get dark => ThemeData.new(
colorScheme: _darkColorScheme,
componentTheme: AppComponentTheme.from(
colorScheme: _darkColorScheme,
typography: _darkTypography,
),
typography: _darkTypography,
);
}
2. ColorScheme Definition#
import 'package:coui_flutter/coui_flutter.dart';
/// ์ฑ ์์ ์คํด ์ ์
abstract final class AppColorScheme {
/// Light ๋ชจ๋ ์์ ์คํด
static const ColorScheme light = ColorScheme(
brightness: Brightness.light,
primary: Color(0xFF1976D2),
onPrimary: Color(0xFFFFFFFF),
secondary: Color(0xFF03DAC6),
onSecondary: Color(0xFF000000),
error: Color(0xFFB00020),
onError: Color(0xFFFFFFFF),
surface: Color(0xFFFFFFFF),
onSurface: Color(0xFF000000),
// ... ์ถ๊ฐ ์์
);
/// Dark ๋ชจ๋ ์์ ์คํด
static const ColorScheme dark = ColorScheme(
brightness: Brightness.dark,
primary: Color(0xFF90CAF9),
onPrimary: Color(0xFF000000),
// ... ์ถ๊ฐ ์์
);
}
3. Typography Definition#
import 'package:coui_flutter/coui_flutter.dart';
import 'package:flutter/material.dart' as material;
/// ์ฑ ํ์ดํฌ๊ทธ๋ํผ ์ ์
abstract final class AppTypography {
/// Pretendard ํฐํธ ๊ธฐ๋ฐ ํ์ดํฌ๊ทธ๋ํผ
static const Typography pretendard = Typography(
fontFamily: 'Pretendard',
displayLarge: material.TextStyle(
fontSize: 57,
fontWeight: material.FontWeight.w400,
letterSpacing: -0.25,
),
displayMedium: material.TextStyle(
fontSize: 45,
fontWeight: material.FontWeight.w400,
),
// ... ์ถ๊ฐ ์คํ์ผ
);
}
4. BuildContext Extension Methods#
import 'package:coui_flutter/coui_flutter.dart';
import 'package:flutter/material.dart';
/// Resources ํ
๋ง ํ์ฅ
extension ResourcesThemeContextExtension on BuildContext {
/// ComponentThemeData ์ ๊ทผ
ComponentThemeData? get componentTheme => Theme.of(this).componentTheme;
/// ColorScheme ์ ๊ทผ
ColorScheme get colorScheme => Theme.of(this).colorScheme;
/// Typography ์ ๊ทผ
Typography get typography => Theme.of(this).typography;
/// TextTheme ์ ๊ทผ
TextTheme get textTheme => Theme.of(this).textTheme;
}
5. Common Widget Pattern (TableBuilder)#
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
/// ๋ฒ์ฉ ํ
์ด๋ธ ๋น๋
///
/// ์ ๋ ฌ, ์ปฌ๋ผ ๋ฆฌ์ฌ์ด์ฆ, ๋ฆฌ์ค๋, ๊ฐ์์ฑ ์ ์ด ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
class TableBuilder<T, TSortField> extends HookWidget {
/// TableBuilder ์์ฑ์
const TableBuilder({
required this.items,
required this.columns,
this.isLoading = false,
this.sortState,
this.onSortChanged,
this.enableColumnResize = false,
this.enableColumnReorder = false,
this.visibilityController,
this.onRowTap,
this.rowHeight,
this.headerHeight,
super.key,
});
/// ํ
์ด๋ธ ๋ฐ์ดํฐ ํญ๋ชฉ
final List<T> items;
/// ์ปฌ๋ผ ์ ์
final List<TableColumnDef<T, TSortField>> columns;
/// ๋ก๋ฉ ์ํ
final bool isLoading;
/// ์ ๋ ฌ ์ํ
final SortState<TSortField>? sortState;
/// ์ ๋ ฌ ๋ณ๊ฒฝ ์ฝ๋ฐฑ
final ValueChanged<SortState<TSortField>>? onSortChanged;
/// ์ปฌ๋ผ ๋ฆฌ์ฌ์ด์ฆ ํ์ฑํ
final bool enableColumnResize;
/// ์ปฌ๋ผ ๋ฆฌ์ค๋ ํ์ฑํ
final bool enableColumnReorder;
/// ๊ฐ์์ฑ ์ปจํธ๋กค๋ฌ
final ColumnVisibilityController? visibilityController;
/// ํ ํญ ์ฝ๋ฐฑ
final ValueChanged<T>? onRowTap;
/// ํ ๋์ด
final double? rowHeight;
/// ํค๋ ๋์ด
final double? headerHeight;
@override
Widget build(BuildContext context) {
// ํ
์ด๋ธ ๊ตฌํ...
}
}
/// ํ
์ด๋ธ ์ปฌ๋ผ ์ ์
class TableColumnDef<T, TSortField> {
const TableColumnDef({
required this.id,
required this.title,
required this.cellBuilder,
this.width,
this.minWidth,
this.maxWidth,
this.sortField,
this.isVisible = true,
});
final String id;
final String title;
final Widget Function(T item) cellBuilder;
final double? width;
final double? minWidth;
final double? maxWidth;
final TSortField? sortField;
final bool isVisible;
}
6. Dialog Pattern#
import 'package:flutter/material.dart';
/// Show confirmation dialog
Future<bool?> showConfirmDialog(
BuildContext context, {
required String title,
required String message,
String? confirmText,
String? cancelText,
}) {
return showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
title: Text(title),
content: Text(message),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: Text(cancelText ?? '์ทจ์'),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: Text(confirmText ?? 'ํ์ธ'),
),
],
),
);
}
CoUI Component Customization#
ComponentTheme Extension#
import 'package:coui_flutter/coui_flutter.dart';
/// ์ฑ ์ปดํฌ๋ํธ ํ
๋ง
abstract final class AppComponentTheme {
/// ColorScheme๊ณผ Typography๋ก ComponentThemeData ์์ฑ
static ComponentThemeData from({
required ColorScheme colorScheme,
required Typography typography,
}) {
return ComponentThemeData(
buttonTheme: ButtonThemeData(
primaryColor: colorScheme.primary,
textStyle: typography.labelLarge,
),
inputTheme: InputThemeData(
borderColor: colorScheme.outline,
focusColor: colorScheme.primary,
),
// ... ์ถ๊ฐ ์ปดํฌ๋ํธ ํ
๋ง
);
}
}
Reference Files#
package/resources/lib/src/core/theme/app_theme.dart
package/resources/lib/src/core/extensions/theme_context_extension.dart
package/resources/lib/src/widgets/table/table_builder.dart
package/resources/lib/src/widgets/dialog/confirm_dialog.dart
Checklist#
- CoUI Package import Verify
- Light/Dark Both themes Definition
- Define ColorScheme as constants
- Apply Pretendard font for Typography
- Implement BuildContext extension methods
- Write KDoc comments on widgets
- Place super.key as last parameter
- Specify Type parameters when using Generic Types