플러터에서 InteractiveViewer 위젯 사용법 및 옵션 가이드

 

Flutter에서 InteractiveViewer 위젯은 사용자에게 풍부한 상호작용을 제공할 수 있는 강력한 도구입니다.

이 위젯은 콘텐츠를 스크롤, 확대 및 축소할 수 있는 기능을 제공하여 사용자 경험을 한층 향상시킵니다.

이 블로그 포스트에서는 InteractiveViewer의 기본 사용법과 다양한 옵션을 초보자도 이해할 수 있도록 쉽게 설명하겠습니다.

InteractiveViewer 위젯이란?

 

InteractiveViewer는 사용자가 콘텐츠를 상호작용할 수 있도록 도와주는 Flutter의 위젯입니다.

이 위젯은 주로 지도, 사진, 차트 등 확대 및 축소가 필요한 콘텐츠에 유용합니다.

사용자는 손가락 제스처로 콘텐츠를 확대하고 축소하거나 스크롤하여 볼 수 있습니다.

기본 사용법

InteractiveViewer를 사용하는 기본 예제는 매우 간단합니다.

다음 코드는 기본적인 확대 및 축소 기능을 제공하는 InteractiveViewer를 설정하는 방법을 보여줍니다.

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 InteractiveViewer 예제'),
        ),
        body: InteractiveViewer(
          child: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Zoom & Pan Me',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 InteractiveViewer는 Container 위젯을 감싸고 있으며, 사용자는 이 컨테이너를 확대하거나 축소할 수 있습니다.

주요 옵션 및 속성

1. scaleEnabled

이 옵션은 사용자가 콘텐츠를 확대하거나 축소할 수 있는지 여부를 설정합니다.

• 기본값: true
• 예제

InteractiveViewer(
  scaleEnabled: false,
  child: Container(
    color: Colors.blue,
    child: Center(
      child: Text(
        'Zoom Disabled',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)

위 코드에서는 확대 및 축소 기능이 비활성화됩니다.

2. panEnabled

이 옵션은 사용자가 콘텐츠를 드래그하여 이동할 수 있는지 여부를 설정합니다.

• 기본값: true
• 예제

InteractiveViewer(
  panEnabled: false,
  child: Container(
    color: Colors.green,
    child: Center(
      child: Text(
        'Pan Disabled',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)

위 코드에서는 콘텐츠를 드래그할 수 없게 설정됩니다.

3. minScale 및 maxScale

이 옵션들은 사용자가 확대할 수 있는 최소 및 최대 배율을 설정합니다.

• 기본값: minScale: 0.1, maxScale: 4.0
• 예제

InteractiveViewer(
  minScale: 0.5,
  maxScale: 2.0,
  child: Container(
    color: Colors.red,
    child: Center(
      child: Text(
        'Custom Scale Limits',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)

위 코드에서는 확대 가능한 최대 배율이 2.0으로 제한됩니다.

4. boundaryMargin

이 옵션은 콘텐츠가 이동할 수 있는 경계를 설정합니다. 일반적으로 EdgeInsets로 정의됩니다.

• 기본값: EdgeInsets.all(0)
• 예제

InteractiveViewer(
  boundaryMargin: EdgeInsets.all(20),
  child: Container(
    color: Colors.orange,
    child: Center(
      child: Text(
        'Boundary Margin',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)

위 코드에서는 콘텐츠의 경계가 화면 가장자리로부터 20픽셀 떨어지게 설정됩니다.

5. clipBehavior

이 옵션은 InteractiveViewer의 콘텐츠가 위젯의 경계를 넘어갈 때 어떻게 처리할지를 정의합니다.

• 기본값: Clip.hardEdge
• 예제

InteractiveViewer(
  clipBehavior: Clip.antiAlias,
  child: Container(
    color: Colors.purple,
    child: Center(
      child: Text(
        'Clip Behavior',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)

위 코드에서는 콘텐츠가 부드럽게 잘리도록 설정됩니다.

결론

InteractiveViewer는 Flutter에서 매우 강력한 도구로, 사용자에게 콘텐츠를 탐색하고 상호작용할 수 있는 방법을 제공합니다.

다양한 옵션을 통해 확대, 축소, 이동, 경계 설정 등을 자유롭게 조절할 수 있으며, 사용자 경험을 한층 향상시킬 수 있습니다.

이제 InteractiveViewer의 다양한 기능을 활용하여 더 매력적이고 상호작용이 가능한 UI를 만들어 보세요!

 

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

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