[Flutter] 플러터에서 타이포 디자인 시스템 구축하기

React의 tailwindcss나 styled-component처럼 디자이너가 정의한 디자인 시스템을 Flutter 프로젝트에서 쉽게 사용하고 싶었다.

 

먼저 design_system.dart 파일에 디자이너가 정의한 대로 스타일을 적용한다.

// style/design_system.dart
const SUB_TITLE_24 = TextStyle(
  fontSize: 24,
  fontWeight: FontWeight.w600,
  height: 1.4,
  letterSpacing: -0.5,
);

 

추가적인 스타일은 아래와 같이 copyWith로 적용해준다. BODY14 타이포 스타일에 텍스트 색상을 추가한 코드이다.

Text(text, style: BODY_14.copyWith(color: WHITE))