[Flutter] InkWell 란?

Flutter의 InkWell

InkWell은 Flutter에서 사용자의 터치 제스처(탭, 더블탭, 길게 누름 등)에 반응하는 위젯입니다. 사용자가 위젯을 터치했을 때 잉크가 퍼지는 듯한 시각적 효과(스플래시 효과)를 제공하여 버튼이나 상호작용이 가능한 요소처럼 만들 수 있습니다.

 

 

 

 

 

 

 

InkWell의 주요 특징

• 터치 제스처 감지: onTap, onDoubleTap, onLongPress와 같은 다양한 제스처를 감지할 수 있습니다.
• 스플래시 효과: 사용자가 터치했을 때 잉크가 퍼지는 듯한 시각적 효과를 제공하여 상호작용 피드백을 줍니다.
• 다양한 위젯에 적용 가능: InkWell은 이미지, 텍스트, 컨테이너 등 다양한 위젯을 감싸서 상호작용 가능한 형태로 만들 수 있습니다.

 

 

 

 

 

 

 

InkWell의 기본 사용법

InkWell을 사용하려면 InkWell로 감싸고 싶은 위젯을 감싸고, 터치 동작에 대한 콜백 함수를 설정하면 됩니다.

InkWell(
  onTap: () {
    print('InkWell 터치됨');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(10),
    ),
    child: Text(
      '클릭하세요',
      style: TextStyle(color: Colors.white),
    ),
  ),
)
    

 

 

 

 

 

 

 

 

 

InkWell의 주요 속성

• onTap: 사용자가 위젯을 터치했을 때 호출되는 콜백 함수입니다.
• onDoubleTap: 사용자가 위젯을 더블탭했을 때 호출되는 콜백 함수입니다.
• onLongPress: 사용자가 위젯을 길게 누를 때 호출되는 콜백 함수입니다.
• splashColor: 터치 시 스플래시 효과의 색상을 지정할 수 있습니다.
• borderRadius: 스플래시 효과의 모서리 반경을 설정할 수 있습니다.

 

 

 

 

 

 

 

 

 

InkWell 예시

아래 예제는 사용자가 버튼을 클릭하면 콘솔에 메시지를 출력하고, 스플래시 효과를 주는 예시입니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('InkWell 예제'),
        ),
        body: Center(
          child: InkWell(
            onTap: () {
              print('InkWell 터치됨');
            },
            splashColor: Colors.blueAccent,
            borderRadius: BorderRadius.circular(10),
            child: Container(
              padding: EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Text(
                '클릭하세요',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
    

 

 

 

 

 

 

 

 

InkWell의 다양한 제스처 처리

InkWell은 단순한 터치 외에도 다양한 제스처를 처리할 수 있습니다. 예를 들어, 더블탭이나 길게 누름에 대한 동작도 정의할 수 있습니다:

InkWell(
  onTap: () {
    print('한 번 터치됨');
  },
  onDoubleTap: () {
    print('더블탭 됨');
  },
  onLongPress: () {
    print('길게 눌림');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.green,
    child: Text('제스처를 시도하세요'),
  ),
)
    

 

 

 

 

 

 

 

InkWell의 사용 상황

• 버튼 역할: 기본 RaisedButton이나 FlatButton 대신 다양한 커스터마이징이 필요한 경우에 사용할 수 있습니다.
• 리스트 아이템 상호작용: 리스트의 각 아이템에 터치 이벤트를 추가할 때 사용할 수 있습니다.
• 이미지 또는 텍스트 상호작용: 이미지를 클릭하거나 텍스트에 터치 이벤트를 부여할 때 유용합니다.

 

 

 

 

 

 

 

결론

InkWell은 Flutter에서 터치 인터랙션을 쉽게 구현할 수 있는 위젯입니다. 버튼, 이미지, 텍스트 등 다양한 UI 요소에 터치 이벤트와 스플래시 효과를 추가하여 사용자가 상호작용하는 부분에 시각적 피드백을 제공할 수 있습니다.