[flutter] 플러터에서 Tooltip의 텍스트 스타일링 방법

11 Dec 2023

flutter

툴팁은 앱 사용자에게 특정 위젯의 기능이나 설명을 제공하는 데 사용됩니다. 플러터에서 툴팁을 사용할 때, 종종 툴팁의 텍스트를 스타일링해야 할 필요가 있습니다. 이 기능은 플러터의 Tooltip 위젯을 사용함으로써 간단하게 구현할 수 있습니다.

먼저, 기본적인 툴팁을 생성하는 방법을 알아보겠습니다. 다음 코드는 툴팁을 포함하는 간단한 버튼을 플러터에서 작성하는 예제입니다.

Tooltip(
  message: 'This is a tooltip',
  child: FlatButton(
    onPressed: () {},
    child: Text('Press me'),
  ),
),

위의 예제는 FlatButton을 감싸고 있는 Tooltip을 생성하는 방법을 보여줍니다. 이 코드를 실행하면 ‘Press me’ 버튼을 롱 프레스하거나 포인터를 올리면 “This is a tooltip” 이라는 기본 툴팁이 나타납니다.

툴팁의 텍스트 스타일링

툴팁의 텍스트를 스타일링하기 위해서는 Tooltip 위젯의 decoration 속성을 사용하여 테마를 수정할 수 있습니다.

Tooltip(
  message: 'This is a styled tooltip',
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: FlatButton(
    onPressed: () {},
    child: Text('Press me'),
  ),
),

위의 예제는 툴팁의 배경색을 파란색으로, 테두리를 둥글게 하는 방법을 보여줍니다.

추가적인 스타일링

툴팁의 텍스트 스타일링을 위해서는 theme 속성을 사용하여 전반적인 스타일을 조정할 수도 있습니다.

TooltipTheme(
  data: TooltipThemeData(
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(10),
    ),
    textStyle: TextStyle(color: Colors.white, fontSize: 16),
  ),
  child: Tooltip(
    message: 'This is a styled tooltip',
    child: FlatButton(
      onPressed: () {},
      child: Text('Press me'),
    ),
  ),
),

위의 예제는 전반적으로 툴팁에 파란색 배경과 흰색 텍스트를 적용하는 방법을 보여줍니다.

플러터에서는 Tooltip 위젯을 사용하여 툴팁의 텍스트를 손쉽게 스타일링할 수 있습니다. 위의 방법들을 활용하여 앱 내에서 적절한 툴팁을 디자인할 수 있습니다.

링크: Flutter Tooltip class

기본 Tooltip

툴팁의 텍스트 스타일링

추가적인 스타일링