[Flutter] InkWell과 GestureDetector

 

사용자의 동작(클릭, 더블 클릭, 오래 누르기 등)을 감지하는 것을 Gesture라고 합니다.

 

Flutter에는 Container와 같이 Gesture를 감지할 수 없는 위젯들에게 Gesture 기능을 부여할 수 있는 위젯이 있습니다.

( 쉽게 설명해 버튼이 아닌 위젯을 버튼처럼 사용할 수 있게 해주는 위젯 )

 

이번 글에선 그 두가지의 위젯과 간단한 차이점을 소개합니다.

 

 

InkWell    |    GestureDetector

---

 

InkWell

 

예제 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'InkWell',
      home: Scaffold(
        appBar: AppBar(
          title: Text('InkWell'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "${count}",
                style: TextStyle(fontSize: 50),
              ),
              SizedBox(height: 40),
              InkWell(
                onTap: () {
                  setState(() {
                    count++;
                  });
                },
                child: Container(
                  padding: EdgeInsets.all(15),
                  child: Text("더하기", style: TextStyle(fontSize: 30)),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

사용법은 매우 간단합니다.

사용하고자 하는 Gesture 속성을 선택하고, 어떤 동작을 할지 선언합니다.

위 예제코드는 더하기 글자를 탭 시 count의 값을 1씩 증가시킵니다.

 

InkWell의 특징은 사용자의 동작을 감지했을 때 잉크가 퍼지는 듯한 애니메이션 효과를 보입니다.

 

 

onTab 말고도 어떤 Gesture가 있는지 궁금하다면?!

https://api.flutter.dev/flutter/material/InkWell-class.html

InkWell class - material library - Dart API

 

---

GestureDetector

 

예제 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GestureDetector',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GestureDetector'),
          centerTitle: true,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "${count}",
                style: TextStyle(fontSize: 50),
              ),
              SizedBox(height: 40),
              GestureDetector(
                onTap: () {
                  setState(() {
                    count++;
                  });
                },
                child: Container(
                  padding: EdgeInsets.all(15),
                  child: Text("더하기", style: TextStyle(fontSize: 30)),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

 

GestureDetector의 사용법은 InkWell과 매우 비슷합니다.

InkWell과의 차이점은 사용자의 동작을 감지 시 별도의 애니메이션 효과가 없습니다.

 

 

하지만, InkWell보다 훨씬 다양하고 정밀한 Gesture를 사용할 수 있습니다.

 

onTab 말고도 어떤 Gesture가 있는지 궁금하다면?!

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

GestureDetector class - widgets library - Dart API