[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 사이 애니메이션 이동하기

04 Dec 2023

flutter

Flutter에서 getX 함수를 사용하여 터치 이벤트에 따라 위젯 사이의 애니메이션을 이동하는 방법에 대해 알아보겠습니다.

getX 함수란?

getX는 Flutter 패키지인 flutter_hooks에 속한 함수로, 터치 이벤트를 감지하는 데 사용됩니다. 이 함수는 터치 이벤트의 좌표를 얻을 수 있으며, 해당 이벤트를 처리하기 위해 사용자 정의 로직을 작성하는 데 도움을 줍니다.

위젯 애니메이션 이동하기

먼저, flutter_hooks 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter_hooks: ^0.20.0

다음으로, flutter_hooks 패키지를 가져옵니다:

import 'package:flutter_hooks/flutter_hooks.dart';

이제, GetXAnimationWidget 이름의 StatefulWidget를 작성하고, 해당 StatefulWidget 내부에 _position이라는 변수를 선언합니다. 이 변수는 터치 이벤트에 따라 위치가 변경될 것입니다.

class GetXAnimationWidget extends StatefulWidget {
  @override
  _GetXAnimationWidgetState createState() => _GetXAnimationWidgetState();
}

class _GetXAnimationWidgetState extends State<GetXAnimationWidget> {
  var _position = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          _position += details.delta;
        });
      },
      child: Transform.translate(
        offset: _position,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}

위의 코드에서 onPanUpdate 콜백은 터치 이벤트가 발생할 때마다 발생하며, 사용자의 손가락 움직임에 따라 _position 변수를 갱신합니다. 이 때, delta 속성은 손가락의 이동 거리를 나타냅니다.
마지막으로, GetXAnimationWidget 위젯을 앱의 어디에서 사용할지 결정하고, 화면에 표시합니다:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GetX Animation Example'),
      ),
      body: Center(
        child: GetXAnimationWidget(),
      ),
    ),
  ));
}

이제 앱을 실행하고, 위젯을 터치하여 이동시켜보면, 터치에 따라 위젯이 애니메이션되는 것을 확인할 수 있습니다.

마치며

이번 포스트에서는 Flutter에서 GetX 함수를 사용하여 터치 이벤트에 따라 위젯 사이의 애니메이션을 이동하는 방법에 대해 알아보았습니다. GetX 함수의 활용을 통해 사용자 상호작용을 더욱 풍부하게 만들 수 있습니다.

더 자세한 내용은 GetX 패키지 공식 문서를 참조하세요.