토큰

JSON 토큰 원천에서 웹 CSS와 Flutter 값을 함께 생성해요. 숫자를 복사하지 말고 공개 토큰 클래스를 사용하세요.

Padding(
  padding: const EdgeInsets.all(TRSpacing.medium),
  child: DecoratedBox(
    decoration: const BoxDecoration(
      borderRadius: BorderRadius.all(TRRadii.medium),
      boxShadow: [TRShadows.raised],
    ),
    child: Text('랙', style: TRTypography.body),
  ),
);

TRSpacing, TRRadii, TRTypography, TRMotion, TRShadows에는 플랫폼에 맞게 변환한 값이 들어 있어요. CSS 전용 단위와 그림자 문법은 생성기가 변환하며, 지원하지 않는 변환이 있으면 토큰 일치 검사가 실패해요.

레이아웃 폭

TRBreakpoints에는 레이아웃의 형태가 바뀌는 뷰포트 폭이, TRMeasurements에는 그 안에 놓이는 영역의 폭이 들어 있어요. 두 값을 모두 토큰에서 읽으면 같은 앱의 두 화면이 서로 다른 폭에서 재배치되는 일을 막을 수 있어요.

LayoutBuilder(
  builder: (context, constraints) => constraints.maxWidth < TRBreakpoints.small
      ? detail
      : Row(
          children: [
            SizedBox(width: TRMeasurements.measureXl, child: list),
            Expanded(child: detail),
          ],
        ),
);

Flutter는 컴포넌트가 실제로 사용하는 small과 extraLarge 두 임계값을 공개해요. 제한된 콘텐츠 영역에는 measure 스케일을, 컨트롤 하나에는 TRControlMetrics를 사용하세요. 제품에만 필요한 pane이나 reading 폭은 공통 토큰 API가 아니라 제품 레이아웃에서 정하세요.