[flutter] getX 함수를 사용하여 터치 이벤트에 따른 팝업 위젯 열기/닫기 처리하기

04 Dec 2023

flutter

팝업 위젯은 사용자에게 추가적인 정보나 선택사항을 제공하는데 유용하게 사용됩니다. Flutter에서 getX 함수를 사용하여 포지션과 터치 이벤트를 감지하여 팝업 위젯을 열고 닫는 방법을 알아보겠습니다.

1. getX 패키지 추가하기

먼저 getX 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 아래 코드를 추가합니다:

dependencies:
  get: ^4.3.8

그리고 터미널에서 flutter pub get을 실행하여 패키지를 다운로드합니다.

2. 팝업 위젯 만들기

간단한 팝업 위젯을 만들어 보겠습니다. popup_widget.dart 파일을 생성하고 아래 코드를 작성합니다:

import 'package:flutter/material.dart';

class PopupWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 100,
      color: Colors.white,
      child: Center(
        child: Text(
          '팝업 위젯',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

3. 메인 화면에서 getX 함수 사용하기

이제 메인 화면에서 getX 함수를 사용하여 터치 이벤트에 따라 팝업 위젯을 열고 닫는 로직을 구현해 보겠습니다. main.dart 파일을 열고 아래 코드를 작성합니다:

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

import 'popup_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final GlobalKey popupKey = GlobalKey(); // 팝업 위젯의 키

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX Example'),
      ),
      body: GestureDetector(
        onTap: () {
          // 터치 이벤트 시 팝업 열기
          Get.dialog(
            PopupWidget(),
            barrierDismissible: true,
            barrierColor: Colors.black.withOpacity(0.5),
          );
        },
        behavior: HitTestBehavior.opaque,
        child: Center(
          child: Text(
            '화면을 터치하세요',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 GetX 패키지의 Get.dialog 함수를 사용하여 팝업 위젯을 열고, barrierColor를 사용하여 배경을 어둡게 처리하였습니다. GestureDetector 위젯을 사용하여 터치 이벤트를 감지하고 팝업을 열어 줍니다.

4. 실행해보기

이제 앱을 실행하여 화면을 터치해보세요. 팝업 위젯이 나타나는 것을 확인할 수 있을 것입니다.

GETX 패키지를 사용하면 터치 이벤트에 따라 동적으로 팝업 위젯을 제어할 수 있습니다. 추가로 팝업을 닫는 기능을 구현하려면 팝업 위젯에 닫기 버튼을 추가해야 합니다.

1. getX 패키지 추가하기

2. 팝업 위젯 만들기

3. 메인 화면에서 getX 함수 사용하기

4. 실행해보기

참고 자료