[Flutter] Text에 BottomLine,UnderLine 추가하기 (TextDecoration)

오늘도 아주 쉬운 주제에 대해서 다뤄 보겠습니다.

사실 그냥 내가 보려고 만든 블로그라..ㅎㅎ

 

Text에 이런 밑줄을 어떻게 넣어야 하나 고민을 할때가 있습니다. 사실 이런 고민을 하는 것도 iOS개발을 할때에는 Text에 밑줄을 넣는 것이 쪼매 힘듬니다. 하지만 우리 Flutter는 어떻게 하느냐!

 

 

Text(
    "www.naver.com",
 	style: TextStyle(decoration: TextDecoration.underline),
),

TextStyle에 decoration 속성에서 TextDecoration에 underline을 넣어주면 끝입니다. ㄷㄷ 참 쉽죠?

 

너무 쉬운 주제라 TextDecoration에는 어떤 것들이 있는지 한번 봐보겠습니다.

 

  /// Do not draw a decoration
  static const TextDecoration none = TextDecoration._(0x0);

  /// Draw a line underneath each line of text
  static const TextDecoration underline = TextDecoration._(0x1);

  /// Draw a line above each line of text
  static const TextDecoration overline = TextDecoration._(0x2);

  /// Draw a line through each line of text
  static const TextDecoration lineThrough = TextDecoration._(0x4);

 

호옹이.. 이런것들이 있군요 그럼 하나씩 확인해 볼까요?

 

• none 

예상 하셨겠지만 none은 아무 기능이 없는 default상태 인 것 같습니다!

• overline

• lineThrough

 

overline의 쓰임새는 어떻게 될지 모르겠지만, lineThrough는 많이 사용 할 것 같군요!

이렇게 쉽게 텍스트에 줄을 만들어주다니.. Flutter Framework를 사랑하지 않을 수 없겠네여~~!

그럼 저는 다음에 또 다른 ㄲ팁으로 돌아오겠습니다!