[Widget] Text

Widget 설명

• Text를 출력하기 위해 사용하는 위젯
• 레이아웃 제약에 따라 여러 줄 또는 같은 줄에 표시
• 스타일 인자는 선택적 생략된 경우 가장 가까운 부모 DefaultTextStyle 스타일을 사용

생성자

Text : 일반적인 텍스트 표시

Text(
  String this.data, {
  super.key,
  this.style,          
  this.strutStyle,         
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaler,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
  this.textHeightBehavior,
  this.selectionColor,
})

자주 쓰는 Property

• style : 텍스트의 스타일을 넣어준다.
• textAlign : 텍스트 정렬
• textDirection : 텍스트가 표시되는 방향 설정
• overflow : 텍스트가 오버플로우되는 경우 처리 방법
• maxLines : 텍스트의 선택적 최대 줄 수

: 여러 가지 다른 스타일을 사용하여 텍스트 표시

Text.rich(
  InlineSpan this.textSpan, {
  super.key,
  this.style,
  this.strutStyle,
  this.textAlign,
  this.textDirection,
  this.locale,
  this.softWrap,
  this.overflow,
  this.textScaler,
  this.maxLines,
  this.semanticsLabel,
  this.textWidthBasis,
  this.textHeightBehavior,
  this.selectionColor,
})

사용 방법

class _TextViewState extends State<TextView> {
  final longText = 
      '동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세.. '
      '남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text("")),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text('기본 텍스트'),
            const Text('가운데 정렬', textAlign: TextAlign.center),
            const Text('왼쪽 정렬', textAlign: TextAlign.left),
            const Text('오른쪽 정렬', textAlign: TextAlign.right),
            Text('Justify 정렬, $longText', textAlign: TextAlign.justify),
            Container(height: 20,),
            SizedBox(
              height: 60,
              child: Text('오버플로우 Fade, $longText',
                  overflow: TextOverflow.fade),
            ),
            Container(height: 20,),
            Text('오버플로우 Ellipsis, $longText',
                overflow: TextOverflow.ellipsis),
            const Text('텍스트 스타일 적용',
                style: TextStyle(backgroundColor: Colors.blueGrey, color: Colors.white)),
            const Text.rich(
              TextSpan(
                text: 'Text.rich 사용',
                children: <TextSpan>[
                  TextSpan(text: ' italic ', style: TextStyle(fontStyle: FontStyle.italic)),
                  TextSpan(
                      text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
                ],
              ),
            ),
          ],
        ));
  }
}