CoUI Flutter Quick Reference

// ✅ Project standard: use textStyles
style: context.textStyles.lgSemibold
style: context.textStyles.smSemibold
style: context.textStyles.sm.merge(context.textStyles.medium)

// ✅ copyWith composition
style: context.textStyles.lgSemibold.copyWith(
  color: context.appColors.neutral5,
)

// ✅ New API: features parameter
TextField(
  controller: controller,
  placeholder: const Text('입력해주세요'),
  filled: true,  // 배경색 적용 (base200)
  features: [
    InputFeature.leading(const Icon(Icons.search, size: 20)),
    InputFeature.trailing(const Icon(Icons.clear, size: 18)),
  ],
  onChanged: (value) => ...,
)

// ❌ deprecated: leading/trailing parameters
TextField(
  leading: Icon(Icons.search),   // deprecated
  trailing: Icon(Icons.clear),   // deprecated
)

// ✅ CORRECT: Use existing sizes
ButtonStyle.primary(size: .normal)
ButtonStyle.primary(size: .small)

// ❌ WRONG: medium doesn't exist (compile error)
ButtonStyle.primary(size: .medium)  // 에러!

// Compact button in table
Button.outline(
  style: const ButtonStyle.outline(density: .dense),
  onPressed: handleTap,
  child: const Text('복사'),
)

// ✅ Basic usage
const PrimaryBadge(child: Text('판매in progress'))
const DestructiveBadge(child: Text('판매 in progress지'))

// ✅ Make compact with density adjustment
const PrimaryBadge(
  style: ButtonStyle.primary(density: .dense),
  child: Text('판매in progress'),
)

const DestructiveBadge(
  style: ButtonStyle.destructive(density: .dense),
  child: Text('판매 in progress지'),
)

// ✅ Conditional badge
child: book.isActive
    ? const PrimaryBadge(
        style: ButtonStyle.primary(density: .dense),
        child: Text('판매in progress'),
      )
    : const DestructiveBadge(
        style: ButtonStyle.destructive(density: .dense),
        child: Text('판매 in progress지'),
      ),

const Gap.s1()        // 4px
const Gap.s2()        // 8px
const Gap.s4()        // 16px
Gap(Insets.small)     // 8px
Gap(Insets.medium)    // 16px
Gap(Insets.large)     // 24px

// Skeleton loading (entire widget)
widget.skeletonizer(enabled: state.isLoading)

// Conditional loading (spinner)
widget.loadingOr(
  isLoading: state.isLoading,
  loadingWidget: const CircularProgressIndicator(),
)

// Empty state handling
listWidget.emptyOrWhen(
  condition: () => list.isEmpty,
  emptyWidget: const EmptyStateWidget(),
)

class MyPage extends HookWidget {
  const MyPage({super.key});

  @override
  Widget build(BuildContext context) {
    final appColors = context.appColors;

    return BlocProvider(
      create: (_) => MyBloc(),
      child: BlocBuilder<MyBloc, MyState>(
        builder: (context, state) {
          return Scaffold(
            headers: [
              AppBar(
                title: Text(
                  '페이지 제목',
                  style: context.textStyles.lgSemibold.copyWith(
                    color: appColors.neutral5,
                  ),
                ),
              ),
            ],
            child: Padding(
              padding: const .symmetric(horizontal: Insets.medium),
              child: Column(
                crossAxisAlignment: .start,
                children: [
                  const Gap(Insets.medium),
                  TextField(
                    placeholder: const Text('이름을 입력하세요'),
                    features: const [
                      InputFeature.leading(Icon(Icons.person, size: 20)),
                    ],
                    onChanged: (value) => context.read<MyBloc>().add(
                      MyEvent.nameChanged(value),
                    ),
                  ),
                  const Gap(Insets.medium),
                  Button.primary(
                    expanded: true,
                    enabled: state.isValid,
                    onPressed: () => context.read<MyBloc>().add(
                      const MyEvent.submitted(),
                    ),
                    child: const Text('저장'),
                  ),
                ],
              ),
            ).skeletonizer(enabled: state.isLoading),
          );
        },
      ),
    );
  }
}

// Header background (distinct from body)
color: context.appColors.neutral95,

// Dark border (clear separation)
border: Border(
  right: .new(color: context.appColors.neutral70),
),

// Default border
border: Border.all(color: context.appColors.neutral80),

// TextField background
TextField(
  filled: true,  // base200 배경
  border: Border.all(color: context.colorScheme.base300),
)

// Filter dialog border
OutlinedContainer(
  backgroundColor: theme.colorScheme.base100,
  borderColor: theme.colorScheme.base300,  // 진한 테두리
)