figma-to-coui Reference

Provides detailed descriptions, example code, and precautions for each Use Case.

Flutter UI Patterns - Reference#

기준: coui v0.97.15 (latest). kobic vendored는 v0.92.0이라 gap/input 등 일부 API가 다를 수 있음.

Provides detailed descriptions, example code, and precautions for each Use Case.

1. Page Structure#

Overview#

All pages follow a consistent structure.

Basic Structure#

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => MyBloc()..add(const MyEvent.started()),
      child: Scaffold(
        headers: [
          AppBar(
            title: Text('페이지 제목'),
            leading: [
              CoButton(
                variant: .ghost,
                shape: .square,
                onPressed: () => context.pop(),
                child: const CoIcon(CoLucideIcons.arrowLeft),
              ),
            ],
            trailing: [
              CoButton(
                variant: .ghost,
                shape: .square,
                onPressed: onSettings,
                child: const CoIcon(CoLucideIcons.settings),
              ),
            ],
          ),
        ],
        child: const _Body(),
      ),
    );
  }
}

class _Body extends StatelessWidget {
  const _Body();

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<MyBloc, MyState>(
      builder: (context, state) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: CoreSpace.space16),
          child: Column(
            children: [
              // 컨텐츠
            ],
          ),
        );
      },
    );
  }
}

Pattern Selection Criteria#

Pattern	When to Use	Example
HookWidget + BlocProvider	Async data loading	Details Page, List
HookWidget only	Only local state needed	Settings Page, Form
StatelessWidget	No state	Static info Page

Precautions#

// ✅ CORRECT: BlocProvider는 페이지 레벨에서 생성
class MyPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => MyBloc(),
      child: _Body(),
    );
  }
}

// ❌ WRONG: build 메서드 내에서 매번 생성 금지
class MyPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final bloc = MyBloc(); // 매번 새로 생성됨!
    return BlocProvider.value(
      value: bloc,
      child: _Body(),
    );
  }
}

2. State Management#

BLoC Pattern Overview#

User Action → Event → BLoC → State → UI Update

BlocBuilder#

Used for UI rendering based on state.

BlocBuilder<MyBloc, MyState>(
  // Optional: specify rebuild conditions
  buildWhen: (previous, current) => previous.items != current.items,
  builder: (context, state) {
    // State branching with switch expression (recommended)
    return switch (state) {
      MyStateInitial() => const SizedBox.shrink(),
      MyStateLoading() => const LoadingIndicator(),
      MyStateSuccess(:final data) => SuccessWidget(data: data),
      MyStateFailure(:final error) => ErrorWidget(message: error),
    };
  },
)

BlocConsumer#

Used when both UI rendering and side effects are needed.

BlocConsumer<AuthBloc, AuthState>(
  listenWhen: (previous, current) => previous.status != current.status,
  listener: (context, state) {
    // Side effects: navigation, snackbar, dialog
    if (state.isAuthenticated) {
      context.go('/home');
    }
    if (state.hasError) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.errorMessage)),
      );
    }
  },
  buildWhen: (previous, current) => previous.formState != current.formState,
  builder: (context, state) {
    return LoginForm(
      isLoading: state.isLoading,
      isValid: state.isValid,
    );
  },
)

BlocListener#

Used when only side effects are needed.

BlocListener<PaymentBloc, PaymentState>(
  listenWhen: (previous, current) => current.isCompleted,
  listener: (context, state) {
    showDialog(
      context: context,
      builder: (_) => SuccessDialog(),
    );
  },
  child: PaymentForm(),
)

MultiBlocProvider#

Used in pages requiring multiple BLoCs.

MultiBlocProvider(
  providers: [
    BlocProvider(create: (_) => UserBloc()),
    BlocProvider(create: (_) => SettingsBloc()),
    BlocProvider(create: (_) => NotificationBloc()),
  ],
  child: SettingsPage(),
)

Event Dispatching#

// ✅ CORRECT: context.read 사용
CoButton(
  onPressed: () {
    context.read<MyBloc>().add(const MyEvent.submitted());
  },
  child: const Text('제출'),
)

// ❌ WRONG: context.watch로 이벤트 발송 금지
CoButton(
  onPressed: () {
    context.watch<MyBloc>().add(...); // 불필요한 리빌드 발생
  },
)

