개발일기

🧱 Flutter Text 위젯 완전 정복

뱅우 2025. 6. 19. 17:07
반응형

Flutter에서 가장 많이 사용되는 위젯 중 하나인 Text 위젯은
모든 화면에 글자를 출력하는 데 사용됩니다. 오늘은 Text 위젯의 기본 사용법부터 스타일링까지 알아봅니다.


🔤 기본 사용법


Text('Hello Flutter!');

단순한 문자열을 출력하는 가장 기본적인 형태입니다.

---

🎨 스타일 적용하기


Text(
  'Hello Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
);

TextStyle 주요 속성:

  • fontSize: 글자 크기
  • fontWeight: 굵기 (bold 등)
  • color: 색상
  • letterSpacing: 글자 간격
  • fontFamily: 글꼴 지정
---

🧭 정렬 및 줄 바꿈


Text(
  '멀티라인 텍스트도 가능합니다.\nFlutter는 줄 바꿈도 OK!',
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
);
  • textAlign: 정렬 (left, center, right 등)
  • maxLines: 최대 줄 수 제한
  • overflow: 넘칠 때 처리 방식 (ellipsis, fade 등)
---

📱 실전 꿀팁

  • 길이 예측 어려운 텍스트overflowmaxLines를 꼭 사용
  • 전체 앱에 공통 스타일을 적용하려면 ThemeData 활용
---

🧩 마무리

Text 위젯은 단순해 보이지만,
스타일과 속성에 따라 앱의 첫인상을 좌우하는 요소입니다.
기본을 잘 알아두면, 나중에 복잡한 UI를 만들 때도 수월해집니다!

---

🏷️ 추천 태그

#flutter #flutter위젯 #flutterText #플러터텍스트 #플러터개발자 #UI디자인

---

📌 다음 편 예고

  • 👉 2편: Container 위젯 완전 정복 – Flutter의 레이아웃 기본 단위!
반응형