<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 ​개요​이 포스팅에서는 InkWell 이 무엇인지 알고 있다는 가정하에 설명을 진행한다.Material Design 으로 제공되는 버튼들도 매우 훌륭하지만 해당 버튼들을 가지고 커스터마이징 하는것보다는 직접 custom 하게 버튼을 만드는게 오히려 더 쉬운 경우가 대부분이다. custom 하게 버튼을 만든 이후, onTap 과 같은 이벤트가 발생했을때 해당 버튼에 InkWell 로 애니메이션을 주고 싶을수 있다. 문제는 InkWell 로 Custom Button 을 감싸도 애니메이션이 동작하지 않는 상황이 있다. 이 포스팅에서는 InkWell 이 잘 동작하도록 Custom Button 을 만드는 방법에 대해 설명한다.​​​InkWell (feat. Custom Button)​아래와 같이 InkWell 을 사용하여 Custom 버튼을 만들려한다.
 </div> 
 <div id="SE-77871b11-9edd-4ed0-ae5b-28856d6ee1ae">
 InkWell 을 사용할때 주의할 점은 아래와 같다.<ul><li>Container 대신 Ink 를 사용한다.<ul><li>Ink 가 아닌 Container 를 사용할 경우, InkWell 동작이 Container 에 가려 안보인다.</li><li>만약 Container 의 alignmennt 와 같은 특정 option 을 사용했었다면 해당 기능을 하는 다른 위젯과 같이 사용하자. (ex. alignment =&gt; Align widget 사용)</li></ul></li><li>Ink 를 InkWell 로 감싼다.</li><li>onTap 과 같이 이벤트를 받는 함수를 작성한다.<ul><li>간혹, InkWell 로 감싸놓고 이벤트 핸들링 함수를 작성 안하는 경우가 있는데 꼭 작성해줘야 한다. 없으면 애니메이션이 동작하지 않는다.</li></ul></li></ul>​
 </div> <div id="SE-96f0704d-79cd-4380-81b0-ee4ceacbac8f">
 import 'package:flutter/material.dart';

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

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: _CustomButton(),
 ),
 );
 }
}

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

 @override
 Widget build(BuildContext context) {
 return InkWell(
 onTap: () {},
 child: Ink(
 width: 200,
 height: 50,
 decoration: BoxDecoration(
 color: Colors.green,
 borderRadius: BorderRadius.circular(10),
 ),
 child: Align(
 alignment: Alignment.center,
 child: Text(
 "Custom Button",
 style: TextStyle(
 color: Colors.white,
 fontWeight: FontWeight.bold,
 ),
 ),
 ),
 ),
 );
 }
}

 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

개요 이 포스팅에서는 InkWell 이 무엇인지 알고 있다는 가정하에 설명을 진행한다. Material Design 으로 제공되는 버튼들도 매우 훌륭하지만 해당 버튼들을 가지고 커스터마이징 하는것보다는 직접 custom 하게 버튼을 만드는게 오히려 더 쉬운 경우가 대부분이다. custom 하게 버튼을 만든 이후, onTap 과 같은 이벤트가 발생했을때 해당 버튼에 InkWell 로 애니메이션을 주고 싶을수 있다. 문제는 InkWell 로 Custom Button 을 감싸도 애니메이션이 동작하지 않는 상황이 있다. 이 포스팅에서는 InkWell 이 잘 동작하도록 Custom Button 을 만드는 방법에 대해 설명한다. InkWell (feat. Custom Button) 아래와 같이 InkWell 을 사용하여 Cus.......

[Flutter] InkWell 이 동작하지 않아요 (feat. custom button)

댓글