3. Local State (Hooks)#

Basic Hooks#

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    // useState - 단순 상태
    final counter = useState(0);
    final isVisible = useState(true);

    // useTextEditingController - 텍스트 입력
    final controller = useTextEditingController();

    // useEffect - 사이드 이펙트
    useEffect(() {
      final subscription = stream.listen((value) {
        counter.value = value;
      });
      return subscription.cancel; // cleanup
    }, []); // 빈 배열 = componentDidMount

    return Column(
      children: [
        Text('Count: ${counter.value}'),
        CoInput(controller: controller),
        Switch(
          value: isVisible.value,
          onChanged: (v) => isVisible.value = v,
        ),
      ],
    );
  }
}

Animation Hooks#

class AnimatedWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final animationController = useAnimationController(
      duration: const Duration(milliseconds: 300),
    );

    final animation = useAnimation(
      CurvedAnimation(
        parent: animationController,
        curve: Curves.easeInOut,
      ),
    );

    return FadeTransition(
      opacity: animation,
      child: Content(),
    );
  }
}

useMemoized#

Caches expensive computation results.

final expensiveResult = useMemoized(
  () => computeExpensiveValue(items),
  [items], // 의존성 변경 시 재계산
);

useCallback#

Memoizes callback functions.

final onSubmit = useCallback(() {
  context.read<MyBloc>().add(const MyEvent.submitted());
}, []);

4. Typography#

`context.textStyles` Pattern#

This project's standard text styling approach. context.textStyles returns the CoUI Typography from the current theme; pick a <size><weight> getter and pass it to Text(..., style:).

// 크기 + 굵기 결합 getter (이름이 곧 스타일)
Text('텍스트', style: context.textStyles.xsSemibold)   // 12px / 600
Text('텍스트', style: context.textStyles.smNormal)     // 14px / 400
Text('텍스트', style: context.textStyles.baseNormal)   // 16px / 400
Text('텍스트', style: context.textStyles.lgSemibold)   // 18px / 600
Text('텍스트', style: context.textStyles.xlBold)       // 20px / 700

// 자주 쓰는 조합
Text('제목', style: context.textStyles.lgSemibold)
Text('부제목', style: context.textStyles.baseSemibold)
Text('본문', style: context.textStyles.smNormal)

Color Composition (copyWith)#

Apply color via copyWith on the style getter — there is no color chaining.

Text(
  '제목',
  style: context.textStyles.lgSemibold.copyWith(
    color: context.appColors.neutral5,
  ),
)

Text(
  '캡션',
  style: context.textStyles.smNormal.copyWith(
    color: context.appColors.neutral60,
  ),
)

Precautions#

// ❌ WRONG: TextStyle 직접 정의 금지
Text('텍스트', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold))

// ❌ WRONG: 제거된 패턴
Text('텍스트').lg.bold                    // chaining 제거됨
context.theme.typography.lg              // context.theme.typography 금지

// ✅ CORRECT: context.textStyles getter 사용
Text('텍스트', style: context.textStyles.lgSemibold)

5. Buttons#

Button Variants (`CoButton`)#

A single CoButton widget selects its look via the variant: enum. Pass the variant with dot-shorthand (variant: .ghost). Default is variant: .primary, size: .md.

// Primary - 주요 액션 (제출, 확인) — variant defaults to primary
CoButton(
  onPressed: onSubmit,
  expanded: true,        // 전체 너비
  enabled: isValid,      // 활성화 상태
  child: const Text('확인'),
)

// Ghost - 보조 액션 (취소, 뒤로)
CoButton(
  variant: .ghost,
  onPressed: onCancel,
  child: const Text('취소'),
)

// Card - 카드 형태 버튼
CoButton(
  variant: .card,
  onPressed: onTap,
  child: const Column(
    children: [
      CoIcon(CoLucideIcons.settings),
      Text('설정'),
    ],
  ),
)

// Outline - 테두리 버튼
CoButton(
  variant: .outline,
  onPressed: onTap,
  child: const Text('자세히 보기'),
)

// Destructive - 위험 액션
CoButton(
  variant: .destructive,
  onPressed: onDelete,
  child: const Text('삭제'),
)

CoreButtonVariant: primary · secondary · outline · ghost · link · text · plain · destructive · card · menu · menubar · fixed

