이번에는 Flutter 앱에서 RichText 위젯을 사용하여 텍스트에 아이콘을 추가하는 방법에 대해 알아보겠습니다.

RichText란?

RichText는 다양한 스타일을 사용하여 텍스트를 표시할 수 있는 Flutter 위젯입니다. 이 위젯을 사용하면 한 문장 내에서 글꼴, 크기, 색상 등을 다르게 설정할 수 있습니다.

텍스트에 아이콘 추가하기

RichText 위젯을 사용하여 텍스트에 아이콘을 추가하려면 TextSpan 위젯을 사용해야 합니다. TextSpan은 텍스트 스타일뿐만 아니라 위젯도 포함할 수 있는데, 여기에 아이콘을 포함할 수 있습니다.

아래는 RichText와 TextSpan을 사용하여 텍스트에 아이콘을 추가하는 예시입니다.

RichText(
  text: TextSpan(
    children: <InlineSpan>[
      WidgetSpan(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 2.0),
          child: Icon(Icons.favorite, size: 16.0, color: Colors.red),
        ),
      ),
      TextSpan(
        text: '좋아요 10개',
        style: TextStyle(color: Colors.black, fontSize: 16.0),
      ),
    ],
  ),
)

위 코드에서는 WidgetSpan을 사용하여 아이콘을 추가하고, TextSpan을 사용하여 텍스트를 추가했습니다.

이와 같이 TextSpan을 사용하여 RichText 위젯 안에 아이콘을 포함한 텍스트를 간단히 구현할 수 있습니다.

원하시는 경우 해당 아이콘을 클릭하거나 터치하는 등의 상호작용도 구현할 수 있습니다.

Flutter에서는 위젯들을 유연하게 조합하여 다양한 디자인을 만들 수 있기 때문에, RichText와 TextSpan을 이용하여 텍스트에 아이콘을 추가하는 등의 다양한 디자인을 구현할 수 있습니다.

향후 더 많은 Flutter 위젯 및 디자인 팁에 대해 계속해서 공유해드리겠습니다.

계속해서 도움이 필요하시면 연락주세요.