Flutter/Web

Flutter(플러터)-마우스 hover 될때 Cursor모양 바꾸기

바코더 2021. 6. 2. 15:56

Flutter 로 일반 Text 나 Image위에 마우스를 가져다 댈때, 즉 hover 될 때, 버튼처럼 손모양의 아이콘 등으로 바꾸고 싶을 때가 있다. 그럴때는 MouseRegion 위젯을 사용하면 된다.

예제

   child: GestureDetector(
                        onTap: () {
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => SomeWhere()));
                        },
                        child: MouseRegion(
                          cursor: SystemMouseCursors.click,
                          child: Text(
                            "Somewhere",
                            style: TextStyle(
                              color: Colors.white54,
                              fontSize: 20,
                            ),
                          ),
                        )),

 

위처럼 GestureDetector를 이용해서 Somewhere 라는 텍스트를 눌렀을 때, Navigation 이동을 시키고, 해당 Text 위젯의 Parent로 MouseResion 을 사용해서 cursur 모양을 SystemMouseCursors.click 바꾸면 Text 위에 마우스를 가져다 되면 버튼과 똑같이 마우스 모양이 바뀐다.