Flutter

[Flutter] Text 클릭하여 화면 이동 (GestureDetector, Navigator)

sinw212 2023. 7. 18. 21:10

코드를 작성하다보면 버튼이 아닌 위젯을 버튼처럼 사용하고싶을 때가 있다.

그 때 GestureDetector 를 사용하면 버튼처럼 사용할 수 있다.

 

또한 Flutter에서는 각 화면을 라우트(Route)라고 부르는데 화면을 이동할 때 Navigator를 사용한다.

 

아래 코드는 버튼이 아닌 위젯을 클릭했을 때 화면을 이동하는 코드이다.

"페이지 이동" 이라고 적힌 Text를 GestureDetector로 감싼 후, onTap() 안에 SecondPage로 이동하는 코드를 작성한다.

GestureDetector(
    onTap: () {
    	Navigator.push(
            context,
            MaterialPageRoute(
            	builder: (context) => SecondPage(),
            ),
        );
    },
    child: Text(
    	"페이지 이동"
    ),
),

 

추가로 아래 코드를 활용하여 현재 화면을 종료할 수 있다.

Navigator.pop(context);