Flutter InlineSpan 에 대하여

InlineSpan은 Flutter에서 텍스트의 일부분을 다른 텍스트와 함께 인라인(같은 줄에)으로 표시할 때 사용되는 추상 클래스이다. 이 클래스는 텍스트의 일부분에 대한 스타일, 구조, 레이아웃 등을 정의할 수 있게 해주며, 여러 가지 구체적인 클래스들이 이를 상속받아 다양한 용도로 사용된다. TextSpan과 WidgetSpan은 InlineSpan을 상속받는 가장 대표적인 두 가지 클래스인데, 이것들이 지금 html 을 flutter 로 변환 하는 과정에서 문제가 생기고 있다. 두개의 차이가 뭔지 일단 알아보고 수정해야 할 근본적인 원인을 찾는 것을 확실하게 해야겠다.

 

사용 방법

InlineSpan을 사용하는 가장 일반적인 방법은 RichText 위젯을 사용하는 것이다. RichText는 text 속성으로 TextSpan 객체를 받고, 이 TextSpan 내에서 다양한 InlineSpan 객체들을 자식으로 포함시켜 복잡한 텍스트 레이아웃을 구성할 수 있다.

 

TextSpan

TextSpan은 순수 텍스트 내용을 포함하는 InlineSpan의 구현이다.

TextSpan은 텍스트를 스타일링하고, 여러 개의 TextSpan을 중첩하여 복잡한 텍스트 스타일 패턴을 만들 수 있다. 예를 들면, 문단 내에서 몇몇 단어만 볼드 처리하거나, 다른 색상으로 표시하고 싶을 때 TextSpan을 사용할 수 있다.

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 24, color: Colors.black),
    children: <TextSpan>[
      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' world!'),
    ],
  ),
)

 

WidgetSpan

WidgetSpan은 텍스트 흐름 속에 위젯을 배치할 수 있게 해주는 InlineSpan의 구현이다. WidgetSpan은 텍스트와 함께 이미지, 아이콘 또는 다른 위젯을 인라인으로 표시할 수 있다. 예를 들어, 문장 중간에 아이콘을 삽입하거나, 텍스트와 함께 인라인 버튼을 표시하는 것이 가능하다.

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: "Here's an inline "),
      WidgetSpan(
        child: Icon(Icons.star, size: 14),
      ),
      TextSpan(text: ' icon!'),
    ],
  ),
)