seong
InkWell 위젯 - 버튼화 시키기 본문
버튼에는 여러가지가 있다.
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을 사용하면 되겠다
'Flutter > Flutter' 카테고리의 다른 글
flutter ViewInset영역 처리 하기 - 키보드, FormField영역 겹치지 않게 하기 (0) | 2022.12.01 |
---|---|
Flutter - Text.rich (0) | 2022.11.26 |
Container의 decoration으로 테두리 주기 (1) | 2022.11.25 |
appbar 의 elevation로 그림자 값 주기 (0) | 2022.11.25 |
Flutter - SafeArea 위젯 (0) | 2022.11.25 |