Icon-only Buttons#

There is no separate IconButton. Use CoButton with shape: .square (or .circle) and a CoIcon child.

CoButton(
  variant: .ghost,
  shape: .square,
  onPressed: onEdit,
  child: const CoIcon(CoLucideIcons.pencil),
)

CoButton(
  shape: .circle,
  onPressed: onAdd,
  child: const CoIcon(CoLucideIcons.plus),
)

CoLucideIcons only covers the standard icon set. For a brand/custom icon with no Lucide equivalent, use the project's generated Assets.svg.* accessor instead — see SKILL.md § 5.5 Icons.

Button Size#

Size is the size: enum (CoreComponentSize): xs · sm · md (default) · lg · xl. There is no ButtonSize / ButtonDensity.

CoButton(
  size: .sm,
  onPressed: onTap,
  child: const Text('작은 버튼'),
)

Precautions#

// ❌ WRONG: 제거된 named-constructor / ButtonStyle 패턴
Button.primary(onPressed: onTap, child: Text('확인'))
ButtonStyle.ghost()
Button.ghost(style: const ButtonStyle.ghost(), ...)

// ✅ CORRECT: CoButton + variant enum, chrome 은 buttonStyle 로
CoButton(variant: .ghost, onPressed: onTap, child: const Text('취소'))
CoButton(
  buttonStyle: CoreButtonStyle(width: 200),
  onPressed: onTap,
  child: const Text('고정폭'),
)

6. Forms#

Basic Form Structure#

class LoginForm extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final formKey = useMemoized(GlobalKey<FormState>.new);
    final emailController = useTextEditingController();
    final passwordController = useTextEditingController();
    final isValid = useState(false);

    void validate() {
      isValid.value = formKey.currentState?.validate() ?? false;
    }

    return Form(
      key: formKey,
      onChanged: validate,
      child: Column(
        children: [
          TextFormField(
            controller: emailController,
            decoration: const InputDecoration(
              labelText: '이메일',
              hintText: '이메일을 입력하세요',
            ),
            keyboardType: TextInputType.emailAddress,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '이메일을 입력하세요';
              }
              if (!value.contains('@')) {
                return '올바른 이메일 형식이 아닙니다';
              }
              return null;
            },
          ),
          const CoGap.space16(),
          TextFormField(
            controller: passwordController,
            decoration: const InputDecoration(
              labelText: '비밀번호',
              hintText: '비밀번호를 입력하세요',
            ),
            obscureText: true,
            validator: (value) {
              if (value == null || value.length < 8) {
                return '8자 이상 입력하세요';
              }
              return null;
            },
          ),
          const CoGap.space24(),
          CoButton(
            expanded: true,
            enabled: isValid.value,
            onPressed: () {
              if (formKey.currentState!.validate()) {
                // 제출 로직
              }
            },
            child: const Text('로그인'),
          ),
        ],
      ),
    );
  }
}

FormTextField does not exist. Use CoInput (bare text-entry primitive) or the CoUI CoTextField component (labelled field with slots). For Material-form validation you may still use Form + TextFormField.

CoInput / CoTextField Properties#

// CoInput - bare text-entry primitive (no label / leading / trailing slots)
CoInput(
  type: CoreInputType.text,    // text/password/email/number/tel/url/search
  placeholder: '플레이스홀더',
  value: value,
  enabled: true,
  required: false,
  minLength: 3,
  maxLength: 50,
  onChanged: (value) {},
  onSubmitted: (value) {},
)

// 에러 variant + chrome 오버라이드는 inputStyle 슬롯 (size:/shape: 파라미터 없음)
CoInput(
  type: CoreInputType.email,
  placeholder: '이메일',
  variant: CoreInputVariant.error,
  inputStyle: CoreInputStyle(
    borderRadius: CoreBorderRadius.all(CoreRadius.radius8),
  ),
)

// CoTextField - label / placeholder / prefix / suffix / errorText 슬롯
CoTextField(
  label: '이메일',
  placeholder: '이메일을 입력하세요',
  controller: controller,
  keyboardType: TextInputType.emailAddress,
  prefix: const CoIcon(CoLucideIcons.mail),
  errorText: emailError,       // null 이면 에러 미표시
  onChanged: (value) {},
)

