[Flutter] RichText

gozero·2021년 9월 1일
0

여러 개의 다른 스타일을 가진 문자(또는 위젯을)를 화면에 그린다.


RichText - TextSpan

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: 'Gozero님!',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
          fontFamily: 'AirSans',
          fontSize: 22,
          letterSpacing: -0.3,
        ),
      ),
      TextSpan(
        text: ' 오늘 하루도 수고 하셨습니다!!',
        style: TextStyle(
          color: Colors.purple,
          fontWeight: FontWeight.bold,
          fontFamily: 'AirSans',
          fontSize: 22,
          letterSpacing: -0.3,
        ),
      ),
    ],
  ),
),


TextSpan의 children 속성을 이용하여 문자별로 다양한 스타일을 지정할 수 있다.


RichText - WidgetSpan

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: '플러터는 최고야!',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.bold,
          fontFamily: 'AirSans',
          fontSize: 22,
          letterSpacing: -0.3,
        ),
      ),
      WidgetSpan(
        child: Container(
          margin: EdgeInsets.only(left: 10),
          child: FlutterLogo(
            size: 30,
          ),
        ),
      ),
    ],
  ),
),

위 방식과 똑같은 방식이지만 WidgetSpan을 이용하여 위젯으로 다양하게 꾸밀 수도 있다.

profile
Flutter를 제일 좋아하는 앱 프론트엔드 개발자입니다!

0개의 댓글