FlutterFlutter

설치Install

horon_ui는 pub.dev에 올리지 않습니다. design 저장소를 앱 옆에 두고 경로로 가져옵니다.horon_ui is not on pub.dev. Check out the design repository next to your app and depend on it by path.

dependencies:
  horon_ui:
    path: ../design/packages/flutter

테마 연결하기Wire up the theme

horonTheme이 라이트와 다크 ThemeData를 만듭니다. 컴포넌트는 이 테마의 토큰만 읽기 때문에 테마 없이 쓰면 오류가 납니다.horonTheme builds the light and dark ThemeData. Components read tokens only from this theme, so using them without it throws.

import 'package:flutter/material.dart';
import 'package:horon_ui/horon_ui.dart';

void main() {
  runApp(
    MaterialApp(
      theme: horonTheme(Brightness.light),
      darkTheme: horonTheme(Brightness.dark),
      home: const HomeScreen(),
    ),
  );
}

컴포넌트 쓰기Use a component

위젯 이름은 React 컴포넌트 이름 앞에 Horon을 붙인 형태이고, 변형과 상태도 같은 이름을 씁니다.Widgets are the React names with a Horon prefix, and they share the same variants and states.

HoronButton(
  label: 'New bot',
  icon: const Icon(Icons.add),
  onPressed: () {},
)

토큰Tokens

색, 간격, 반경 값은 @horon-ai/tokens에서 생성한 Dart 파일에서 읽습니다. 값을 손으로 고치지 않고, 원본과 어긋나면 테스트가 실패합니다.Color, spacing and radius come from a Dart file generated from @horon-ai/tokens. Never edit it by hand; the tests fail when it drifts from the source.