[flutter] 플러터 Tooltip으로 사용자가 버튼 또는 아이콘에 대한 설명 보기

11 Dec 2023

flutter

플러터 앱을 개발할 때 사용자가 버튼 또는 아이콘 위에 마우스를 가져다 대면 해당 요소에 대한 설명이 나타나도록 하고 싶을 수 있습니다. 이를 위해 Tooltip 위젯을 사용할 수 있습니다. Tooltip은 사용자가 특정 요소 위에 마우스를 올렸을 때 해당 요소에 대한 간단한 설명을 표시하는 데 사용됩니다.

다음은 Tooltip 위젯을 사용하여 버튼에 대한 설명을 추가하는 간단한 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tooltip Example'),
        ),
        body: Center(
          child: Tooltip(
            message: '이 버튼은 홈으로 돌아갑니다.',
            child: IconButton(
              icon: Icon(Icons.home),
              onPressed: () {
                // 버튼 클릭 시 수행될 작업
              },
            ),
          ),
        ),
      ),
    );
  }
}

위 예제에서 Tooltip 위젯은 IconButton 위젯을 감싸고 있으며, message 속성을 사용하여 해당 아이콘에 대한 설명을 정의합니다.

이제 앱을 실행하고 아이콘 위에 마우스를 가져다 대면 설명이 표시될 것입니다.

우리는 Tooltip 위젯을 사용하여 버튼이나 아이콘과 같은 요소에 대한 추가 설명을 제공할 수 있습니다. 이를 통해 사용자는 앱의 기능을 더 쉽게 이해하고 상호작용할 수 있습니다.

자세한 정보

Tooltip Widget 사용법