[Flutter] 화면 전환 push, 스택에서 삭제(pushReplacement(Named), push(Named)AndRemoveUntil)

기본적인 NamedRoute는 

 

https://accompani-i.tistory.com/329

[Flutter] 화면 전환, 데이터 전달3 (Named Route)

 

위 링크에서 학습하고,

 

 

HomeScreen-RouteOneScreen-RouteTwoScreen-RouteThreeScreen으로 쌓인 스택을 부분적으로 또는 기존의 것을 삭제하고 push하는 법을 알아보자

 

 

---

오늘 배울 것은

 

 

 

1. pushReplacement

2. pushReplacementNamed

3. pushAndRemoveUntil

4. pushNamedAndRemoveUntil

 

 

간단하게 먼저 얘기하자면

1,2는 다음 화면을 Push하고 넘어온 화면을 제거(말 그대로 교체)

3,4는 다음화면 Push하고 조건에 맞게 스택을 제거

---

1. pushReplacement

 

 

pushReplacement = push와 같은 역할이지만, 현재의 Route를 스택에서 지우고 푸시한다
현재 HomeScreen-RouteOne-RouteTwo-RouteThree로 스택이 쌓였다면

pushReplacement는 RouteTwo에서 RouteThree로 push한 후에 RouteTwo를 지우고 스택을 쌓는다

결국 최종적으로는

HomeScreen-RouteOne-RouteThree로 스택이 쌓인다

 

 

class RouteTwoScreen extends StatelessWidget {
  const RouteTwoScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final arguments = ModalRoute.of(context)!.settings.arguments;
    return MainLayout(
      title: 'Route Two',
      children: [
        Text(
          'arguments: ${arguments}',
        textAlign: TextAlign.center,
        ),

        ElevatedButton(
            onPressed: (){
             	 Navigator.of(context).pushReplacement(
             	 MaterialPageRoute(builder: (_) => RouteThreeScreen(),),
              		 );
           		 },
            child: Text('Push Replacement'),
 		],
    );
  }
}

 

---

 

 

2. pushReplacementNamed

 

Named는 기능적으로는 pushReplacement와 동일하다

(현재 HomeScreen-RouteOne-RouteTwo-RouteThree로 스택이 쌓였다면

pushReplacement는 RouteTwo에서 RouteThree로 push한 후에 RouteTwo를 지우고 스택을 쌓는다

결국 최종적으로는

HomeScreen-RouteOne-RouteThree로 스택이 쌓인다)

 

차이점은 MaterialPageRoute를 안써도 되고

NamedRoute에서 설정한 key값이 들어간다는 것

 

class RouteTwoScreen extends StatelessWidget {
  const RouteTwoScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final arguments = ModalRoute.of(context)!.settings.arguments;
    return MainLayout(
      title: 'Route Two',
      children: [
        Text(
          'arguments: ${arguments}',
        textAlign: TextAlign.center,
        ),
        ElevatedButton(
            onPressed: (){
              Navigator.of(context).pushReplacementNamed(
                '/three',
              );
            },
            child: Text('Push Replacement'),
        ),
        ],
    );
  }
}

 

 

 

 

---

3. pushAndRemoveUntil

 

pushAndRemoveUntil은 파라미터가 2개 들어간다

(1) MaterialPageRoute

(2) (route) => false or true or 조건

 

(1)은 위에서도 기본적으로 들어가는 파라미터이기 때문에 생략하고

 

 

(2)에대해 자세하게 보자

 

(route) => false or true

- navigation stack에 쌓인 모든 route를 false면 route값을 모두 지우고, true면 살린다.

 

 조건

(route) => route.settings.name == '/'

- 위의 조건이 true이면 조건에 만족하는 route만 살리고 남은 route 다 삭제 (여기서는 '/'인 HomeScreen)만 살림

 

 

class RouteTwoScreen extends StatelessWidget {
  const RouteTwoScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final arguments = ModalRoute.of(context)!.settings.arguments;
    return MainLayout(
      title: 'Route Two',
      children: [
        Text(
          'arguments: ${arguments}',
        textAlign: TextAlign.center,
        ),
      
        ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute( 
                   builder: (_) => RouteThreeScreen()
               ),
                   (route) => route.settings.name == '/',
            },
            child: Text('Push And Remove Until')
        ),
    ],
    );
  }
}

 

 

4. pushNamedAndRemoveUntil

 

기능은 pushAndRemoveUntil과 동일하다

 

(route) => false or true

- navigation stack에 쌓인 모든 route를 false면 route값을 모두 지우고, true면 살린다.

 조건

(route) => route.settings.name == '/'

- 위의 조건이 true이면 조건에 만족하는 route만 살리고 남은 route 다 삭제 (여기서는 '/'인 HomeScreen)만 살림)

 

 

차이점은 MaterialPageRoute 파라미터가 사라지고

Named Route를 불러주되

마찬가지로 조건이 있으면 설정해 주면 된다

 

 

class RouteTwoScreen extends StatelessWidget {
  const RouteTwoScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final arguments = ModalRoute.of(context)!.settings.arguments;
    return MainLayout(
      title: 'Route Two',
      children: [
        Text(
          'arguments: ${arguments}',
        textAlign: TextAlign.center,
        ),
      
        ElevatedButton(
            onPressed: () {
                Navigator.of(context).pushNamedAndRemoveUntil(
                    '/three',
                        (route) => route.settings.name == '/',
              );
            },
            child: Text('Push And Remove Until')
        ),
    ],
    );
  }
}