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

04 Dec 2023

flutter

Flutter에서는 getX 함수를 사용하여 터치 이벤트에 따른 물결 효과를 구현할 수 있습니다. getX 함수는 GestureDetector 위젯과 함께 사용되며, 터치 이벤트가 발생한 위치에 물결 효과를 생성합니다.

이번 예제에서는 getX 함수를 사용하여 버튼을 탭할 때 효과적으로 물결 효과를 구현하는 방법을 알아보겠습니다.

준비사항

이 예제를 따라하기 위해 Flutter SDK가 설치되어 있어야 합니다. Flutter SDK가 설치되어 있지 않다면 Flutter 공식 사이트에서 다운로드하고 설치하세요.

코드 예시

다음은 getX 함수를 사용하여 터치 이벤트에 따른 물결 효과를 구현한 버튼 위젯의 예시 코드입니다.

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

class RippleButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 버튼을 탭할 때 실행할 코드 작성
        print('Button tapped!');
      },
      child: Container(
        width: 200,
        height: 50,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Center(
          child: Text(
            'Tap Here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(GetMaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Ripple Effect Example'),
      ),
      body: Center(
        child: RippleButton(),
      ),
    ),
  ));
}

위 예시 코드에서는 RippleButton 클래스가 있는데, 이 클래스는 터치 이벤트에 따른 물결 효과를 구현한 버튼 위젯입니다. GestureDetector 위젯을 사용하여 onTap 콜백 함수를 등록하고, 그 안에서 원하는 코드를 실행할 수 있습니다. 현재 예시 코드에서는 단순히 “Button tapped!” 메시지를 출력하도록 설정되어 있습니다.

메인 함수에서는 RippleButton을 화면 중앙에 배치하여 앱을 실행합니다.

실행 결과

위 코드를 실행하면 화면에 파란색의 버튼이 나타나며, 해당 버튼을 탭할 때마다 “Button tapped!” 메시지가 콘솔에 출력됩니다.

결론

GetX 함수를 사용하여 터치 이벤트에 따른 물결 효과를 구현할 수 있습니다. 이를 이용하면 사용자가 앱의 버튼 등을 터치할 때 시각적인 피드백을 제공할 수 있습니다. 앱의 사용성을 높이고, 사용자들에게 더욱 편리한 경험을 제공할 수 있습니다.