Flutter 강좌 - [Gesture] InkWell Vs, GestureDetector

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

 

지난 강좌에서 InkWell 위젯에 대해 알아봤다. 제스쳐 기능을 제공하지 않는 위젯(컨테이너 등)을 InkWell 위젯으로 감싸면 onTap() 등의 기능을 이용할 수 있다. 추가로 InkWell 위젯을 탭하면 애니메이션 효과가 발생한다.

이와 유사하게 제스쳐 기능을 제공하지 않는 위젯에 제스쳐 기능을 제공하는 래핑 위젯으로 제스쳐디텍터(GestureDetector)가 있다. 사용방법도 거의 유사하다.

우선 소스코드를 살펴보자.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "InkWell Demo";
    return MaterialApp(title: title, home: MyHomePage(title: title));
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, @required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: MyButton()),
    );
  }
}

/** InkWell 위젯
 * Container와 같이 제스쳐기능을 제공하지 않는 위젯을 래핑하여 onTap 기능 제공
 * InkWell 위젯을 탭하면 물결모양의 애니메이션 효과가 발생함
 */
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // InkWell 위젯 or Gesture 위젯
    //return InkWell(
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.all(12.0),
        child: Text('Flat Button'),
        // 일반 컨테이너 텍스트를 버튼처럼 꾸며줌
        decoration: BoxDecoration(
            // 테마의 버튼 컬러로 설정
            color: Theme.of(context).buttonColor,
            // 텍스트 외각을 버튼처럼 둥글게 처리
            borderRadius: BorderRadius.circular(8.0)),
      ),
      onTap: () {
        Scaffold.of(context).showSnackBar(SnackBar(content: Text('Tap')));
      },
    );
  }
}

 

지난 강좌의 거의 유사한 코드이며, MyButton 클래스의 build 메소드에서 반환되는 위젯이 InkWell에서 GestureDetector로만 변경되었다.

두 위젯의 차이점은 다음과 같다.

InkWell의 경우 onTap(). onDoubleTap() 등 자주 쓰이는 제스쳐 기능 몇가지만 제공한다. 하지만 GestureDetector의 다양한 Drag 제스쳐를 포함하여 모든 제스쳐 기능을 제공한다. GestureDetector를 이용하면 보다 상세한 제스쳐 제어가 가능하다는 뜻이다.

또 한가지 차이점은, GestureDetector의 경우 InkWell과 달리 Ripple Animation이라고 하는 물결이 퍼저나가는 모양의 애니메이션을 제공하지 않는다. 순수하게 제스쳐를 제어하는 기능에 충실하다 볼 수 있다.

 

본 강좌는 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