Flutter에서 밑줄 텍스트를 추가하는 방법은 무엇입니까?

텍스트는 flutter 애플리케이션에서 텍스트를 표시하는 데 사용되는 flutter의 위젯입니다. 자세히 알아볼 수 있습니다about text widget.

const Text(String data,
{Key? key,  
    TextStyle style,  
    StrutStyle strutStyle,  
    TextAlign textAlign,  
    Locale locale,
    TextDirection textDirection,  
    TextOverflow overflow,  
    bool softWrap,  
    double textScaleFactor,  
    int maxLines,  
    String semanticsLabel,  
    TextWidthBasis textWidthBasis,  
    TextHeightBehavior textHeightBehavior  
    }  
)

비즈니스 프로세스에 적합한 엔터프라이즈급 스마트폰 애플리케이션을 만들기 위해 Flutter Agency와 같은 Flutter application development company을 선택하는 것이 좋습니다. 다음은 애플리케이션에서 사용되는 Text 위젯의 필수 속성입니다.

TextAlign이란 무엇입니까?

텍스트의 가로 정렬을 나타내는 데 사용됩니다. 또한 텍스트의 위치를 ​​제어할 수 있습니다.

TextDirection이란 무엇입니까?

텍스트 정렬 값이 텍스트 레이아웃에 어떤 영향을 미치는지 파악하는 데 사용됩니다. 우리는 일반적으로 텍스트를 왼쪽에서 오른쪽으로 작성하지만 이 매개변수를 사용하면 이를 변경할 수 있습니다.

로케일이란 무엇입니까?

동일한 유니코드 문자를 로케일에 따라 다르게 렌더링할 수 있는 경우 글꼴을 선택하는 데 사용됩니다.

오버플로란 무엇입니까?

텍스트가 사용 가능한 영역에 맞는지 확인하는 데 사용됩니다. 주어진 공간이 허용하는 것보다 더 많은 텍스트를 제공했습니다.

TextScaleFactor란 무엇입니까?

Text 위젯의 텍스트 크기를 파악하는 데 사용됩니다. 텍스트 배율 인수를 1.5로 설정하면 텍스트는 지정한 글꼴 크기보다 50% 더 커집니다.

소프트랩이란 무엇입니까?

충분한 공간이 없을 때 모든 텍스트 위젯 콘텐츠를 공개할지 여부를 평가하는 데 활용됩니다. 이것이 맞으면 모든 자료가 표시됩니다. 그렇지 않으면 모든 콘텐츠가 표시되지 않습니다.

맥스라인이란?

텍스트 위젯에 표시할 수 있는 최대 줄 수를 지정합니다.

TextWidthBasis란 무엇입니까?

텍스트 너비가 설정되는 방법을 설명하는 데 사용됩니다.

TextHeightBehavior란 무엇입니까?

첫 줄과 끝 줄 사이의 단락 모양을 조절하는 데 사용됩니다.

스타일 위젯이란?

이 위젯의 ​​가장 일반적으로 사용되는 속성을 통해 개발자는 텍스트를 디자인할 수 있습니다. 전경색과 배경색, 글꼴 크기와 두께, 문자와 단어 간격, 로케일, 그림자 등의 스타일을 지정할 수 있습니다.

그래서 이것은 텍스트 위젯에 관한 것입니다. 이제 Flutter 앱에서 텍스트에 밑줄을 긋는 방법을 살펴보겠습니다.

모든 항목에 밑줄을 긋을 때 Text widget을 사용하여 TextStyle을 설정할 수 있습니다.

Text(
'Hello world', 
style: TextStyle(decoration: TextDecoration.underline)
)

텍스트의 특정 부분에만 밑줄을 긋고 싶다면 Text.rich()(또는 RichText 위젯)를 사용하여 문자열을 스타일을 적용할 수 있는 TextSpans로 분할합니다.

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <textspan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
    ],
  ),
)
</textspan>

TextSpan은 약간 이상합니다. text 매개변수는 기본 스타일이지만 하위 목록에는 뒤에 오는 스타일이 지정된(및 스타일이 지정되지 않은) 텍스트가 포함됩니다. 스타일이 지정된 텍스트로 시작하려는 경우 텍스트에 빈 문자열을 사용할 수 있습니다.

점선이 있는 TextDecorationStyle

TextDecorationStyle을 추가하여 장식 모양을 변경할 수도 있습니다. 다음은 파선입니다.

Text(
'Hello world', 
style: TextStyle(decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dashed)
)

점선이 있는 TextDecorationStyle

Text(
'Hello world', 
style: TextStyle(decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.dotted)
)

Double을 사용한 TextDecorationStyle

Text(
'Hello world', 
style: TextStyle(decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.double)
)

물결 모양의 TextDecorationStyle

Text(
'Hello world', 
style: TextStyle(decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.wavy)
)

하나의 예를 보자

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Text Underline"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: const [
            Text("Hello World"),
            Text(
              "Hello World",
              style: TextStyle(
                decoration: TextDecoration.underline,
              ),
            ),
            Text.rich(
              TextSpan(
                text: 'Hello ',
                style: TextStyle(fontSize: 50),
                children: <textspan>[
                  TextSpan(
                      text: 'world',
                      style: TextStyle(
                        decoration: TextDecoration.underline,
                      )),
                ],
              ),
            ),
            Text(
              'Hello world',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dashed,
              ),
            ),
            Text(
              'Hello world',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dotted,
              ),
            ),
            Text(
              'Hello world',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.double,
              ),
            ),
            Text(
              'Hello world',
              style: TextStyle(
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.wavy,
              ),
            ),
          ],
        ),
      ),
    );
  }

산출

결론

그래서 이 글에서는 텍스트 위젯을 정의하고 텍스트 스타일의 다른 속성으로 텍스트에 밑줄을 추가하는 방법을 살펴보겠습니다. 이 글이 도움이 되셨기를 바랍니다.