[Flutter] Named Route 적용

이전 게시물에서 Navigator을 이용한 페이지 이동에 대해 알아 보았는데, 거기에 내용을 조금 더해서 Named route를 적용하는 방법을 알아보자.

이전게시물 보기 ([Flutter] 페이지 이동하기 - Navigator)

1. routes 작성

이전 게시물에서 사용했던 코드들을 예시로 routes를 아래와 같이 작성할 수 있다. 각 화면을 호출할 key 값을 지정한다고 생각하면 된다.

initialRoute는 최초에 보일 화면을 설정하는 옵션으로 변수를 하나 생성해서 초기 화면이 될 키 값을 담아 설정했다.

//main.dart
import 'package:flutter/material.dart';
import 'package:navigation/screen/home.dart';
import 'package:navigation/screen/route_one.dart';
import 'package:navigation/screen/route_two.dart';

const INIT_PAGE = '/';

void main() {
  runApp(MaterialApp(
    initialRoute: INIT_PAGE,
    routes: {
      '/': (context) => Home(),
      'one': (context) => RouteOne(),
      'two': (context) => RouteTwo(),
    },
  ));
}

2. 설정한 key 값으로 화면 이동하기

이전 게시물에서 페이지 이동을 위해 push(), pop()을 사용하며 옵션을 함께 알아봤다. routes에 설정한 키 값을 활용할 수 있는 옵션을 통해 지난번 사용한 코드를 변경해 보자.

지난 번과 같은 코드에서 Navigator.of(context).pushNamed(‘two’)로 변경을 한 코드이다. 기존에 사용했던 push는 넘어갈 페이지를 MaterialPageRoute를 통해 지정해줬다면, pushNamed를 사용하면 main.dart에 정의해둔 키 값을 사용하여 이동할 페이지를 간단히 지정할 수 있다.

//route one
class RouteOne extends StatelessWidget {
  const RouteOne({super.key});

  @override
  Widget build(BuildContext context) {
    return CommonLayout(
      title: 'Route One', 
      children: [
        ElevatedButton(
          onPressed: () {
            <!-- Navigator.of(context).push(
              MaterialPageRoute(
                builder: (_) => RouteTwo(),
              ),
            ); -->
            
            Navigator.of(context).pushNamed('two');
          },
          child: Text('Push Named'),
        ),
      ],
    );
  }
}

• pushAndRemoveUntil의 기능

지난 게시물에서 얘기했던 Route를 적용하면 pushAndRemoveUntil가 어떻게 동작하는지 알아보자.

push와 마찬가지로 pushAndRemoveUntil에서 pushNamedAndRemoveUntil로 변경하고 다음 페이지의 키 값을 설정한다. 그리고 (route) => true or false 를 route.settings.name 으로 변경하고 설정할 키 값을 입력한다.

이렇게 되면 routes의 이름이 ‘/’이 나올 때 까지 쌓여있던 화면 스택이 삭제가 되면서 설정한 화면이 호출된다. 3개의 페이지로 예를 들었지만 RouteThree, RouteFour 화면까지 있다고 가정하고 Three -> Four 페이지로 넘어갈 때 route.settings.name == ‘/’으로 설정했다면 전체 스택인 [Home, RouteOne, RouteTwo, RouteThree, RouteFour]에서 [Home, RouteFour]만 남게된다.

 //route one
ElevatedButton(
  onPressed: () {
      // [Home, RouteOne, RouteTwo]
      // 지정한 키 값이 나올 때 까지 모든 화면 스택 삭제
      Navigator.of(context).pushNamedAndRemoveUntil(
          'two',
          (route) => route.settings.name == '/',
      );
  },
  child: Text('Push And Remove Until'),
)