플러터에서 Tooltip 위젯 사용 방법: 초보자 가이드

 

Flutter는 모바일 앱 개발을 쉽고 빠르게 할 수 있는 강력한 프레임워크입니다.

그 중에서도 Tooltip 위젯은 사용자가 위젯 위에 마우스를 올리거나 길게 눌렀을 때 추가 정보를 제공하는 데 유용합니다.

이번 포스트에서는 Tooltip 위젯의 기본 사용 방법과 옵션에 대해 알아보겠습니다.

Tooltip 위젯이란?

 

Tooltip 위젯은 사용자가 특정 요소에 대해 더 많은 정보를 원할 때 간단한 설명이나 힌트를 제공하는 데 사용됩니다.

주로 아이콘이나 버튼 위에 사용하여 사용자 경험을 향상시킵니다.

Tooltip 위젯의 기본 사용법

먼저, 기본적인 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('Flutter Tooltip Example')),
        body: Center(
          child: Tooltip(
            message: 'This is a tooltip',
            child: Icon(Icons.info, size: 50),
          ),
        ),
      ),
    );
  }
}

주요 옵션 설명

1. message

Tooltip 위젯이 표시할 메시지를 지정합니다. 이 옵션은 필수입니다.

message: 'This is a tooltip',

2. height

툴팁의 높이를 설정합니다. 기본값은 32.0입니다.

height: 40.0,

3. padding

툴팁의 내부 여백을 설정합니다. 기본값은 EdgeInsets.symmetric(horizontal: 16.0)입니다.

padding: EdgeInsets.all(8.0),

4. margin

툴팁과 화면 경계 사이의 여백을 설정합니다. 기본값은 EdgeInsets.all(0.0)입니다.

margin: EdgeInsets.symmetric(horizontal: 20.0),

5. verticalOffset

툴팁이 위젯에서 떨어지는 거리를 설정합니다. 기본값은 24.0입니다.

verticalOffset: 20.0,

6. preferBelow

툴팁이 위젯 아래에 표시될지 여부를 설정합니다. 기본값은 true입니다.

preferBelow: false,

7. showDuration

툴팁이 표시되는 시간을 설정합니다. 기본값은 const Duration(seconds: 2)입니다.

showDuration: Duration(seconds: 3),

8. decoration

툴팁의 외관을 커스터마이즈할 수 있습니다. 기본값은 BoxDecoration입니다.

decoration: BoxDecoration(
  color: Colors.blue,
  borderRadius: BorderRadius.circular(8),
),

Tooltip 위젯의 활용 예제

Tooltip 위젯을 사용하면 사용자에게 추가 정보를 쉽게 제공할 수 있습니다.

아래는 다양한 옵션을 활용한 예제입니다.

class TooltipExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Advanced Tooltip Example')),
      body: Center(
        child: Tooltip(
          message: 'Settings',
          height: 50,
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.all(5),
          verticalOffset: 30,
          preferBelow: false,
          showDuration: Duration(seconds: 4),
          decoration: BoxDecoration(
            color: Colors.orange,
            borderRadius: BorderRadius.circular(10),
          ),
          textStyle: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
          child: Icon(Icons.settings, size: 50),
        ),
      ),
    );
  }
}

결론

Tooltip 위젯은 Flutter에서 사용자에게 추가 정보를 제공하는 데 매우 유용한 도구입니다. 다양한 옵션을 통해 자신만의 스타일로 툴팁을 커스터마이즈할 수 있으며, 사용자 경험을 크게 향상시킬 수 있습니다. Flutter 초보자도 쉽게 사용할 수 있으므로, 앱 디자인 시 Tooltip 위젯을 적극 활용해보세요.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