[Flutter] Navigator와 routes

이번 포스팅에서는 Flutter에서 Navigator를 사용해보겠습니다.

 

먼저 Flutter 에서 Navigator의 역할은

 

Navigator

docs.Flutter.dev 페이지에서는 Navigator에 대해

다양한 유형의 정보를 표시하기 위해 앱에는 여러 화면이 있는데 이때 화면 전환 역할을 돕는데 사용됩니다.

 

routes

Flutter에서 routes는 화면과 페이지입니다.

 

Navigator 메서드 종류

• push
• pop
• replace

Navigator 메서드는 위 세가지가 있습니다.

 

Named가 붙어있는 메서드를 사용하기 위한 사전셋팅

Named가 붙어있는 메서드를 사용하기 위해서는 

MaterialApp 안에 routes 속성에 이동할 화면의 경로를 선언해줘야 합니다.

 

저는 webView.dart로 이동할거니까 아래처럼 선언했습니다.

이동할 화면 본수가 많으면 콤마로 구분하여 쭉 써내려가심 됩니다.

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      home: Main(),
      routes: <String, WidgetBuilder>{
        '/webView': (BuildContext context) => WebViewPage()
      },
    );
  }
}

 

 

 

 

push Method

push 는 현재 화면 위에 새 화면을 불러옵니다.

 

push, pushNamed, pushAndRemoveUntil 가 있는데

push

@override
void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => WebViewPage()));
  });
}

pushNamed

@override
void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.of(context).pushNamed('/webView');
  });
}

push 와 pushNamed는 기존 페이지 위에 새 화면을 스택처럼 쌓고

 

pushAndRemoveUntil

void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) =>
        WebViewPage()), (Route<dynamic> route) => false);
  });
}

pushAndRemoveUntil는 이전 페이지를 모두 제거하고 새 화면을 불러옵니다.

 

pop Method

pop은 현재 페이지를 날려버리는건데요. 조금씩 다른 방식으로 동작하는 pop들이 있습니다.

pop, canPop, popAndPushNamed 가 있습니다.

 

pop

void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.of(context).pop();
  });
}

pop은 현재 페이지를 닫고 

더이상 닫을 페이지가 없는데 pop 메서드가 호출된다면 블랙 스크린이 표시됩니다.

 

canPop

void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    if (Navigator.canPop(context)) {
      Navigator.of(context).pop();
    } else {
      print('페이지 없음');
    }
  });
}

 

canPop은 날릴 페이지가 있는지 없는지 확인합니다. true , falsea로 return 합니다.

 

popAndPushNamed 은 현재 페이지를 날리고 불러올 페이지를 띄웁니다.

 

replace Method

pushReplacement와 pushReplacementNamed가 있는데

 

pushReplacement

void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => WebViewPage()));
  });
}

pushReplacement는 현재 화면을 날리고 새 화면을 띄웁니다.

 

pushReplacementNamed

void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.of(context).pushReplacementNamed('/test');
  });
}

pushReplacementNamed는 현재 화면을 불러올 화면으로 대체합니다. 

 

흠 제가 불러올 화면이랑 새 화면이라고 쓰는데 같은 말이에여

불러오고싶은 화면이면서 새로운 화면,,,  

 

오늘 Navigator와 routes 를 알아보았는데 

느낀 점은 메서드 명들이 직관적이라 너무 좋네요!