Validation State Visualization#

enum ValidationState { pending, valid, invalid }

Widget buildValidationIcon(BuildContext context, ValidationState state) {
  final colorScheme = context.theme.colorScheme;

  return switch (state) {
    ValidationState.pending => CoIcon(
        CoLucideIcons.circle,
        iconStyle: CoreIconStyle(color: colorScheme.baseContent.toValue()),
      ),
    ValidationState.valid => CoIcon(
        CoLucideIcons.circleCheck,
        iconStyle: CoreIconStyle(color: colorScheme.success.toValue()),
      ),
    ValidationState.invalid => CoIcon(
        CoLucideIcons.circleAlert,
        iconStyle: CoreIconStyle(color: colorScheme.error.toValue()),
      ),
  };
}

7. Loading States#

Skeletonizer#

Converts widget to skeleton loading state.

BlocBuilder<MyBloc, MyState>(
  builder: (context, state) {
    return MyCard(
      title: state.title ?? 'Loading Title',
      subtitle: state.subtitle ?? 'Loading Subtitle',
    ).skeletonizer(enabled: state.isLoading);
  },
)

loadingOr Extension#

Displays conditional loading widget.

// default 사용
ContentWidget().loadingOr(
  isLoading: isLoading,
  loadingWidget: const CircularProgressIndicator(),
)

// Mock 데이터로 스켈레톤
ContentWidget().loadingOrWithMock(
  isLoading: isLoading,
  mockWidget: () => ContentWidget(data: MockData()),
)

emptyOrWhen Extension#

Used for empty state handling.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => ItemCard(item: items[index]),
).emptyOrWhen(
  condition: () => items.isEmpty,
  emptyWidget: const EmptyStateWidget(
    icon: CoIcon(CoLucideIcons.inbox),
    title: '항목이 없습니다',
    subtitle: '새 항목을 추가해보세요',
  ),
)

State-based UI Branching#

BlocBuilder<MyBloc, MyState>(
  builder: (context, state) {
    return switch (state.status) {
      LoadingStatus.initial => const SizedBox.shrink(),
      LoadingStatus.loading => const Center(
          child: CircularProgressIndicator(),
        ),
      LoadingStatus.success => SuccessWidget(data: state.data),
      LoadingStatus.failure => ErrorWidget(
          message: state.errorMessage,
          onRetry: () => context.read<MyBloc>().add(const MyEvent.retried()),
        ),
    };
  },
)

8. Color System#

ColorScheme Access#

final colorScheme = context.theme.colorScheme;

Semantic Colors#

Token	Purpose	Example
`primary`	Primary actions, brand	Buttons, links
`primaryContent`	Text on primary	Button text
`success`	Success state	Completion, approval
`error`	Error state	Failure, error
`warning`	Warning state	Caution, alerts
`info`	Information display	Guidance, tips

Base Colors#

Token	Purpose	Example
`base100`	Default background	Page background
`base200`	Card background	Cards, containers
`base300`	Divider lines, borders	Dividers
`baseContent`	Default text	Titles, body text
`neutral`	Neutral elements	Disabled buttons

Usage Examples#

Container(
  color: colorScheme.base100,
  child: Column(
    children: [
      Container(
        color: colorScheme.base200,
        child: Text('카드 내용').baseContent,
      ),
      Divider(color: colorScheme.base300),
      Container(
        color: colorScheme.success,
        child: Text('성공!').successContent,
      ),
    ],
  ),
)

Applying Opacity#

// ✅ CORRECT: withValues 사용
colorScheme.baseContent.withValues(alpha: 0.5)
Colors.black.withValues(alpha: 0.2)

// ❌ WRONG: withOpacity 사용 (deprecated)
colorScheme.baseContent.withOpacity(0.5)

9. Spacing#

CoGap.spaceN() token constructors — the token name equals its pixel value. For non-token sizes / cross extent / fill color use gapStyle: CoreGapStyle(...).

const CoGap.space4()    // 4px
const CoGap.space8()    // 8px
const CoGap.space12()   // 12px
const CoGap.space16()   // 16px
const CoGap.space20()   // 20px
const CoGap.space24()   // 24px
const CoGap.space32()   // 32px

