[Flutter] 플러터 페이지/라우트(route) 만들기 및 라우트 간 이동 방법

플러터에서 페이지 UI 개념은 라우트(route)로 정의하고 있다. 라우트 생성과 이동은 사용자 동작 시나리오와 관련이 있어 매우 중요하다. 라우트(route)는 안드로이드 네이티브 코드의 액티비티(Activity)와 iOS 네이티브 코드의 뷰컨트롤러(ViewController)와 대응되는 개념이다. 라우트의 기본 구성과 동작 원리에 대해서 알아보자.

1. 개념 및 주의사항

플러터에서는 페이지(Page UI) 개념을 “라우트(route)”라는 용어로 정의하고 있다. (안드로이드 네이티브의 “액티비티(Activity)”와 iOS 네이티브의 “뷰컨트롤러(ViewController)” 개념과 같다.)

route explanation example wireframe

사용자에게는 페이지(Page) 개념으로 익숙한 위와 같은 예시 화면이 route 단위로 보면 되며, 대화상자(Dialog) 등은 route 개념으로 볼 수 없다. route 내에는 Appbar나 기타 페이지를 구성하는 요소들이 하위 위젯(widget)으로 포함될 수 있다.

라우트(route)의 특징으로는 UI 상으로 뒤로가기 아이콘이 자동으로 생성된다. (위 그림의 item 2) 뒤로가기 아이콘은 휴대폰의 back키와 상호작용하도록 자동설정된다. 위의 Page1에서 뒤로가기 버튼이 없는 이유는 Page1이 홈화면으로 지정되기 때문에 뒤로가기 아이콘이 생성되지 않는다.

라우트(route) 간의 제어 방식은 기본적으로 move와 close의 동작으로 정의된다. 다시 말해, 위의 Page 1에서 Page 2를 호출하는 방식은 페이지 이동(move)을 의미하며, 호출된 페이지(Page 2)에서 호출한 페이지(Page 1)로의 이동은 페이지 2의 닫기(close) 동작이 기본이다. 이 동작 구성에 따라 사용자 시나리오 및 개발이 이루어져야 함을 의미한다.

물론 강제로 Page 1에서 이동(move)을 한 후, 호출된 페이지(Page 2)에서 호출한 페이지(Page 1)로 다시 이동(move) 명령을 코드상으로 구현할 수는 있다. 단, 이 경우 호출한 페이지(Page 1)에도 뒤로가기 버튼이 자동생성되며 원할한 동작 시나리오 구성이 불가능하기 때문에 호출된 페이지에서 호출한 페이지로의 이동(move) 명령 코드를 사용하지 않음에 유의해야 한다.

이는 페이지 간 이동(move)을 이전 이후 단계를 구성하여 자유롭게 이동(move)을 하고자 할 경우에는 route가 아니라 다른 컴포넌트(예: stepper)를 이용하거나 반드시 호출할 페이지로 이동(move) 호출된 페이지로는 회귀할 시에는 닫기(close)를 통해서 동작하도록 설계가 되어야 한다.

아래 코드 중 Navigator.push()는 이동(move) 동작을 위한 코드부이며, 닫기(close) 동작을 위한 코드부는 Navigator.pop()으로 구성된다.

다시 말하지만 아래 코드에서 navigator.pop() 코드부를 navigator.push()로 대체해도 빌드상 문제는 없으나 동작 시나리오 상에 치명적인 문제가 발생할 수 있음에 따라 호출한 페이지로 다시 이동(move)하는 코드 구성을 해서는 안 된다.

route function usage examples

2. 예시 코드

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter route test',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: FirstRoute(),
    );
  }
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First route page"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Go to the second route page"),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => SecondRoute()));
          },
        ),
      ),
    );
  }
}


class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second route page"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Close the second route page"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

/*
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second route page"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Go to the first route page"),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => FirstRoute()));
          },
        ),
      ),
    );
  }
}
*/