[flutter] getX 함수를 사용하여 터치 이벤트 위치 값을 다이얼 게이지 위젯으로 전달하기

04 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 모바일 앱이나 웹 앱을 만들기 위한 플랫폼입니다. Flutter는 사용자 인터페이스를 구축하고 애니메이션을 쉽게 구현할 수 있는 강력한 도구를 제공합니다.

여기서는 getX 함수를 사용하여 터치 이벤트의 위치 값을 다이얼 게이지 위젯으로 전달하는 방법에 대해 알아보겠습니다. getX 함수는 GetX 패키지의 일부로 제공되며, 상태 관리와 라우팅을 쉽게 할 수 있습니다.

1. GetX 패키지 설치하기

우선, Flutter 프로젝트에 GetX 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 코드를 추가하세요:

dependencies:
  get: ^4.1.4

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치하세요.

2. 다이얼 게이지 위젯 생성하기

GetX 패키지와 터치 이벤트를 사용하여 다이얼 게이지 위젯을 생성합니다. 다이얼 게이지는 사용자가 터치한 위치에 따라 값을 표시하는 위젯입니다.

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

class DialGaugeWidget extends StatelessWidget {
  final double minValue;
  final double maxValue;

  DialGaugeWidget({this.minValue = 0, this.maxValue = 100});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        double touchPosition = details.localPosition.dx;
        double value = ((touchPosition / Get.width) * (maxValue - minValue)) + minValue;
        print('Touched position: $value');
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.grey,
        child: Center(
          child: Text(
            'Dial Gauge',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

위의 코드는 DialGaugeWidget 클래스를 정의하는 코드입니다. minValue와 maxValue는 다이얼 게이지의 최솟값과 최댓값을 나타냅니다.

onTapDown 이벤트에서 GetX.width를 사용하여 화면의 너비를 가져옵니다. 터치한 위치를 가져와서 다이얼 게이지에 맞게 값을 계산하고, 해당 값을 출력합니다.

3. 다이얼 게이지 위젯 사용하기

이제 다이얼 게이지 위젯을 사용하여 터치 이벤트의 위치 값을 확인할 수 있습니다. 다음 코드를 사용하여 다이얼 게이지를 화면에 출력합니다:

import 'package:flutter/material.dart';

import 'dial_gauge_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GetX Dial Gauge',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX Dial Gauge'),
        ),
        body: Center(
          child: DialGaugeWidget(),
        ),
      ),
    );
  }
}

위의 코드는 DialGaugeWidget를 화면에 출력하는 최소한의 앱 코드입니다. 앱을 실행하고 다이얼 게이지 위젯을 터치하면 콘솔에 터치한 위치의 값을 출력할 수 있습니다.

이제 getX 함수를 사용하여 터치 이벤트의 위치 값을 다이얼 게이지 위젯으로 전달할 수 있는 방법을 알아보았습니다. getX 함수를 사용하면 간단하고 편리하게 상태 관리와 라우팅을 처리할 수 있습니다.

1. GetX 패키지 설치하기

2. 다이얼 게이지 위젯 생성하기

3. 다이얼 게이지 위젯 사용하기

참고 자료