flutter

ids_flutter

IDS Flutter 컴포넌트 라이브러리.

설치

pub.dev 에서 배포한다.

dependencies:
  ids_flutter: ^0.1.1

flutter pub get

설정

앱 최상단에 ThemeProvider 추가:

import 'package:ids_flutter/ids.dart';

void main() {
  runApp(
    ThemeProvider(
      color: IdsColor.blue,
      mode: IdsMode.light,
      child: const MyApp(),
    ),
  );
}

ThemeProvider 없이는 ThemeProvider.of(context) 호출 시 에러가 발생한다.

ThemeProvider

파라미터	타입	기본값
color	IdsColor	IdsColor.blue
mode	IdsMode	IdsMode.light

• IdsColor 는 17색이다: red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose.
• orange amber yellow lime emerald teal cyan sky 는 onPrimary 가 검은색이다.

테마 접근:

final theme = ThemeProvider.of(context);
// theme.primary, theme.onPrimary, theme.secondary, theme.onSecondary, theme.accent, ...

• accent 는 배경 채움 없이 페이지 위에 놓이는 브랜드 글자와 아이콘 색이다. surface 와 secondary 위에서 대비 4.5:1 을 넘는다.

컴포넌트

IdsButton

IdsButton(
  onPressed: () {},
  variant: IdsVariant.solid,
  size: IdsSize.standard,
  child: const Text('클릭'),
)

파라미터	타입	기본값
variant	IdsVariant	IdsVariant.solid
size	IdsSize	IdsSize.standard
disabled	bool	false

IdsVariant: solid, soft, outline, ghost

IdsSize: standard, tiny

토큰 직접 사용

import 'package:ids_flutter/ids.dart';

// 간격
SizedBox(height: IdsSpacing.md)

// 타이포그래피
Text('제목', style: IdsTypography.headlineH5Semibold)

// 애니메이션 지속시간
AnimatedOpacity(duration: IdsMotion.fast, ...)

개발

cd packages/flutter
flutter pub get
flutter test