[flutter] getX 함수를 사용하여 여러 개의 위젯에서의 터치 이벤트 처리하기

04 Dec 2023

flutter

Flutter에서 여러 개의 위젯에서 터치 이벤트를 처리해야 할 때 getX 함수를 사용할 수 있습니다. getX 함수는 GetX 라이브러리에서 제공되는 함수로, 상태 관리와 라우팅 기능을 제공합니다.

1. getX 라이브러리 추가하기

GetX 라이브러리를 사용하기 위해, pubspec.yaml 파일에서 다음과 같이 의존성을 추가합니다:

dependencies:
  get: ^4.1.4

의존성을 추가한 후에는 flutter pub get 명령어를 실행하여 라이브러리를 다운로드 받습니다.

2. getX 함수로 터치 이벤트 처리하기

getX 함수를 사용하여 여러 개의 위젯에서 터치 이벤트를 처리하는 방법은 다음과 같습니다:

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

class TouchEventPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('터치 이벤트 처리'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () => Get.to(FirstPage()),
              child: Container(
                width: 200,
                height: 50,
                color: Colors.blue,
                child: Center(
                  child: Text('첫 번째 페이지로 이동'),
                ),
              ),
            ),
            SizedBox(height: 20),
            GestureDetector(
              onTap: () => Get.to(SecondPage()),
              child: Container(
                width: 200,
                height: 50,
                color: Colors.red,
                child: Center(
                  child: Text('두 번째 페이지로 이동'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('첫 번째 페이지'),
      ),
      body: Center(
        child: Text('첫 번째 페이지입니다.'),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 페이지'),
      ),
      body: Center(
        child: Text('두 번째 페이지입니다.'),
      ),
    );
  }
}

위 코드에서는 GestureDetector 위젯을 사용하여 터치 이벤트를 처리하고, 각각의 onTap 콜백에서 GetX의 Get.to 함수를 사용하여 다른 페이지로 이동하고 있습니다. 여기서 FirstPage와 SecondPage는 이동할 페이지를 나타내는 위젯입니다.

3. 실행해보기

위의 코드를 실행하여 앱을 확인해보면, 첫 번째 페이지와 두 번째 페이지로 이동하는 버튼이 있는 화면이 나타납니다. 각 버튼을 누르면 해당 페이지로 이동하게 됩니다.

getX 함수를 사용하여 여러 개의 위젯에서 터치 이벤트를 처리하는 방법을 알아보았습니다. getX 라이브러리는 Flutter 앱 개발을 보다 편리하고 강력하게 만들어주는 라이브러리이며, 상태 관리와 라우팅 기능을 함께 제공합니다.

1. getX 라이브러리 추가하기

2. getX 함수로 터치 이벤트 처리하기

3. 실행해보기

참고 자료