[Flutter] 새로운 화면으로 이동하고, 되돌아가기 - 페이지 이동

플러터에서는 route라는 개념으로 페이지 이동이 가능합니다. 

이 때 이동할 곳을 page라고 생각해주면 됩니다.

굳이 파일을 따로 나누지 않아도 같은 파일 안에서 page만 나눠주면 됩니다. 참 쉽죵? 😁

이동 할 때 쓰는 것으로는 Navagator 메서드를 사용하시면 됩니다. 

 

 

main.dart

          Container(
            margin: EdgeInsets.only(top: 100, left: 0),
            width: 100,
            child: IconButton(
              icon: Text('Signup', style: TextStyle(fontSize: 20),),
              onPressed: (){
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => SignUpPage()));
              },),
          ),

메인 페이지에서 Navigator.push()를 사용해서 이동할 페이지를 넣어줍니다. 

 

 

 

MaterialPageRoute()는 전체화면을 플랫폼 적응형 전환으로 대체하는 모달경로입니다. 

안드로이드에서는 페이지의 시작 전환은 확대 및 페이드 안되고 나가는 페이지는 축소 및 페이드 아웃되고, 

iOS는 페이지가 오른쪽에서 슬라이드 안으로 들어갔다가 반대로 나옵니다. 애니메이션이 더해지는 클래스입니다. 

 

▪ MaterialPageRoute(

 필수로 WidgetBuiler, RouteSetting, Bool 상태 가 있습니다 

)

이외에도 더 많은 속성을 더할 수 있습니다 

보러가기 👉 https://api.flutter.dev/flutter/material/MaterialPageRoute-class.html

 

 

 

 

signup.dart 파일의 SignUpPage 일부분입니다. 

Icons.close를 누르면 다시 main 페이지로 돌아가는 설정입니다. 

Navigator.pop() 을 쓰면 됩니다

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Stack(
          children: [
            //close button
            Container(
              margin: EdgeInsets.only(top:30, right: 20),
              alignment: Alignment.topRight,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    IconButton(onPressed: (){
                      Navigator.pop(context);
                    }, icon: Icon(Icons.close, color: Palette.iconColor,)
                    ),
                  ],
                ),
            ),
            //페이지 타이틀