[flutter] getX 함수를 사용하여 터치 이벤트에 따른 물결 모션 효과 구현하기

04 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 기능과 효과를 구현할 수 있는 다재다능한 도구들을 제공합니다. 이번에는 getX 함수를 사용하여 터치 이벤트에 따른 물결 모션 효과를 구현하는 방법에 대해 알아보겠습니다.

getX 함수란?

getX 함수는 플러터에서 제공하는 패키지인 GetX의 일부로, 터치 이벤트에 대한 정보를 쉽게 얻을 수 있도록 도와주는 함수입니다. getX 함수를 사용하면 터치 이벤트에 대한 좌표 정보와 클릭 여부 등을 간편하게 처리할 수 있습니다.

물결 모션 효과 구현하기

다음은 getX 함수를 사용하여 터치 이벤트에 따른 물결 모션 효과를 구현하는 예제입니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class RippleEffectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('물결 모션 효과'),
      ),
      body: GestureDetector(
        onTapDown: (TapDownDetails details) {
          final RenderBox box = context.findRenderObject() as RenderBox;
          final Offset localOffset = box.globalToLocal(details.globalPosition);
          Get.to(RippleEffectWidget(
            position: localOffset,
          ));
        },
        child: Center(
          child: Text('터치하여 물결 모션 효과 확인하기'),
        ),
      ),
    );
  }
}

class RippleEffectWidget extends StatelessWidget {
  final Offset position;

  const RippleEffectWidget({Key? key, required this.position}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Center(
              child: Text(
                '물결 모션 효과',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
          Positioned(
            left: position.dx - 100,
            top: position.dy - 100,
            child: TweenAnimationBuilder<double>(
              duration: const Duration(milliseconds: 500),
              tween: Tween(begin: 0.0, end: 1.0),
              builder: (context, value, child) {
                return Container(
                  width: value * 200,
                  height: value * 200,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.blue.withOpacity(1 - value),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

위 예제에서는 GestureDetector를 통해 터치 이벤트를 감지하고, 해당 이벤트 위치를 getX 함수를 통해 얻습니다. 그런 다음 RippleEffectWidget를 호출하면서 터치 위치를 인자로 전달합니다. RippleEffectWidget에서는 TweenAnimationBuilder를 사용하여 물결 모션 효과를 구현하고, 인자로 받은 위치를 기준으로 원을 그립니다.

마무리

getX 함수를 사용하여 터치 이벤트에 따른 물결 모션 효과를 구현하는 방법을 알아보았습니다. 이를 활용하여 플러터 애플리케이션에 동적이고 효과적인 사용자 인터랙션을 구현해보세요. Happy coding!