[flutter] 플러터 Column 위젯에서의 텍스트 스타일링 처리 방법

20 Dec 2023

flutter

플러터(Futter) 앱을 개발할 때, 사용자에게 정보를 표시하기 위해 Column 위젯을 사용하는 경우가 많습니다. Column은 세로로 위젯을 배열하는 데에 사용되며, 여러 텍스트를 세로로 나란히 보여주는 데에 적합합니다.

Column 위젯에서 텍스트 스타일링을 처리하는 방법에 대해 살펴보겠습니다.

1. 간단한 텍스트 스타일링

플러터에서는 Text 위젯 내에서 style 속성을 사용하여 간단하게 텍스트를 스타일링할 수 있습니다.

예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

Column(
  children: [
    Text(
      '첫 번째 텍스트',
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.0,
        fontWeight: FontWeight.bold,
      ),
    ),
    Text(
      '두 번째 텍스트',
      style: TextStyle(
        color: Colors.blue,
        fontSize: 14.0,
        fontStyle: FontStyle.italic,
      ),
    ),
  ],
)

위 예제에서는 첫 번째 텍스트를 굵은 검정색으로, 두 번째 텍스트를 파란색 이탤릭체로 스타일링했습니다.

2. 글로벌한 텍스트 테마 적용

만약 Column 안에 있는 모든 텍스트를 일괄적으로 스타일링하고자 한다면, 텍스트 테마를 활용할 수 있습니다.

다음은 글로벌 텍스트 테마를 적용한 예시입니다:

Column(
  children: [
    Text('첫 번째 텍스트'),
    Text('두 번째 텍스트'),
  ],
)

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      textTheme: TextTheme(
        bodyText2: TextStyle(
          color: Colors.red,
          fontSize: 16.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  );
}

위 코드에서는 앱 전체적으로 텍스트 테마를 설정하고, Column 위젯 내의 모든 텍스트가 해당 테마를 따르게 됩니다.

정리

플러터 Column 위젯에서 텍스트 스타일링을 처리하는 방법에 대해 살펴보았습니다. 간단한 한 개 텍스트 스타일링은 Text 위젯에서 직접 처리할 수 있고, 전체적인 일괄 스타일링은 글로벌 텍스트 테마를 활용하면 효율적으로 처리할 수 있습니다.

참고 문헌: Flutter Documentation