[flutter] IconButton 위젯에서 플러터 Tooltip을 사용하여 아이콘 이름 표시하기

11 Dec 2023

flutter

플러터에서는 IconButton 위젯을 사용하여 아이콘을 표시하고 해당 아이콘을 누르는 동작을 처리할 수 있습니다. 이때 IconButton에 Tooltip을 추가하여 사용자가 아이콘의 용도를 이해할 수 있도록 도울 수 있습니다. 이번 글에서는 IconButton 위젯에서 Tooltip을 사용하는 방법을 살펴봅니다.

IconButton의 속성 중 하나인 tooltip을 사용하여 해당 IconButton이 누르면 어떤 동작이 실행되는지에 대한 설명을 표시할 수 있습니다.

예를 들어, 다음과 같이 IconButton 위젯을 생성하고 tooltip을 추가할 수 있습니다:

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // 아이콘을 눌렀을 때 실행되는 동작
  },
  tooltip: 'Add', // 아이콘 이름 표시
)

위 예제에서 tooltip 속성을 사용하여 해당 IconButton이 ‘Add’라는 이름을 표시하도록 설정하였습니다.

사용자가 IconButton을 오랫동안 누르거나 마우스를 올려놓을 때, 설정한 Tooltip이 화면에 표시됩니다. 이를 통해 사용자가 해당 IconButton의 목적을 이해할 수 있게 됩니다.

위 예제에서 설정한 ‘Add’라는 이름이 사용자에게 표시될 것입니다.

마무리

IconButton 위젯을 사용할 때, 각 아이콘이 어떤 동작을 하는지 사용자에게 명확히 전달하기 위해 Tooltip을 추가하는 것이 좋습니다. 이를 통해 사용자 경험이 향상되고, 앱의 사용성이 향상될 수 있습니다.

이상으로 IconButton 위젯에서 플러터 Tooltip을 사용하여 아이콘 이름을 표시하는 방법에 대해 알아보았습니다.

IconButton 위젯에서 Tooltip 사용하기

Tooltip 표시하기

마무리