[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯에 중력 적용하기

04 Dec 2023

flutter

중력(gravity)은 많은 게임에서 중요한 요소입니다. 이번에는 Flutter의 getX 함수를 사용하여 중력을 적용하는 방법에 대해 알아보겠습니다.

1. getX 함수 소개

getX 함수는 flutter_xlider 라이브러리에서 제공하는 함수로, 사용자의 터치 이벤트를 감지할 수 있습니다. getX 함수를 사용하여 사용자의 터치 위치를 얻을 수 있으며, 이를 활용하여 중력을 구현할 수 있습니다.

2. getX 함수 사용법

먼저, 프로젝트에 flutter_xlider를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter_xlider: ^2.0.0

이제 getX 함수를 사용하여 중력을 적용할 위젯을 만들어보겠습니다. 아래의 예제 코드를 참고하십시오:

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

class GravityWidget extends StatefulWidget {
  @override
  _GravityWidgetState createState() => _GravityWidgetState();
}

class _GravityWidgetState extends State<GravityWidget> {
  double positionX = 0;
  double positionY = 0;
  double velocityX = 0;
  double velocityY = 0;
  double gravity = 9.8; // 중력 가속도

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          // 터치 위치 업데이트
          positionX = details.globalPosition.dx;
          positionY = details.globalPosition.dy;
        });
      },
      onPanEnd: (details) {
        setState(() {
          // 터치 종료 시 초기화
          velocityX = 0;
          velocityY = 0;
        });
      },
      child: AnimatedBuilder(
        animation: AnimationController(vsync: this, duration: Duration(milliseconds: 16)),
        builder: (context, snapshot) {
          // 중력에 따른 위치 업데이트
          velocityY += gravity;
          positionX += velocityX;
          positionY += velocityY;

          // 위치 제한
          if (positionX < 0) positionX = 0;
          if (positionX > MediaQuery.of(context).size.width - 100) positionX = MediaQuery.of(context).size.width - 100;
          if (positionY < 0) {
            positionY = 0;
            velocityY = -velocityY * 0.9; // 바닥 충돌 시 감속
          }
          if (positionY > MediaQuery.of(context).size.height - 100) {
            positionY = MediaQuery.of(context).size.height - 100;
            velocityY = -velocityY * 0.9; // 천정 충돌 시 감속
          }

          return Positioned(
            top: positionY,
            left: positionX,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          );
        },
      ),
    );
  }
}

위 코드에서는 GestureDetector를 사용하여 터치 이벤트를 감지하고, getX 함수를 사용하여 터치 위치를 얻습니다. 또한, AnimatedBuilder를 사용하여 위치를 업데이트하고 중력 효과를 적용합니다.

위젯을 화면에 표시하려면, 예를 들어 Scaffold 위에 다음 코드를 추가하면 됩니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gravity Widget'),
        ),
        body: Center(
          child: GravityWidget(), // 중력을 적용할 위젯
        ),
      ),
    );
  }
}

3. 실행 결과

위의 코드를 실행하면, 사용자의 터치에 따라 파란색 사각형이 중력에 따라 이동한다는 것을 확인할 수 있습니다.

이제 Flutter에서 중력을 적용하는 방법을 알았으니, 게임 또는 애니메이션에 활용하여 보다 흥미로운 앱을 만들어보세요!

1. getX 함수 소개

2. getX 함수 사용법

3. 실행 결과

참고 자료