[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 노이즈 효과 구현하기

04 Dec 2023

flutter

Flutter에서는 getX 함수를 사용하여 터치 이벤트를 감지하고, 해당 이벤트에 따른 위젯에 노이즈 효과를 구현할 수 있습니다. 이 튜토리얼에서는 getX 함수를 이용하여 터치 이벤트에 따라 위젯의 색상과 크기를 변경하는 노이즈 효과를 구현해보겠습니다.

필요한 패키지 가져오기

먼저 pubspec.yaml 파일에 아래의 패키지를 추가해주세요.

dependencies:
  getX: ^x.x.x

그리고 패키지를 가져오기 위해 다음과 같이 import 문을 추가해주세요.

import 'package:get/get.dart';

위젯 구현하기

이제 노이즈 효과를 구현할 위젯을 만들어보겠습니다. 아래의 코드를 참고하여 StatelessWidget 혹은 StatefulWidget을 구현해주세요.

class NoiseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 터치 이벤트 발생 시 색상과 크기 변경
        Get.find<NoiseController>().changeColorAndSize();
      },
      child: GetBuilder<NoiseController>(
        builder: (controller) {
          return AnimatedContainer(
            duration: Duration(milliseconds: 200),
            width: controller.size,
            height: controller.size,
            color: controller.color,
          );
        },
      ),
    );
  }
}

class NoiseController extends GetxController {
  var color = Colors.red;
  var size = 100.0;

  void changeColorAndSize() {
    // 색상 변경
    color = Colors.blue;
    
    // 크기 변경
    size = 200.0;

    // 변경된 속성을 업데이트하여 위젯을 리렌더링
    update();
  }
}

위 코드에서 NoiseWidget은 사용자의 터치 이벤트를 감지하며, GetBuilder 위젯을 이용하여 NoiseController의 상태를 리스닝합니다. NoiseController는 color와 size라는 변수를 가지고 있으며, changeColorAndSize 함수에서 이 변수들을 변경하고 화면을 업데이트합니다.

사용하기

마지막으로 NoiseWidget을 사용하여 원하는 곳에서 위젯을 출력해보세요.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: NoiseWidget(),
        ),
      ),
    );
  }
}

위 코드에서 MyApp은 NoiseWidget을 중앙에 배치하여 출력합니다.

결론

getX를 사용하여 터치 이벤트에 따른 위젯 노이즈 효과를 구현하는 방법에 대해 알아보았습니다. getX를 통해 터치 이벤트를 캡처하고, GetBuilder를 이용하여 상태를 업데이트하여 원하는 동작을 구현할 수 있습니다. 이를 응용하여 다양한 역동적인 사용자 인터페이스를 개발할 수 있습니다.