Route, Navigation 사용

Flutter에서는 route와 navigation을 통해 페이지를 이동할 수 있다. 만약에 Flutter를 통해 Web까지 한 번에 개발할 것이라고 한다면 route를 적극적으로 사용해야 한다. React와 Vue에서 사용하는 rotue를 생각하면 된다.

https://velog.io/@jong/Flutter-새로운-프로젝트 만들기의 코드에서 이어서 시작된다.

페이지를 넘어기 위한 버튼 만들기

사용자가 페이지를 넘어갈 수 있도록 해당 기능을 하는 버튼을 만든다. 이 버튼은 앞으로도 계속 가져다 쓸 것이기 때문에 components 디렉터리를 생성하고 버튼을 생성한다.

전체 파일

전체적인 프로젝트 디렉터리와 파일들이 이렇게 구성된다.

route를 사용해 이동할 버튼

go_to_route_button.dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class GoToRouteButton extends StatelessWidget {
  const GoToRouteButton(
      {super.key, required this.text, required this.routeName});

  final String text;
  final String routeName;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(30),
      child: ElevatedButton(
        child: Text(text),
        onPressed: () {
          Navigator.of(context).pushNamed(routeName);
          debugPrint('Open Route \'$routeName\'');
        },
      ),
    );
  }
}

이번에 사용하는 버튼 위젯들은 props를 받는다. 버튼에 표시할 텍스트를 String 타입의 text를, route의 주소를 String 타입의 routeName를 받아온다.

props를 사용할 때에는 키값을 추가하면 된다. (맞는 표현인지 모르겠지만..)
required this.[변수 이름]
그리고 밑에 해당 변수를 선언해 주면 된다. final String text;

그리고 ElevatedButton widget을 사용해서 사용자가 누를 버튼을 만들 것인데, 그 위에 Container로 감싸준다. 그리고 margin을 지정해 준다.

그리고 사용자가 누른다는 것을 콘솔에 표시해 주기 위해 debugPrint('Open Route \'$routeName\'');를 추가한다.

navigation를 사용해 이동할 버튼

이번에 만드는 버튼은 route 주소를 가지고 화면을 이동하는 것이 아닌 navigation을 통해 이동한다. 이렇게 될 경우 크롬의 주소 창에는 마지막으로 이동한 route 주소가 표시된다.

사진을 보면 링크가 localhost:57448/#/route_navigation_ex로 표시된다. 이는 메인 화면에서 /route_navigation_ex로 이동한 다음, navigation 기능을 통해 다른 페이지로 이동한 것이다. 나중에 url을 통해 바로 이동할 수 없도록 페이지를 구성해야 할 때 유용하게 사용할 듯하다.

nav_show_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class GoToNavButton extends StatelessWidget {
  const GoToNavButton(
      {super.key, required this.text, required this.screenWidget});

  /// 버튼에 표시될 텍스트
  final String text;

  /// 이동할 스크린 단위의 위젯
  final dynamic screenWidget;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(30),
      child: ElevatedButton(
        child: Text(text),
        onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => screenWidget));

          debugPrint('Open Navigator.push \'${screenWidget.toString()}\'');
        },
      ),
    );
  }
}

해당 widget에서는 route 주소가 아닌 screen widget을 받는다. 받은 widget을 Navigator.push() 메서드에 넣어준다.

   Navigator.push(
              context, MaterialPageRoute(builder: (context) => screenWidget));

새로운 Screen 만들기

우선 메인 화면에서 네비게이션 예제 화면으로 넘어갈 수 있도록 새로운 screen 화면을 만들었다.

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_ex/components/go_to_nav_button.dart';
import 'package:flutter_ex/screen/ex/navigation/nav_show_screen.dart';

class NavigationExScreen extends StatelessWidget {
  const NavigationExScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Navigation ex'),
      ),
      body: ListView(
        children: const [
          SizedBox(
            height: 10,
          ),
          Center(
            child: Text('Route 기능을 사용하여 현재 페이지에 도착하였습니다.'),
          ),
          GoToNavButton(
              text: 'Navigation 통해 다른 페이지로 이동', screenWidget: NavShowScreen()),
        ],
      ),
    );
  }
}

이 예제 화면에 들어오면 navigation의 기능을 사용해 다른 페이지로 갈 수 있는 버튼까지 추가하였다.

route 추가

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_ex/screen/ex/navigation/navigation_ex_screen.dart';
import 'package:flutter_ex/screen/main_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter ex",
      initialRoute: '/index',
      routes: {
        '/index': (context) => const Home(),
        '/route_navigation_ex': (context) => const NavigationExScreen(),
      },
      home: const Home(),
    );
  }
}

여기서 주의할 점이 있다. home이 null이거나 /를 사용하면 안 된다. 때문에 필자는 기본 라우터의 주소를 /index로 지정했다.
이미 initialRoute를 지정했기 때문에 home:을 지워줘도 상관없다.

새로 작성한 screen을 route에 등록했으니 메인 화면에서도 /route_navigation_ex로 넘어가는 버튼을 추가한다.

main 화면에 버튼 추가하기

body: ListView(children: const [
        GoToRouteButton(
          text: 'Route & Navigation',
          routeName: '/route_navigation_ex',
        )
      ]),

이렇게 버튼을 누르면 route 기능을 통해 다음 화면으로 넘어간다.

소스 코드

관련 좋은 내용
https://medium.com/@icelancer/flutter-navigator-2-named-routes-15963c9e3135