TextBlock#

시맨틱 역할(element)을 가진 prose 텍스트 블록입니다. Web 은 각 element 를 시맨틱 HTML 태그(<p>·<h1>~<h6>·<blockquote> 등)에 바인딩하고, Flutter 는 문서 아웃라인이 없으므로 동일 element 가 매칭되는 타이포그래피 토큰을 고릅니다. 단일 Text chain 이 한 줄 텍스트라면, TextBlock 은 제목/문단/인용 같은 문서 구조 단위입니다.

Live Preview#

class TextBlockDefaultExample extends StatelessComponent {
  const TextBlockDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      styles: Styles(raw: {'width': '360px'}),
      [
        div(
          classes: 'flex flex-col gap-${CoreSpace.scale.space8}',
          [
            TextBlock(text: '문서 제목', element: CoreTextBlockElement.h3),
            TextBlock(
              text: '본문은 paragraph 역할로 렌더됩니다. element 가 시맨틱 타이포 역할을 고릅니다.',
            ),
          ],
        ),
      ],
    );
  }
}

class TextBlockDefaultExample extends StatelessWidget {
  const TextBlockDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 360,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        spacing: CoreSpace.space8,
        children: [
          TextBlock(text: '문서 제목', element: CoreTextBlockElement.h3),
          TextBlock(
            text: '본문은 paragraph 역할로 렌더됩니다. element 가 시맨틱 타이포 역할을 고릅니다.',
          ),
        ],
      ),
    );
  }
}

사용법#

// Flutter / Web 동일 — element 가 시맨틱 역할(타이포)을 고른다
TextBlock(text: '문서 제목', element: CoreTextBlockElement.h3)
TextBlock(text: '본문 단락입니다.') // element 기본값 = p

Props#

element 는 구조 역할을, presets 는 그 위에 얹는 시각 프리셋을 정합니다. Flutter 의 preset 헬퍼는 BuildContext 를 받아 테마 타이포를 해석합니다(TextBlock.heading2(context)).