[Flutter] 버튼 클릭 시 잉크가 퍼지는 효과 : InkWell

앱 버튼을 탭하면 마치 잉크가 퍼지는 것 같은 효과를 사용한 버튼이 있다.

내가 한 행동을 확실하게 인지시키기에 좋은데, inkwell을 사용하면 이 기능을 구현할 수 있다!

컨테이너처럼 별도의 기능을 제공하지 않는 위젯에 제스쳐 기능을 추가할 때 Inkwell 기능을 사용할 수 있다고 한다:)

InkWell이 적용된 버튼

import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
// MyApp 클래스 - title + MyHomePage
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    const title = 'InkWell Demo';
 
    return const MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}
 
// MyHomePage 클래스 - AppBar + MyButton(InkwWell 사용하는 부분!)
class MyHomePage extends StatelessWidget {
  final String title;
 
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: const Center(
        child: MyButton(),
      ),
    );
  }
}
 
// MyButton 클래스
class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    // InkWell로 사용자 지정 플랫 버튼 위젯을 감싸준다.
    return InkWell(
      // 사용자가 버튼을 클릭하면 스낵바를 보여준다
      onTap: () {
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
          content: Text('Tap'),
        ));
      },
      // 버튼의 모양을 디자인한다
      child: const Padding(
        padding: EdgeInsets.all(12.0),
        child: Text('Flat Button'),
      ),
    );
  }
}

 

 

참고자료 

https://flutter.dev/docs/cookbook/gestures/ripples

Add Material touch ripples