[flutter] 버튼 위에 마우스를 올렸을 때 플러터 Tooltip으로 설명 표시하기

11 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 버튼 위에 마우스를 올렸을 때 간단한 설명을 표시하기 위한 툴팁(Tooltip)을 구현하는 방법에 대해 알아보겠습니다.

Flutter 툴팁 추가하기

플러터에서 버튼에 마우스를 올렸을 때 툴팁을 표시하기 위해 먼저 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: ElevatedButton(
              onPressed: () {
                print('버튼을 눌렀습니다!');
              },
              child: Text('버튼'),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Tooltip 위젯을 사용하여 message 속성에 툴팁으로 표시할 내용을 정의하고, ElevatedButton 위젯을 사용하여 버튼을 생성했습니다.

이제 앱을 실행하고, 버튼 위에 마우스를 가져다 대면 정의한 메시지가 툴팁으로 표시되는 것을 확인할 수 있습니다.

이상으로 플러터에서 버튼에 마우스를 올렸을 때 툴팁으로 설명을 표시하는 방법에 대해 알아보았습니다.

참고문헌: