Flutter에서 드래그 이벤트를 사용하여 위젯을 줌인/줌아웃하는 기능을 구현하고 싶다면 getX 패키지를 사용할 수 있습니다. getX는 Flutter 애플리케이션에서 상태 관리를 간편하게 할 수 있도록 도와주는 패키지입니다.
1. getX 패키지 설치하기
우선 pubspec.yaml 파일에 getX 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 getX를 추가하세요.
dependencies:
flutter:
sdk: flutter
getX: ^4.0.0
추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치해주세요.
2. 줌인/줌아웃 위젯 구성하기
getX 패키지를 사용하여 줌인/줌아웃 기능을 구현하려면 먼저 상태 관리를 위한 컨트롤러를 만들어야 합니다. 아래와 같이 ZoomController라는 클래스를 만들어줍니다.
import 'package:get/get.dart';
class ZoomController extends GetxController {
double zoomLevel = 1.0;
void zoomIn() {
zoomLevel += 0.1;
update();
}
void zoomOut() {
zoomLevel -= 0.1;
update();
}
}
이제 위젯을 구성하기 위해 Stateful Widget을 사용합니다. GetX 패키지에서 제공되는 GetBuilder 위젯을 사용하면 컨트롤러와 연결된 위젯을 간편하게 업데이트할 수 있습니다.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class ZoomWidget extends StatelessWidget {
final ZoomController zoomController = Get.put(ZoomController());
@override
Widget build(BuildContext context) {
return GetBuilder<ZoomController>(
builder: (controller) {
return Scaffold(
appBar: AppBar(
title: Text('Zoom Widget Example'),
),
body: Center(
child: Transform.scale(
scale: controller.zoomLevel,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: GestureDetector(
onPanUpdate: (details) {
if (details.delta.dy > 0) {
controller.zoomOut();
} else if (details.delta.dy < 0) {
controller.zoomIn();
}
},
),
),
),
),
);
},
);
}
}
위 코드에서는 GetBuilder 위젯 안에서 Controller의 상태를 감시하고, 변경될 때마다 UI를 업데이트합니다. Transform.scale 위젯을 사용하여 크기를 조절하고, GestureDetector를 사용하여 드래그 이벤트를 감지하여 줌인/줌아웃 기능을 수행합니다.
3. 실행 및 확인하기
ZoomWidget을 실행하면 화면에 파란색 박스가 표시됩니다. 해당 박스를 드래그하면 드래그 방향에 따라 위젯이 줌인/줌아웃됩니다.
위와 같이 getX 패키지를 활용하여 Flutter 위젯의 줌인/줌아웃 기능을 구현하는 방법을 알아보았습니다. getX 패키지는 상태 관리를 편리하게 해주므로, 복잡한 애플리케이션에서 유용하게 사용될 수 있습니다.
참고: GetX 공식 문서
다음은 GetX 패키지의 상태 관리 기능을 활용하는 방법에 대한 예제 코드입니다.