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을 사용하면 되겠다