시작하기 | CoUI
LogoCoUI

시작하기

CoUI 설치 및 설정 가이드

시작하기#

사전 준비#

  • Flutter: 3.41.0 이상
  • Dart: 3.11.0 이상
  • Jaspr (Web): 0.22.3 이상

설치#

Flutter 프로젝트#

flutter pub add coui_flutter

또는 pubspec.yaml에 직접 추가:

dependencies:
  coui_flutter: ^0.0.1

Jaspr Web 프로젝트#

dart pub add coui_web

또는 pubspec.yaml에 직접 추가:

dependencies:
  coui_web: ^0.0.1

기본 설정#

Flutter#

import 'package:coui_flutter/coui_flutter.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        extensions: [
          ComponentThemeData(),
        ],
      ),
      home: MyHomePage(),
    );
  }
}

단일 import 규칙 — UI 파일에서는 package:coui_flutter/coui_flutter.dart 하나만 import 하세요. CoUI 위젯 이름은 접두사 없는 bare 이름(Button, Icon, Card …)이라, package:flutter/material.dart(또는 widgets.dart)를 따로 import 하면 같은 이름이 충돌(ambiguous)합니다. MaterialApp·ThemeData 등 필요한 Flutter 타입은 coui 배럴이 다시 export 하므로 별도 import 가 필요 없습니다 (CoUI 가 Material 을 대체합니다).

Jaspr Web#

import 'package:coui_web/coui_web.dart';

// 컴포넌트를 직접 사용
div([
  Button(
    onClick: () => print('Hello'),
    child: text('Click me'),
  ),
])

단일 import 규칙 — package:coui_web/coui_web.dart 하나만 import 하세요. jaspr 의 Component/Styles/dom helper 는 배럴이 다시 export 합니다. package:jaspr/jaspr.dart(또는 dom.dart)를 따로 import 하면 bare 이름 (Gap, Position …)이 충돌(ambiguous)합니다.

첫 번째 컴포넌트#

Button#

Button(
  variant: ButtonVariant.primary,
  size: ButtonSize.md,
  onPressed: () => print('Pressed'),
  child: Text('Primary Button'),
)

Button(
  style: [Button.primary, Button.md],
  onClick: () => print('Clicked'),
  child: text('Primary Button'),
)

Input#

Input(
  placeholder: 'Enter text...',
  onChanged: (value) => print(value),
)

Input(
  placeholder: 'Enter text...',
  onChanged: (value) => print(value),
)

다음 단계#