[flutter] Row 위젯에서의 텍스트 색상 설정하기

Flutter는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크입니다. Flutter를 사용하면 iOS 및 Android용 앱을 한 번의 코드 작성으로 개발할 수 있습니다.

Flutter에서 텍스트 색상을 설정하는 방법은 다양한데, 이번에는 Row 위젯에서의 텍스트 색상 설정에 대해 알아보겠습니다.

1. TextStyle로 텍스트 색상 설정하기

텍스트 위젯의 색상을 설정하려면 TextStyle을 사용해야 합니다. 아래 예제를 통해 Row 위젯에서 텍스트의 색상을 설정하는 방법을 확인해보세요.

Row(
  children: [
    Text(
      '텍스트 1',
      style: TextStyle(color: Colors.red),
    ),
    Text(
      '텍스트 2',
      style: TextStyle(color: Colors.blue),
    ),
    Text(
      '텍스트 3',
      style: TextStyle(color: Colors.green),
    ),
  ],
)

위 예제에서는 TextStyle을 이용하여 각 텍스트 위젯의 색상을 설정하였습니다. 각각의 Text 위젯에 style 속성을 추가하고, color 속성에 원하는 색상을 지정해주면 됩니다.

2. TextStyle을 변수로 미리 정의하기

위 예제에서는 각 Text 위젯에 직접 TextStyle을 적용했습니다. 하지만 동일한 스타일을 여러 곳에서 사용할 경우 TextStyle을 변수로 미리 정의하고 재사용할 수 있습니다. 아래 예제를 참고하세요.

final textStyle = TextStyle(color: Colors.red);

Row(
  children: [
    Text(
      '텍스트 1',
      style: textStyle,
    ),
    Text(
      '텍스트 2',
      style: textStyle,
    ),
    Text(
      '텍스트 3',
      style: textStyle,
    ),
  ],
)

textStyle 변수에 TextStyle을 정의한 후, style 속성에 변수를 지정하여 동일한 색상을 가진 텍스트를 설정할 수 있습니다.

3. 컬러 코드로 텍스트 색상 설정하기

또한, 직접 컬러 코드를 지정해서 텍스트의 색상을 설정할 수도 있습니다. 컬러 코드는 Color 클래스의 정적 메서드인 fromARGB를 사용해 지정할 수 있습니다. 아래 예제를 참고하세요.

Row(
  children: [
    Text(
      '텍스트 1',
      style: TextStyle(color: Color.fromARGB(255, 255, 0, 0)),
    ),
    Text(
      '텍스트 2',
      style: TextStyle(color: Color(0xFF0000FF)),
    ),
    Text(
      '텍스트 3',
      style: TextStyle(color: Colors.green),
    ),
  ],
)

위 예제에서는 Color.fromARGB 메서드를 사용하여 알파, 레드, 그린, 블루 값을 설정하여 색상을 지정하였습니다. 또한, Color 클래스의 생성자를 사용하면 16진수로 색상을 지정할 수도 있습니다.


이렇게 Flutter의 Row 위젯에서 텍스트 색상을 설정하는 방법을 알아보았습니다. 필요에 따라서 TextStyle을 사용하거나 컬러 코드를 직접 지정하여 원하는 텍스트 스타일을 만들어보세요.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.