[Flutter] GestureDetector 사용법 - 위젯을 마우스로 이동하는법

 

제스처를 감지하는 위젯입니다.

NULL이 아닌 콜백에 해당하는 제스처를 인식합니다.

이 위젯에 자식이 있으면 크기는 해당 자식을 따르고 만약 자식이 없을경우 부모에 맞춰서 크기가 조정됩니다.

 

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

---

 

사용법은 간단합니다.

사용하려는 Gesture 속성을 선택하고 어떤 동작을 할지 선언하면 됩니다.

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HomeScreen(),
      ),
    );

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  double _top = 0;
  double _left = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: _top,
          left: _left,
          child: GestureDetector(
            onTap: () => print('Tapeed!'),
            onPanUpdate: (details) => setState(
              () {
                _top += details.delta.dy;
                _left += details.delta.dx;
              },
            ),
            child: Container(
              height: 100,
              width: 100,
              color: Colors.red,
            ),
          ),
        ),
      ],
    );
  }
}

---

위와 같이 StatefulWidget을 이용하여 버튼을 클릭시 상태를 변화시킬수 있습니다.

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HomeScreen(),
      ),
    );

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _lightIsOn = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: FractionalOffset.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(
                Icons.lightbulb_outline,
                color: _lightIsOn ? Colors.yellow.shade600 : Colors.black,
                size: 60,
              ),
            ),
            GestureDetector(
              onTap: () => setState(
                () {
                  _lightIsOn = !_lightIsOn;
                },
              ),
              child: Container(
                color: Colors.yellow.shade600,
                padding: EdgeInsets.all(8),
                child: Text(_lightIsOn ? 'TURN LIGHT OFF' : 'TURN LIGHT ON'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}