[Flutter] Named Routing을 이용한 Navigation (pushedName / pop / WillPopScope)

해당 링크 내용을 토대로 공부 , 정리했습니다.

www.filledstacks.com/post/flutter-navigation-cheatsheet-a-guide-to-named-routing/

Flutter Navigation Cheatsheet - A Guide to Named Routing

---

 

- route name 정의

 

routing_constants.dart

const String HomeViewRoute = '/';
const String LoginViewRoute = 'login';

route name을 정의한다. 

 

 

- router 설정 

 

1) 

import 'package:named_routing/router.dart' as router;
...
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routing',
      onGenerateRoute: router.generateRoute
      initialRoute: HomeViewRoute,
    );
  }
}

MaterialApp widget은 name router를 설정하기 위해 onGenerateRoute property를 제공하는데

RouteSettings를 파라미터로 받고 Route<dynamic>를 리턴한다.

class type을 사용해선 안된다.

 

2) 정의 되어 있지 않은 route에 대한 설정 

return MaterialApp(
  title: 'Named Routing',
  onGenerateRoute: router.generateRoute,
  onUnknownRoute: (settings) => MaterialPageRoute(
      builder: (context) => UndefinedView(
            name: settings.name,
          )),
  initialRoute: HomeViewRoute,
);

MaterialApp property onUnknownRoute에서 설정한다. 

 

 

- route name 별 route 정의

 

1) parameter가 없을 경우 

 

router.dart

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case HomeViewRoute:
      return MaterialPageRoute(builder: (context) => HomeView());
    case LoginViewRoute:
      return MaterialPageRoute(builder: (context) => LoginView());
    default:
      return MaterialPageRoute(builder: (context) => HomeView());
  }
}

switch를 이용하여 generateRoute를 업데이트 한다. 

 

2) parameter가 있을 경우 

switch (settings.name) {
  ...
 case LoginViewRoute:
      var loginArgument = settings.arguments;
      return MaterialPageRoute(builder: (context) => LoginView(argument: loginArgument));
}

route setting에서 입력된 arguments라는 parameter는 LoginView의 argument parameter로 전송된다. 

 

3) 정의 되어 있지 않은 route에 대한 설정 

switch (settings.name) {
  ...
  default:
    return MaterialPageRoute(builder: (context) => UndefinedView());
}

router.dart에서 정의되지 않은 router로 이동하길 요청된다면

default를 사용해서 UndefinedView class로 이동하도록 설정했다.

MaterialApp property onUnknownRoute에서 설정하는 것과 같다. 

 

- navigation 사용

 

1) 지정된 route name으로 이동 

Navigator.pushNamed(context, LoginViewRoute);

LoginViewRoute= 'login' 경로에 맞는 LoginView로 이동 

 

2) 지정된 route name으로 parameter와 함께 이동 

Navigator.pushNamed(context, LoginViewRoute, arguments: 'Data Passed in');

LoginView에 arguments parameter를 함께 전송한다. 

 

3) 이 전의 경로로 돌아가기

Navigator.pop(context);

 

4) 이 전의 경로로 parameter와 함께 돌아가기 

Navigator.pop(context, 'fromLogin');

// Navigate to LoginView and wait for a result to come back
var result = await Navigator.pushNamed(context, LoginViewRoute);

// If the result matches show a dialog
if (result == 'fromLogin') {
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
          title: Text('From Login'),
        ));
}

LoginViewRoute로 이동한 후에 pop 했을 때의 return 값인 'fromLogin'을 기다린다. 

 

 

- back button을 막고 싶은 경우 

 

Scaffold를 WillPopScope로 감싸거나 Scaffold 내 body를 감싼다. 

단, 앱 전체를 감싸지 말 것 

@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () => Future.value(false),
    child: Scaffold(
      ...
    ),
  );
}

onWillPop는 뒤로가기 버튼을 눌렀을 때의 액션을 정의한다. 

false는 시스템에게 pop을 할 필요가 없다고 말한다. 

 

WillPopScope(
  onWillPop: () async {
      Navigator.pop(context, 'fromLogin');
      return false;
    },
    ...
);

false를 리턴하기 전에 pop한다.