[Flutter 기초] 텍스트 꾸미기: 색깔, 크기, 굵기 완벽 이해 (TextStyle 클래스)

 
안녕하세요! 스테디빌더입니다. 😊
오늘은 앱에서 자주 사용하는 텍스트 스타일링에 대해 배워볼 거예요.
 
말 그대로 글씨를 예쁘게 혹은 멋지게 꾸며주는 것이죠.
별 거 아닌 것처럼 보이지만 실제로도 별 거 아닙니다. 😁
그래도 필요할 때가 꼭 있으니 알고 넘어 갑시다.
 
<스테디빌더 텍스트 스타일 적용 결과>

스테디빌더 텍스트 스타일 적용 결과

 
텍스트를 꾸미는 방법은 앱의 첫인상을 결정짓는 중요한 요소입죠 !
Flutter의 Text 위젯과 TextStyle을 활용해서 색상, 크기, 굵기 등 다양한 스타일을 적용해 볼게요.

 

 

목차

1. Flutter에서 텍스트 꾸미기의 기본
2. 텍스트 스타일 변경하기 (색상, 크기, 굵기)
3. 텍스트 정렬과 글꼴 변경하기
4. 정리

 

 

1. Flutter에서 텍스트 꾸미기의 기본

Flutter에서는 텍스트를 표시하기 위해 Text 위젯을 사용합니다. (이미 아시쥬?)

Text 위젯 기본 구성

Text(
  '안녕하세요, Flutter!',
)

그리고 텍스트의 스타일을 변경하려면,
style 속성에 TextStyle 을 활용하면 돼요.


 
💡 여기서 잠깐 !
[질문] 그럼 style 은 Text 위젯의 속성이고, TextStyle 은 위젯인가요?
>> 아주 좋은 질문입니다 ! 결론부터 말씀드리면 TextStyle 은 클래스입니다.
 
style은 Text 위젯에게 "이렇게 꾸며줘!" 라고 지시하는 속성이고, TextStyle은 그 지시에 따라 "어떻게 꾸밀지"를 구체적으로 정의한 청사진이라고 보면 됩니다.

 

 

2. 텍스트 스타일 변경하기 (색상, 크기, 굵기)

실행 가능한 코드:

import 'package:flutter/material.dart';

void main() {
  runApp(TextStyleExampleApp());
}

class TextStyleExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('텍스트 꾸미기')),
        body: Center(
          child: Text(
            '멋진 Flutter 텍스트!',
            style: TextStyle(
              fontSize: 24, // 글자 크기
              fontWeight: FontWeight.bold, // 글자 굵기
              color: Colors.blue, // 글자 색상
            ),
          ),
        ),
      ),
    );
  }
}

주요 속성:

• fontSize: 텍스트 크기를 조정합니다.
• fontWeight: 텍스트 굵기를 설정합니다. (예: FontWeight.bold, FontWeight.normal)
• color: 텍스트 색상을 지정합니다.

<TextStyle 적용 결과>

 

 

 

3. 텍스트 정렬과 글꼴 변경하기

Flutter에서는 텍스트의 정렬 방식과 글꼴도 손쉽게 변경할 수 있습니다.

실행 가능한 코드:

import 'package:flutter/material.dart';

void main() {
  runApp(AlignTextApp());
}

class AlignTextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('텍스트 정렬과 글꼴')),
        body: Center(
          child: Text(
            '텍스트 정렬과 글꼴 바꾸기\\n 가운데 정렬입니다 !',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.w500,
              fontStyle: FontStyle.italic, // 기울임체
              color: Colors.green,
              fontFamily: 'Courier', // 글꼴 설정
            ),
            textAlign: TextAlign.center, // 텍스트 중앙 정렬
          ),
        ),
      ),
    );
  }
}

주요 속성:

• textAlign: 텍스트 정렬 방식을 설정합니다. (예: TextAlign.left, TextAlign.center, TextAlign.right) TextStyle 밖에 있는 게 보이시죠? Text 위젯의 속성으로 설정한 것입니다 : )
• fontStyle: italic 을 사용해서 텍스트를 기울임체로 설정했습니다.
• fontFamily: 원하는 글꼴을 지정합니다. 파일을 추가해서 적용하는 방법도 있습니다! 😆 (요건 나중에 ㅎㅎ)

<텍스트 정렬과 글꼴 적용 결과>

 

 

 

정리

1. TextStyle은 텍스트의 색상, 크기, 굵기 등을 꾸미는 데 사용됩니다.
2. 텍스트를 중앙에 배치하려면 Text 위젯의 textAlign 속성을 사용하면 됩니다.
3. fontFamily로 앱에 적합한 글꼴을 지정해 보세요.

 
텍스트를 꾸미는 방법은 앱 디자인의 중요한 부분입니다 !
다양한 스타일을 실험하면서 멋진 UI를 만들어 보세요! 😊
 
다루고 싶은 주제가 있다면 댓글로 남겨주세요 : ) 😁
 
고생하셨습니다 !
 
끝 !