[flutter] Tooltip을 사용하여 아이콘에 추가 정보 제공하기

11 Dec 2023

flutter

Flutter 애플리케이션에서 사용자에게 아이콘의 기능을 설명하고자 할 때 Tooltip을 사용할 수 있습니다. Tooltip은 사용자가 아이콘을 클릭하지 않더라도 해당 아이콘에 대한 부가 정보를 표시할 수 있는 도구입니다. 이 글에서는 Flutter에서 Tooltip을 사용하는 방법에 대해 알아보겠습니다.

우선, 아이콘이나 버튼에 Tooltip 위젯을 추가해야 합니다. 아래의 예시 코드를 참고하세요.

IconButton(
  icon: Icon(Icons.info),
  onPressed: () {
    // 아이콘을 클릭했을 때 수행할 동작
  },
  tooltip: 'Additional information',
)

위의 코드에서 IconButton 위젯 내부에 tooltip 속성을 통해 추가 정보를 제공할 수 있습니다. ‘Additional information’ 텍스트는 아이콘 위에 마우스를 올렸을 때 나타나는 툴팁 내용입니다.

2. 툴팁 사용자 정의하기

Tooltip에는 디폴트 스타일이 적용되지만, 사용자가 직접 스타일을 설정하여 커스터마이징할 수도 있습니다. 아래의 예시 코드를 참고하세요.

Tooltip(
  message: 'Additional information',
  child: IconButton(
    icon: Icon(Icons.info),
    onPressed: () {
      // 아이콘을 클릭했을 때 수행할 동작
    },
  ),
  padding: EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    color: Colors.grey,
    borderRadius: BorderRadius.circular(10.0),
  ),
)

위의 코드에서 Tooltip 위젯을 직접 사용하여 message 속성을 이용해 툴팁 내용을 지정하고, padding 및 decoration 속성을 이용해 스타일을 설정하였습니다.

이제 여러분도 Flutter 애플리케이션에서 Tooltip을 사용하여 아이콘에 추가 정보를 제공할 수 있을 것입니다. 이를 통해 사용자 경험을 높일 수 있고, 애플리케이션의 사용성을 향상시킬 수 있습니다.

참고 문헌:

Flutter: https://flutter.dev/docs
Flutter IconButton 클래스: https://api.flutter.dev/flutter/material/IconButton-class.html
Flutter Tooltip 클래스: https://api.flutter.dev/flutter/material/Tooltip-class.html

위의 예시 코드 및 설명은 Flutter 버전 2.5.0을 기준으로 작성되었습니다.

1. Tooltip 위젯 추가하기

2. 툴팁 사용자 정의하기