여러가지 Style을 하나의 Text에 적용하기

Chocomilk·2021년 1월 26일
0
post-thumbnail

아래와 같이 하나의 Text위젯에 다양한 TextStyle을 적용해야 하는 경우가 있다. 이 문제는 하나의 Text Widget으로 해결하는 것은 불가능 하다. 이럴 때 사용하는 위젯이 RichText이다.

코드 예시는 아래와 같다.

import 'package:flutter/gestures.dart';


new RichText(
      text: new TextSpan(text: 'Non touchable. ', children: [
        new TextSpan(
          text: 'Tap here.',
          recognizer: new TapGestureRecognizer()..onTap = () => print('Tap Here onTap'),
        )
      ]),
    );

RichText위젯 아래에 자식 위젯으로 TextSpan위젯을 가졌다.
TextSpan 위젯은 특정 길이의 문자(text)를 한 단위로 하여 스타일(style)을 적용하는 데 사용한다.
자식 위젯으로 TextSpan 리스트를 가질 수 있으며, 모두 한 문단으로 화면에 그려진다.

보통 Text위젯에 터치 이벤트를 적용시키려면 InkWell 또는 GestureDetector로 해당 위젯을 감싸줘야 한다. 하지만 전체 텍스트가 아닌 일부에만 터치이벤트를 적용시키려 할때 위의 예시에서처럼 Recognizer를 사용하면 된다.

TextSpan(
        text: 'Tap here.',
        recognizer: new TapGestureRecognizer()..onTap = onTap,
      )
    ])

위의 코드의 onTap함수를 본인이 원하고자하는 onTap함수로 바꾸어 사용하면 된다.

profile
어제보다 한 발짝 더 나아가려는 Flutter 개발자

0개의 댓글