Flutter에서 Text() 위젯 사용하기

 

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

이 위젯은 화면에 문자열을 표시하는 가장 기본적인 방법입니다.

 

기본 사용법

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Widget Example'),
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

 

 

• Text() 위젯을 사용하여 화면에 'Hello, Flutter!'라는 텍스트를 표시합니다.
• style 속성을 사용하여 글자 크기 등을 설정할 수 있습니다.

 

기본 옵션

• style: 글자 스타일을 설정합니다. 예를 들어, 폰트 크기, 색상, 굵기 등을 지정할 수 있습니다.
• textAlign: 텍스트의 정렬 방향을 설정합니다. TextAlign.center, TextAlign.left, TextAlign.right 등이 있습니다.
• maxLines: 최대 줄 수를 설정합니다. 한 줄에 모든 텍스트를 표시하려면 maxLines: 1로 설정할 수 있습니다.
• overflow: 텍스트가 화면에 맞지 않을 경우의 처리 방법을 설정합니다. 예를 들어, TextOverflow.ellipsis는 텍스트가 너무 길 경우 '...'으로 생략된다는 의미입니다.

예시

Text(
  'This is a long text that might overflow the screen.',
  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

• 이 예제는 텍스트가 화면에 맞지 않을 때 어떻게 처리할지 설정한 것입니다. 최대 2줄까지 표시하고, 넘치는 경우에는 '...'으로 생략되며 가운데 정렬로 표시됩니다.

초보자를 위한 팁

• 텍스트 스타일링: TextStyle를 사용하여 글자의 크기, 색상, 굵기 등을 쉽게 설정할 수 있습니다.
• 텍스트 정렬: TextAlign을 사용하여 텍스트를 원하는 위치에 정렬할 수 있습니다.
• 텍스트 자르기: maxLines와 overflow 속성을 사용하여 텍스트가 화면을 넘치는 경우에 대비할 수 있습니다.

이렇게 Flutter에서 Text() 위젯을 사용하는 기본적인 방법과 옵션에 대해 간단히 소개해드렸습니다.

추가적으로 궁금한 점이 있으면 언제든지 물어봐주세요!