[flutter] FlatButton을 사용하여 마우스 오버 효과를 추가하는 방법은?
Flutter 앱을 개발할 때 버튼에 마우스 오버 효과를 추가하려면 FlatButton 위젯을 사용하여 간단한 방법으로 구현할 수 있습니다. 이 포스트에서는 버튼에 마우스 오버 효과를 추가하는 방법을 알아보겠습니다.
1. FlatButton 위젯 생성
먼저, FlatButton 위젯을 생성합니다.
FlatButton(
onPressed: () {
// 버튼 클릭 시 실행될 코드 작성
},
child: Text('버튼'),
)
2. 마우스 오버 효과 추가
FlatButton 위젯에 마우스 오버 효과를 추가하려면 MouseRegion 위젯을 이용하면 됩니다.
MouseRegion(
onEnter: (event) {
// 마우스가 영역에 진입했을 때 실행될 코드 작성
},
onExit: (event) {
// 마우스가 영역을 빠져나갔을 때 실행될 코드 작성
},
child: FlatButton(
onPressed: () {
// 버튼 클릭 시 실행될 코드 작성
},
child: Text('버튼'),
),
)
MouseRegion의 onEnter와 onExit 콜백 함수를 사용하여 마우스가 버튼 위에 올라갔을 때와 빠져나갔을 때 원하는 효과를 추가할 수 있습니다.
3. 커스텀 효과 추가
마우스 오버 효과에 이미지나 다른 위젯을 사용하고 싶다면 MouseRegion의 hover 프로퍼티를 이용하여 마우스 오버 시 다른 위젯을 표시할 수도 있습니다.
MouseRegion(
onEnter: (event) {
// 마우스가 영역에 진입했을 때 실행될 코드 작성
},
onExit: (event) {
// 마우스가 영역을 빠져나갔을 때 실행될 코드 작성
},
child: FlatButton(
onPressed: () {
// 버튼 클릭 시 실행될 코드 작성
},
child: Text('버튼'),
),
// 마우스 오버 시 다른 위젯을 보여줄 수 있는 hover 프로퍼티 사용 예시
hover: Container(
child: Icon(Icons.favorite),
),
)
이제 마우스 오버 효과를 FlatButton에 간단히 추가하는 방법을 알아보았습니다. 이러한 방식으로 버튼에 다양한 인터랙티브 효과를 추가할 수 있습니다.