seong

InkWell 위젯 - 버튼화 시키기 본문

Flutter/Flutter

InkWell 위젯 - 버튼화 시키기

hyeonseong 2022. 11. 25. 11:18

버튼에는 여러가지가 있다. 

textbutton, elevatedbutton 등등 많이 존재한다. 하지만 앞의 버튼 디자인들은 기본적으로 제공해주는 디자인이 있다,

내가 원하는 디자인의 버튼을 만들기 위해선 Inkwell 위젯을 사용하면 된다.

 

사용법

- 버튼화 시키고 싶은 부분을 Inkwell 위젯으로 바꾸어 주기만 하면 된다. 

 

코드로 확인해보기 

Container를 간단하게 꾸미고 InkWell로 버튼화를 시켜 print로 확인했다.

body: Center(
          child: InkWell(
            onTap: (() {
              print("Container클릭 됨.");
            }),
            child: Container(
              width: 300,
              height: 300,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.green,
                border: Border.all(color: Colors.black),
              ),
              child: Center(
                  child: Text(
                "Container클릭",
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              )),
            ),
          ),
        ),

 

왠만하면 제공해주는 버튼을 사용해서 쓰겠지만 혹시나 나중에 디자인이 필요한 버튼이 생긴다면 InkWell을 사용하면 되겠다