[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯의 컬러 피킹 구현하기

04 Dec 2023

flutter

이번 글에서는 Flutter의 getX 함수를 사용하여 터치 이벤트에 따라 위젯의 색상을 선택하는 기능을 구현하는 방법에 대해 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter 패키지인 GetX의 핵심 함수 중 하나로, 상태 관리 및 의존성 주입을 간편하게 처리할 수 있는 기능을 제공합니다. getX 함수를 사용하면 상태 변화를 지켜보고 필요한 경우 위젯을 다시 렌더링할 수 있습니다.

구현하기 전에 준비물

이 예제를 따라하기 위해서는 다음과 같은 사전 지식과 패키지 설치가 필요합니다:

Flutter 개발 환경이 설치되어 있어야 합니다.
GetX 패키지의 최신 버전 설치가 필요합니다. 설치 방법은 GetX 공식 문서를 참고하세요.

구현 방법

GetX를 프로젝트에 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.1

아래와 같이 main.dart 파일을 열고 필요한 패키지를 import 합니다:

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

이제 터치 이벤트에 따른 색상 피킹을 위한 State 클래스를 선언합니다. ColorController 클래스를 다음과 같이 작성하세요:

class ColorController extends GetxController {
  final _color = Colors.white.obs;

  set color(Color value) => _color.value = value;
  get color => _color.value;
}

렌더링될 위젯을 작성합니다. ColorPickerWidget 클래스를 다음과 같이 작성하세요:

class ColorPickerWidget extends StatelessWidget {
  final ColorController _colorController = Get.find();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapUp: (TapUpDetails details) {
        _colorController.color = _getColorFromPosition(details.localPosition);
      },
      child: Container(
        width: 200,
        height: 200,
        color: _colorController.color,
      ),
    );
  }

  Color _getColorFromPosition(Offset position) {
    // 터치 위치에 따라 적절한 색상을 계산하고 반환하는 로직을 작성합니다.
    // 이 예제에선 터치 위치의 x, y 값을 이용하여 색상을 계산합니다.
    // 실제로는 원하는 로직에 따라 색상을 선택해야 합니다.
    // 예시 코드:
    final x = (position.dx / 200 * 255).toInt();
    final y = (position.dy / 200 * 255).toInt();
    return Color.fromARGB(255, x, y, 0);
  }
}

이제 main.dart 파일에서 위젯을 실행하는 코드를 수정합니다:

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

class MyApp extends StatelessWidget {
  final ColorController _colorController = Get.put(ColorController());

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color Picker'),
        ),
        body: Center(
          child: ColorPickerWidget(),
        ),
      ),
    );
  }
}

앱을 실행하고 위젯을 터치해보세요. 터치한 위치에 따라 위젯의 색상이 변경될 것입니다.

마무리

이제 getX 함수를 사용하여 터치 이벤트에 따라 위젯의 색상을 선택하는 기능을 구현하는 방법을 알아보았습니다. GetX 패키지를 사용하면 상태 관리와 의존성 주입을 간단하게 처리할 수 있어서 개발을 빠르고 효율적으로 진행할 수 있습니다. 추가적인 사용법은 GetX 공식 문서를 참고하시기 바랍니다.