플러터(Flutter) 내비게이션 | 기본 라우팅(화면 전환) 방법 | 1. Navigator push & pop 함수

 

플러터(Flutter) 여러 화면간 전환(라우팅)

플러터(Flutter)에서는 화면 전환을 위해 라우트(Route)와 내비게이터(Navigator)를 사용합니다.

라우트(Route)는 화면을 지칭하는 객체입니다. 화면을 구성하는 다양한 정보를 라우트(Route) 객체에 설정하여 화면을 표현합니다. 그리고 내비게이터(Navigator) 위젯은 라우트(Route) 객체로 화면을 전환해 주며 전환되면서 생성된 라우트(Route)들을 스택 구조로 관리하여 이전 화면으로 되돌아가거나 하는 기능을 제공합니다.

 

이번 글에서는 가장 기본적인 화면간 전환(라우팅) 방법인 내비게이터(Navigator)의 push와 pop 함수에 대해 기록해 보겠습니다.

내비게이터(Navigator) push & pop 예제 코드

아래 예제 코드와 같이 HomeScreen에서 'Go Next Screen' 버튼을 누를 때 TestNavigator 화면으로 전환하고 싶다면 Navigator.push() 함수를 호출합니다.

 

home_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_and_dart_ch04/screen/test_navigator.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text('Home Screen'),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => TestNavigator()),
              );
            },
            child: Text('Go Next Screen'),
          ),
        ],
      ),
    );
  }
}

 

Navigator.push() 함수의 두 번째 매개변수가 전환할 화면을 지칭하는 라우트 객채입니다.

라우트 객체는 추상형으로 직접 구현하거나 머티리얼 디자인에서 제공하는 애니메이션 기능 등이 포함된 MaterialPageRoute를 이용합니다. 라우트 객체의 builder 함수에서 전환할 화면의 위젯 객체를 생성해 return 해 주면 됩니다.

 

Navigator.push() 함수는 두 번째 매개변수의 라우트 객체를 Navigator가 관리하는 스택에 추가해 줌으로써 핸드폰의 뒤로 가기 버튼을 누르면 스택에 push 되어 있던 이 전 화면으로 되돌릴 수 있습니다. 코드에서 이 전 화면으로 되돌아 가기 위해서는 스택에서 꺼내는 개념의 함수인 Navigator.pop() 함수를 사용하면 됩니다.

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_and_dart_ch04/screen/home_screen.dart';

void main() {
  runApp(MaterialApp(home: HomeScreen()));
}

 

---

참고

2025.06.05 - [분류 전체보기] - 플러터(Flutter) 라이브러리 만드는 방법

플러터(Flutter) 라이브러리 만드는 방법

https://totheeden.ddnsgeek.com/flutter-exercise-example-cupertino-widget-cupertinodatepicker-dialog-statefulwidget/

Flutter | Exercise Example | Cupertino Widget, CupertinoDatePicker, Dialog, StatefulWidget - 삶