플러터에서 Text 위젯 종류와 사용 방법 옵션

 

플러터에서 텍스트를 표시하는 데 가장 기본적인 위젯은 Text 위젯입니다.

Text 위젯은 다양한 속성과 옵션을 제공하여 텍스트를 원하는 대로 표시할 수 있도록 합니다.

 

1. 기본 속성

• data: 표시할 텍스트 문자열을 지정합니다.
• style: 텍스트 스타일을 지정합니다. (글꼴, 크기, 색상, 정렬 등)
• textAlign: 텍스트 정렬 방식을 지정합니다. (시작, 중앙, 끝, 정렬)
• maxLines: 표시할 최대 줄 수를 지정합니다.
• overflow: 텍스트가 최대 줄 수를 초과할 때 처리 방식을 지정합니다. (ellipsis, clip, visible)
• softWrap: 텍스트가 줄 바꿈될 때 처리 방식을 지정합니다. (normal, hardWrap, wordWrap)

2. 스타일 속성

• fontFamily: 글꼴 이름을 지정합니다.
• fontSize: 글꼴 크기를 지정합니다.
• fontWeight: 글꼴 두께를 지정합니다. (normal, bold, light)
• fontStyle: 글꼴 스타일을 지정합니다. (normal, italic)
• color: 글꼴 색상을 지정합니다.
• decoration: 글꼴 장식을 지정합니다. (none, underline, overline, lineThrough)
• decorationColor: 글꼴 장식 색상을 지정합니다.
• decorationThickness: 글꼴 장식 두께를 지정합니다.
• letterSpacing: 글자 간격을 지정합니다.
• wordSpacing: 단어 간격을 지정합니다.
• height: 텍스트 높이를 지정합니다.
• textBaseline: 텍스트 기준선을 지정합니다.
• background: 텍스트 배경 색상을 지정합니다.
• shadows: 텍스트 그림자를 지정합니다.

3. 옵션

• textDirection: 텍스트 방향을 지정합니다. (ltr, rtl)
• locale: 텍스트 로케일을 지정합니다.
• semanticsLabel: 텍스트 의미를 지정합니다.
• textScaleFactor: 텍스트 크기 배율을 지정합니다.

4. 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Widget Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            Text(
              'This is a longer text that will wrap to the next line.',
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              'This text is right-aligned.',
              textAlign: TextAlign.right,
            ),
            Text(
              'This text is underlined.',
              decoration: TextDecoration.underline,
            ),
            Text(
              'This text has a shadow.',
              shadows: [
                Shadow(
                  offset: Offset(10, 10),
                  blurRadius: 3,
                  color: Colors.grey,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

5. 추가 정보

• 플러터 Text 위젯 공식 문서

6. Rich Text 위젯

Rich Text 위젯은 다양한 스타일을 가진 텍스트를 표시하는 데 사용됩니다. TextSpan 객체를 사용하여 텍스트의 각 부분에 스타일을 적용할 수 있습니다.

 

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rich Text Widget Example'),
      ),
      body: Center(
        child: RichText(
          text: TextSpan(
            children: <TextSpan>[
              TextSpan(
                text: 'This is normal text.',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
              TextSpan(
                text: ' This text is bold.',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextSpan(
                text: ' This text is italic.',
                style: TextStyle(
                  fontStyle: FontStyle.italic,
                ),
              ),
              TextSpan(
                text: ' This text is red.',
                style: TextStyle(
                  color: Colors.red,
                ),
              ),
              TextSpan(
                text: ' This text is underlined.',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                ),
              ),
              TextSpan(
                text: ' This text is clickable.',
                style: TextStyle(
                  color: Colors.blue,
                  decoration: TextDecoration.underline,
                ),
                recognizer: TapGestureRecognizer()..onTap = () {
                  print('Text clicked!');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

7. 마무리

플러터 Text 위젯은 텍스트를 표시하는 데 매우 유용한 위젯입니다. 다양한 속성과 옵션을 제공하여 원하는 대로 텍스트를 표시할 수 있습니다.

Rich Text 위젯을 사용하면 다양한 스타일을 가진 텍스트를 표시할 수 있습니다.

플러터에서 텍스트 표시 관련 패키지를 사용하여 더욱 다양한 기능을 구현할 수 있습니다.