[flutter] Card 위젯의 텍스트 스타일링하기

12 Dec 2023

flutter

Flutter 앱에서 Card 위젯을 사용하여 정보를 시각적으로 나타내는 경우, 텍스트 스타일링은 중요한 부분입니다. Card 위젯 내의 텍스트를 꾸미는 방법에 대해 알아보겠습니다.

1. TextStyle 사용하기

가장 일반적인 방법은 TextStyle을 사용하여 텍스트를 스타일링하는 것입니다. TextStyle은 폰트, 색상, 굵기 등의 속성을 지정할 수 있게 해줍니다.

예를 들어, 다음은 Card 위젯 안의 텍스트를 붉은색과 큰 글씨로 스타일링하는 방법입니다.

Card(
  child: Column(
    children: <Widget>[
      Text(
        '중요한 정보',
        style: TextStyle(
          color: Colors.red,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      // 다른 위젯들 추가
    ],
  ),
)

2. Google Fonts 사용하기

Google Fonts 패키지를 이용하여 앱에 다양한 폰트 스타일을 적용할 수 있습니다. 이 패키지를 통해 다양한 폰트를 적용하여 Card 위젯 안의 텍스트를 꾸밀 수 있습니다.

예를 들어, 다음은 Google Fonts 패키지에서 ‘Roboto’ 폰트를 사용하여 Card 위젯 내의 텍스트를 꾸미는 방법입니다.

Card(
  child: Column(
    children: <Widget>[
      Text(
        '중요한 정보',
        style: GoogleFonts.roboto(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      // 다른 위젯들 추가
    ],
  ),
)

3. RichText 사용하기

RichText를 사용하면 한 문자열에 대해 서로 다른 스타일을 적용할 수 있습니다. 이를 이용하여 Card 위젯 안의 텍스트를 복합적으로 스타일링할 수 있습니다.

예를 들어, 다음은 RichText를 사용하여 Card 위젯 내의 텍스트를 서로 다른 스타일로 표현하는 방법입니다.

Card(
  child: Column(
    children: <Widget>[
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
              text: '중요한',
              style: TextStyle(
                color: Colors.black,
                fontSize: 16.0,
              ),
            ),
            TextSpan(
              text: ' 정보',
              style: TextStyle(
                color: Colors.red,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
      // 다른 위젯들 추가
    ],
  ),
)

위와 같이, TextStyle, Google Fonts, 그리고 RichText를 이용하여 Card 위젯 내의 텍스트를 다양한 방법으로 스타일링할 수 있습니다. 이를 통해 앱의 UI를 보다 다채롭게 꾸밀 수 있습니다.