Flutter - Navigator.push, 화면 이동, 페이지 이동

안녕하세요 독학코딩입니다. 오늘은 Flutter 앱 개발이든 어떤 앱 개발이든 필수적으로 사용할 수밖에 없는 페이지간의 Navigation에 대해서 배워보겠습니다. 한글로는 왔다 갔다 이동이라고 적어놨는데 딱 맞는 표현을 잘 모르겠네요 ㅎㅎ

 

Flutter에서 화면, 페이지, 뷰 등을 route 라고 표현하기 때문에 저도 용어를 통일하도록 하겠습니다. 일단 화면 간의 이동을 연습하려면 화면을 2개 이상 만들어야겠죠? 그리고 각 화면으로 넘어가기 위한 기능을 넣을 버튼을 각각 만들어 보겠습니다. 

 

Flutter 화면생성

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FirstRoute(),
    );
  }
}

일단 위의 기본 메인 MyApp을 작성하고 home으로 FirstRoute()로 설정하겠습니다.

 

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("Go to Second"),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

FirstRoute()는 위와 같습니다. 아주 간단한 route입니다. 

위의 코드까지 main.dart에 작성하시고 코드를 실행하신다면 위와 같은 화면이 나올 것입니다. 혹시 AVD로 코드 실행을 하실 줄 모르신다면 Device Manager에서 AVD를 실행시켜 주시고 아래의 사진과 같이 Chrome(web)을 실행한 AVD로 바꾸시고 코드 실행해주시면 됩니다. 

 

Go to Second 버튼을 눌러도 아무런 변화가 없을 것입니다. 이유는 버튼을 눌렀을 때 어떤 행동을 할지 작성하지 않아서 그렇습니다.

// ElevatedButton에서 아래 부분을 찾아
onPressed: () {
},

// 이렇게 수정해주세요
onPressed: () {
  Navigator.push(context, MaterialPageRoute(builder: (context) => const SecondRoute()),);
},

onPressed()는 해당 위젯이 눌렸을 때 트리거 되는 기능입니다. 이 외에 onLongPress, onHover 등 여러 가지 트리거가 있는데 각각의 위젯에서 사용될 때 설명해드리겠습니다. 

 

onPressed() 안에 작성된 아래 코드는 오늘 수업의 하이라이트입니다.

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

route에서 route를 이동하는 여러 가지 방법 중에 하나입니다. SecondRoute() 부분이 이동할 route입니다. 여기까지 작성하셨다면 오류 안내가 나올 겁니다. 당연하겠죠? 우린 아직 SecondRoute를 만들지 않았으니깐요. 

 

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const FirstRoute()),
            );
          },
          child: const Text("Go to First"),
        ),
      ),
    );
  }
}

이번에는 페이지 이동만 할 거니 FirstRouter()랑 다를 건 없습니다. 위까지 작성하시고 이제 테스트해보시면 페이지가 정상적으로 왔다 갔다 이동이 되실 겁니다. 그런데 눈치가 날카로우신 분이라면 이상한 점을 발견하셨을 수도 있습니다.

 

파란색 버튼을 몇 번 누르다 보면 FirstRoute()에 처음에는 없던 뒤로 가기 화살표 아이콘이 생성되는 것입니다. 이건

Navigator.push

자체가 새롭게 route를 켜는 것이지 기존의 route를 왔다 갔다 하는 기능은 아니기 때문입니다. 즉, 파란색 버튼을 누를 때마다 계속 새롭게 route가 켜지는 것입니다. 이 부분에 대해서 잘 염두에 두시고 페이지 이동에 대한 심도 있는 포스트는 나중에 다루겠습니다.