[Flutter] Navigator

Flutter에서 페이지 이동 만드는 방법

웹 환경에서의 "다른 페이지로 이동" 기능은 지금 있는 페이지를 지우고 새로운 페이지를 로드하는 식으로 동작하는데 모바일 앱은 그럴 이유가 없다.

코딩애플

• 페이지 위에 페이지를 덮는 식으로 간단하게 페이지 이동을 구현할 수 있습니다.
• 카톡이나 다른 앱들도 뭔가를 누르면 페이지가 밑에서 부터 솟아오르면서 덮어진다. 앱은 이게 일반적인 방법

기본 문법

// Mavigator.push()

IconButton(
  icon: Icon(Icons.add_box_outlined),
  onPressed: (){
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context){return Text('안녕'))},
    );
  },
),

return이 하나밖에 없으면

  onPressed: (){
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => Text('안녕')),
    );
  },

뒤로가기 버튼

  onPressed: (){
    Navigator.pop(
      context,
    );
  },

만약 앱이 여러 페이지로 구성되어있으면 웹처럼 라우터를 만들어서 사용도 가능하다

기존

void main() {
  runApp(MaterialApp(
    theme: style.theme,
     home: MyApp()
  ));
}

라우터 사용

void main() {
  runApp(MaterialApp(
    theme: style.theme,
      initialRoute: "/",
      routes:{
        "/":(c) => Text("첫페이지"),
	      "/detail" : (c) => Text("둘째페이지"),
     },
     home: MyApp()
  ));
}

• MaterialApp 안에 routes: 라는 파라미터 넣고 { '/라우트이름' : 위젯뱉는함수 } 이런 식으로 route들을 넣으면 된다
• initialRoute는 맨 처음 앱 켰을 때 보여줄 route를 적어주면 끝
  • / 페이지로 접속하면 Text('첫페이지')
  • /detail 페이지로 접속하면 Text('둘째페이지')

하지만 앱은 브라워저 처럼 상단에 url을 넣는 방식이 아니다 보니 버튼이 눌러졌을 때, 이동하게 만들고 싶으면

Navigator.pushNamed(context, '/detail');

이런식으로 onPressed에 넣으면 해당 페이지를 덮어준다

Route에 파라미터를 입력하고 싶은 경우

MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        var arguments = settings.arguments;
        if (settings.name == '/detail') {
          return MaterialPageRoute(builder: (context) => 위젯(routeparam : arguments) );
        } else if (settings.name == '/') {
          return MaterialPageRoute(builder: (context) => Text('홈페이지') );
        } else {
          return null;
        }
      },
);

• /detail/1 로 이동하면 routeparam이라는 파라미터가 1로 변하고
• /detail/2 로 이동하면 routeparam이라는 파라미터가 2로 변합니다.
• 그리고 routeparam의 값은 위젯 안에서 등록하고 사용가능합니다.

but…

• 각각 다른 정보를 위젯 안으로 보내고 싶으면 굳이 라우터 + 파라미터 기능으로 구현할 필요는 없다
• state를 자식 위젯으로 보내도 ok
• 라우터를 본격적으로 쓴다면 VRouter 같은 패키지를 설치해서 쓰는게 훨씬 좋다
  • Vue, React 라우터처럼 직관적이고 깔끔한 문법으로 나눌 수 있다.