[flutter] RichText에서 텍스트의 투명도 조절하기

22 Dec 2023

flutter

RichText 위젯은 Flutter에서 다양한 서식으로 텍스트를 표시할 수 있는 강력한 도구입니다. 텍스트의 색상, 글꼴, 크기 등을 개별적으로 제어할 수 있어서 풍부한 텍스트 형식을 지원합니다. 그렇다면 RichText를 사용하여 텍스트의 투명도(투명도)를 조절하는 방법에 대해 알아보겠습니다.

투명도를 조절하는 텍스트 위젯

RichText는 TextSpan을 이용하여 다양한 서식을 텍스트에 적용할 수 있습니다. 텍스트에 투명도를 적용하기 위해 TextStyle에서 color 속성을 설정할 수 있습니다. 이때, Color 객체의 withOpacity 메서드를 사용하여 텍스트의 투명도를 조절할 수 있습니다.

아래 예제에서는 투명도가 50%인 빨간색 텍스트를 보여주는 RichText 위젯을 만들어보겠습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: RichText(
            text: TextSpan(
              text: 'Hello, ',
              style: TextStyle(
                color: Colors.red.withOpacity(0.5),
                fontSize: 24,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: 'Flutter',
                  style: TextStyle(
                    fontSize: 24,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 color: Colors.red.withOpacity(0.5) 부분에서 Colors.red.withOpacity(0.5)를 사용하여 텍스트의 색상을 빨간색으로 지정한 후, withOpacity 메서드를 사용하여 투명도를 50%로 조절했습니다.

마무리

이제 여러분은 RichText를 사용하여 텍스트의 투명도를 조절하는 방법에 대해 알게 되었습니다. 위젯을 사용하여 다양한 서식을 갖춘 텍스트를 구현할 수 있으며, 투명도를 조절하여 원하는 시각적 효과를 얻을 수 있습니다. 도움이 되었기를 바랍니다!