// 비토큰 크기 / cross extent / fill color
const CoGap(gapStyle: CoreGapStyle(size: 18))

Removed/legacy: Gap.s1(), Gap(Spacing.s4), Spacing.s*, Insets.*, CoGap(size: CoreSpace.spaceN) (v0.92 → use CoGap.spaceN()).

CoreSpace in EdgeInsets#

const EdgeInsets.all(CoreSpace.space16)
const EdgeInsets.symmetric(
  horizontal: CoreSpace.space16,
  vertical: CoreSpace.space8,
)
const EdgeInsets.only(
  top: CoreSpace.space16,
  bottom: CoreSpace.space8,
  left: CoreSpace.space16,
  right: CoreSpace.space16,
)

Consistent Spacing Usage#

Column(
  children: [
    Header(),
    const CoGap.space16(),   // 헤더 아래 16px
    ContentSection(),
    const CoGap.space24(),   // 섹션 간 24px
    Footer(),
  ],
)

Padding(
  padding: const EdgeInsets.symmetric(
    horizontal: CoreSpace.space16,  // 좌우 16px
    vertical: CoreSpace.space8,     // 상하 8px
  ),
  child: Content(),
)

10. Overlays#

Dialog#

Future<bool?> showConfirmDialog(BuildContext context) {
  return showDialog<bool>(
    context: context,
    barrierColor: Colors.black.withValues(alpha: 0.2),
    builder: (context) => AlertDialog(
      title: const Text('삭제 확인'),
      content: const Text('정말 삭제하시겠습니까?'),
      actions: [
        CoButton(
          variant: .ghost,
          onPressed: () => Navigator.pop(context, false),
          child: const Text('취소'),
        ),
        CoButton(
          variant: .destructive,
          onPressed: () => Navigator.pop(context, true),
          child: const Text('삭제'),
        ),
      ],
    ),
  );
}

// 사용
final result = await showConfirmDialog(context);
if (result == true) {
  // 삭제 수행
}

BottomSheet#

void showOptionsSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,  // 높이 조절 가능
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    builder: (context) => SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(CoreSpace.space16),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ListTile(
              leading: const CoIcon(CoLucideIcons.pencil),
              title: const Text('편집'),
              onTap: () {
                Navigator.pop(context);
                // 편집 로직
              },
            ),
            ListTile(
              leading: const CoIcon(CoLucideIcons.trash),
              title: Text(
                '삭제',
                style: context.textStyles.baseNormal.copyWith(
                  color: context.theme.colorScheme.error,
                ),
              ),
              onTap: () {
                Navigator.pop(context);
                // 삭제 로직
              },
            ),
          ],
        ),
      ),
    ),
  );
}

Popover(
  positions: [PopoverPosition.bottom],
  barrierColor: Colors.transparent,
  builder: (context) => Container(
    padding: const EdgeInsets.all(CoreSpace.space8),
    decoration: BoxDecoration(
      color: colorScheme.base200,
      borderRadius: BorderRadius.circular(8),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withValues(alpha: 0.1),
          blurRadius: 8,
        ),
      ],
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        PopoverItem(title: '옵션 1', onTap: onOption1),
        PopoverItem(title: '옵션 2', onTap: onOption2),
      ],
    ),
  ),
  child: CoButton(
    variant: .ghost,
    shape: .square,
    onPressed: null, // Popover가 처리
    child: const CoIcon(CoLucideIcons.ellipsisVertical),
  ),
)

11. Lists#

Basic ListView#

ListView.separated(
  padding: const EdgeInsets.all(CoreSpace.space16),
  itemCount: items.length,
  separatorBuilder: (_, __) => const CoGap.space8(),
  itemBuilder: (context, index) {
    final item = items[index];
    return ItemCard(item: item);
  },
)

RefreshIndicator#

RefreshIndicator(
  onRefresh: () async {
    context.read<MyBloc>().add(const MyEvent.refreshed());
    // BLoC 상태가 업데이트될 때까지 대기
    await context.read<MyBloc>().stream.firstWhere(
      (state) => !state.isRefreshing,
    );
  },
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) => ItemCard(item: items[index]),
  ),
)

