[flutter] RichText에서 텍스트의 부분별로 레이아웃 설정하기

Flutter의 RichText 위젯을 사용하면 단일 텍스트 위젯 내에서 서로 다른 서식을 가진 부분을 표시할 수 있습니다. RichText를 사용하면 각각의 서식이 다른 텍스트를 표시하거나 동일한 텍스트에서 일부를 강조하여 표시하는 등 다양한 스타일을 적용할 수 있습니다.

RichText란 무엇인가?

RichText는 다양한 서식을 가진 복잡한 텍스트를 구성하는 데 사용되는 Flutter의 위젯입니다. 이 위젯을 사용하면 텍스트의 부분별로 서로 다른 스타일, 글꼴, 크기 등을 적용할 수 있습니다.

이제 각각의 텍스트 부분에 레이아웃을 설정하는 방법에 대해 알아보겠습니다.

텍스트의 부분별로 레이아웃 설정하기

RichText를 사용하여 텍스트의 부분별로 레이아웃을 설정하려면 TextSpan을 사용해야 합니다. 각 TextSpan에는 각기 다른 스타일 정보와 텍스트 데이터를 지정할 수 있습니다.

RichText(
  text: TextSpan(
    children: <TextSpan>[
      TextSpan(
        text: 'Bold',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: ' and ',
        style: TextStyle(fontWeight: FontWeight.normal),
      ),
      TextSpan(
        text: 'italic',
        style: TextStyle(fontStyle: FontStyle.italic),
      ),
    ],
  ),
),

위 예제는 RichText를 사용하여 세 개의 서로 다른 서식을 적용한 텍스트를 보여줍니다. 이를 통해 각각의 텍스트 조각에 대해 다른 글꼴, 두께, 스타일 등을 설정할 수 있음을 확인할 수 있습니다.

결론

RichText를 사용하여 각각의 텍스트 부분에 레이아웃을 설정할 수 있습니다. 이를 통해 동일한 텍스트 위젯 내에서 서로 다른 서식을 적용할 수 있게 됩니다.

위의 예제를 참고하여 원하는 스타일과 레이아웃을 적용하는 데 성공한 경우, 사용자들은 더욱 풍부하고 다양한 텍스트 스타일을 구현할 수 있을 것입니다.

참고: Flutter - RichText