[flutter] getX 함수를 사용하여 터치 이벤트 위치에 따라 글자 색상 변경하기

04 Dec 2023

flutter

Flutter에서 getX 함수를 사용하면 터치 이벤트 발생 위치를 쉽게 가져올 수 있습니다. 이를 활용하여 글자의 색상을 변경하는 간단한 예제를 만들어보겠습니다.

1. getX 패키지 설치하기

먼저, getX 패키지를 설치해야 합니다. pubspec.yaml 파일에 dependencies 섹션에 getX를 추가하고, 패키지를 가져옵니다.

dependencies:
  get: ^4.1.4

터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. 코드 작성하기

다음은 getX를 사용하여 터치 이벤트 위치에 따라 글자 색상을 변경하는 예제 코드입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX Example'),
        ),
        body: GestureDetector(
          onTapDown: (TapDownDetails details) {
            double tapX = details.localPosition.dx;
            if (tapX < Get.width / 2) {
              Get.snackbar('GetX Example', '왼쪽을 터치했습니다.', snackPosition: SnackPosition.BOTTOM);
            } else {
              Get.snackbar('GetX Example', '오른쪽을 터치했습니다.', snackPosition: SnackPosition.BOTTOM);
            }
          },
          child: Center(
            child: Text(
              'GetX Example',
              style: TextStyle(color: Colors.black, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 onTapDown 콜백을 사용하여 터치 이벤트 발생 시 좌표를 가져옵니다. 가져온 x 좌표 값에 따라서 왼쪽 또는 오른쪽을 터치했는지를 판단하여 GetX 패키지의 snackbar를 이용하여 텍스트를 표시합니다.

3. 실행하기

앱이 실행되면 화면 중앙에 “GetX Example” 글자가 표시됩니다. 화면의 왼쪽 또는 오른쪽을 터치하면 해당 위치에 따라서 snackbar가 나타납니다.

이제 getX를 사용하여 터치 이벤트 위치에 따라 글자 색상을 변경하는 방법을 배웠습니다. getX를 활용하면 터치 이벤트를 다룰 때 편리하게 사용할 수 있습니다.

1. getX 패키지 설치하기

2. 코드 작성하기

3. 실행하기

참고 자료