Flutter에서 UI를 구성하는데 Row 위젯은 매우 유용하게 사용됩니다. 그리고 이 Row 위젯 안에 텍스트를 표시할 때 해당 텍스트의 스타일을 설정하는 것은 중요한 요소입니다. 이번 블로그 포스트에서는 Row 위젯에서 텍스트의 스타일을 설정하는 방법에 대해 알아보겠습니다.

1. 텍스트 스타일 클래스

텍스트 스타일을 설정하기 위해서는 TextStyle 클래스를 사용해야 합니다. TextStyle 클래스는 텍스트에 적용할 수 있는 다양한 스타일 속성을 제공합니다. 예를 들어, 폰트 크기, 폰트 색상, 폰트 스타일(보통, 기울임, 굵게), 줄 간격 등을 지정할 수 있습니다.

2. 텍스트 스타일 적용하기

Row 위젯에서 텍스트 스타일을 적용하는 방법은 간단합니다. 아래의 예제 코드를 확인해보세요:

Row(
  children: <Widget>[
    Text(
      'Hello',
      style: TextStyle(
        fontSize: 18.0,
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
    ),
    Text(
      'World',
      style: TextStyle(
        fontSize: 18.0,
        color: Colors.blue,
      ),
    ),
  ],
)

위의 예제 코드에서는 두 개의 Text 위젯이 Row 위젯 안에 있습니다. 첫 번째 텍스트는 ‘Hello’로 설정되고, 두 번째 텍스트는 ‘World’로 설정됩니다. 각 텍스트 위젯에서는 style 속성을 사용하여 텍스트에 적용할 스타일을 지정합니다. 폰트 크기, 색상 및 폰트 스타일이 설정되어 있습니다.

출력 결과로는 ‘Hello’라는 텍스트는 볼드체, 검은색으로 나타나고, ‘World’라는 텍스트는 기본 폰트 스타일, 파란색으로 나타납니다.

3. 추가적인 텍스트 스타일 속성

TextStyle 클래스에는 이외에도 다양한 스타일 속성을 설정할 수 있습니다. 예를 들어, 폰트를 기울임꼴로 설정하거나, 밑줄을 적용하는 등의 스타일링이 가능합니다. 아래의 예제 코드를 확인해보세요:

Row(
  children: <Widget>[
    Text(
      'Hello',
      style: TextStyle(
        fontSize: 18.0,
        color: Colors.black,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.underline,
        decorationColor: Colors.red,
        decorationThickness: 2.0,
      ),
    ),
  ],
)

위의 예제 코드에서는 ‘Hello’ 텍스트에 추가적인 스타일 속성을 설정하고 있습니다. fontStyle은 기울임꼴로 설정되어 있고, decoration은 밑줄을 적용하고 있습니다. 또한, decorationColor를 통해 밑줄의 색상을 설정하고 있으며, decorationThickness를 통해 밑줄의 굵기를 설정하고 있습니다.

4. 결과 확인하기

위의 예제 코드를 앱에 적용하면 다음과 같이 텍스트가 출력됩니다:

정리

이번 포스트에서는 Flutter의 Row 위젯에서 텍스트 스타일을 설정하는 방법에 대해 알아보았습니다. TextStyle 클래스를 사용하여 텍스트에 원하는 스타일을 적용할 수 있으며, 다양한 속성을 사용하여 더욱 다채로운 텍스트 스타일링이 가능합니다.

더 자세한 내용은 공식 문서를 참조해주세요.