CustomScrollView + SliverList#

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('목록'),
      floating: true,
    ),
    SliverPadding(
      padding: const EdgeInsets.symmetric(horizontal: CoreSpace.space16),
      sliver: SliverList.separated(
        itemCount: items.length,
        separatorBuilder: (_, __) => const CoGap.space8(),
        itemBuilder: (context, index) => ItemCard(item: items[index]),
      ),
    ),
  ],
)

Infinite Scroll (Pagination)#

class InfiniteListWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final scrollController = useScrollController();

    useEffect(() {
      void onScroll() {
        if (scrollController.position.pixels >=
            scrollController.position.maxScrollExtent - 200) {
          context.read<MyBloc>().add(const MyEvent.loadMore());
        }
      }

      scrollController.addListener(onScroll);
      return () => scrollController.removeListener(onScroll);
    }, []);

    return BlocBuilder<MyBloc, MyState>(
      builder: (context, state) {
        return ListView.builder(
          controller: scrollController,
          itemCount: state.items.length + (state.hasMore ? 1 : 0),
          itemBuilder: (context, index) {
            if (index >= state.items.length) {
              return const Center(child: CircularProgressIndicator());
            }
            return ItemCard(item: state.items[index]);
          },
        );
      },
    );
  }
}

GoRouter Setup#

// route 정의
@TypedGoRoute<HomeRoute>(
  path: '/',
  routes: [
    TypedGoRoute<ProfileRoute>(path: 'profile/:userId'),
    TypedGoRoute<SettingsRoute>(path: 'settings'),
  ],
)
class HomeRoute extends GoRouteData {
  const HomeRoute();

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return const HomePage();
  }
}

class ProfileRoute extends GoRouteData {
  const ProfileRoute({required this.userId});
  final String userId;

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return ProfilePage(userId: userId);
  }
}

// Navigate (replace history)
context.go('/home');

// Push page (keep history)
context.push('/details');

// Go back
context.pop();

// Go back with result
context.pop(result);

// TypedRoute usage (type-safe)
const ProfileRoute(userId: '123').go(context);
const ProfileRoute(userId: '123').push(context);

// Navigating page
CoButton(
  onPressed: () async {
    final result = await context.push<String>('/select-item');
    if (result != null) {
      // 결과 처리
    }
  },
  child: const Text('선택'),
)

// Page returning result
CoButton(
  onPressed: () => context.pop(selectedItem),
  child: const Text('확인'),
)

Deep Link Parameters#

@TypedGoRoute<SearchRoute>(path: '/search')
class SearchRoute extends GoRouteData {
  const SearchRoute({this.query, this.category});

  final String? query;
  final String? category;

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return SearchPage(
      initialQuery: query,
      initialCategory: category,
    );
  }
}

// Navigate with query parameters
const SearchRoute(query: 'flutter', category: 'tutorial').go(context);
// → /search?query=flutter&category=tutorial

figma-to-coui Reference

Flutter UI Patterns - Reference#

1. Page Structure#

Overview#

Basic Structure#

Pattern Selection Criteria#

Precautions#

2. State Management#

BLoC Pattern Overview#

BlocBuilder#

BlocConsumer#

BlocListener#

MultiBlocProvider#

Event Dispatching#

3. Local State (Hooks)#

Basic Hooks#

Animation Hooks#

useMemoized#

useCallback#

4. Typography#

context.textStyles Pattern#

Color Composition (copyWith)#

Precautions#

5. Buttons#

Button Variants (CoButton)#

Icon-only Buttons#

Button Size#

Precautions#

6. Forms#

Basic Form Structure#

CoInput / CoTextField Properties#

Validation State Visualization#

7. Loading States#

Skeletonizer#

loadingOr Extension#

emptyOrWhen Extension#

State-based UI Branching#

8. Color System#

ColorScheme Access#

Semantic Colors#

Base Colors#

Usage Examples#

Applying Opacity#

9. Spacing#

CoGap Widget#

CoreSpace in EdgeInsets#

Consistent Spacing Usage#

10. Overlays#

Dialog#

BottomSheet#

Popover#

11. Lists#

Basic ListView#

RefreshIndicator#

CustomScrollView + SliverList#

Infinite Scroll (Pagination)#

12. Navigation#

GoRouter Setup#

Navigation Methods#

Receiving Navigation Results#

Deep Link Parameters#

`context.textStyles` Pattern#

Button Variants (`CoButton`)#