[flutter] 플러터에서 Tooltip을 커스텀 위젯과 함께 사용하기

11 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 툴팁(Tooltip)은 사용자에게 위젯이나 아이콘의 기능을 설명하는 데 유용한 기능입니다. 하지만 기본 툴팁 디자인이나 동작을 변경해야 할 때가 있습니다. 이때, 플러터에서는 커스텀 위젯과 함께 툴팁을 사용하여 원하는 디자인과 동작을 구현할 수 있습니다.

기본적으로, 플러터에서 제공하는 기본 툴팁 위젯은 다음과 같은 형태로 사용합니다.

Tooltip(
  message: '이것은 툴팁입니다',
  child: IconButton(
    icon: Icon(Icons.info),
    onPressed: () {
      // 아이콘 클릭 시 동작
    },
  ),
)

위 예제에서 IconButton 위젯을 터치하면 툴팁이 표시됩니다.

커스텀 툴팁 위젯 구현하기

기본 툴팁 위젯에서는 디자인이나 동작을 변경하기 어려울 수 있습니다. 이럴 때에는 커스텀 툴팁 위젯을 구현하여 사용하는 것이 좋습니다.

class CustomTooltip extends StatelessWidget {
  final String message;
  final Widget child;

  const CustomTooltip({
    Key key,
    @required this.message,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 툴팁을 터치할 때의 동작
      },
      child: Container(
        padding: EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: child,
      ),
      onLongPress: () {
        // 툴팁을 오랫동안 누를 때의 동작
      },
    );
  }
}

위 코드는 커스텀 툴팁 위젯을 구현하는 예시입니다. 이제 커스텀 툴팁을 사용하여 다양한 디자인과 동작을 구현할 수 있습니다.

결론

플러터에서 툴팁을 사용할 때, 기본 툴팁 위젯을 사용하는 것 외에도 커스텀 툴팁 위젯을 구현하여 원하는 디자인과 동작을 구현할 수 있습니다. 커스텀 툴팁을 구현하면 앱의 사용자 경험을 향상시키는 데 도움이 될 것입니다.

더 많은 정보는 플러터 공식 문서를 참고하세요.

기본 Tooltip 사용하기

커스텀 툴팁 위젯 구현하기

결론