[Flutter] Navigator

들어가며

Navigator 클래스란?

• Navigator는 앱의 다양한 화면 간 전환을 관리하는데 사용되는 클래스
• Navigator는 스택 구조로 이루어져 있으며, 각 화면은 스택에 푸시되거나 팝할 수 있다.

Navigator 함수

• push: 새로운 화면을 스택에 푸시.
• pop: 현재 화면을 스택에서 팝하여 이전 화면으로 복귀.
• pushReplacement: 현재 화면을 스택에서 팝하고 새로운 화면을 푸시하여 교체.
• popUntil: 지정된 조건을 만족할 때까지 스택에서 화면을 팝.

 

예제 - routes로 미리 지정된 경로의 화면으로 push하는 방식

main.dart

import 'package:flutter/material.dart';

import 'FirstPage.dart';
import 'SecondPage.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator Example',
      initialRoute: '/first',
      routes: {
        '/first': (context) => const FirstPage(),
        '/second': (context) => const SecondPage(),
      },
    );
  }
}

FirstPage.dart

경로 : ~/lib/FirstPage.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go to the Second Page'),
          onPressed: () async {
            final result =
                await Navigator.pushNamed(context, '/second', arguments: 'Hi')
                    as String?;

            debugPrint(result);
          },
        ),
      ),
    );
  }
}

SecondPage.dart

경로 : ~/lib/SecondPage.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final String? message =
        ModalRoute.of(context)?.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message ?? ''),
            ElevatedButton(
              child: const Text('Pop this page'),
              onPressed: () {
                Navigator.pop(context, 'bye');
              },
            ),
          ],
        ),
      ),
    );
  }
}

화면

Go to the Second Page 클릭시 오른쪽 화면으로 이동	Pop this page 버튼 클릭시 이전 화면으로 이동

예제 - builder로 화면 객체 생성 후 push하는 방식

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/FirstPage.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Navigator Example',
      home: FirstPage(),
    );
  }
}

FirstPage.dart

경로 : ~/lib/FirstPage.dart

import 'package:flutter/material.dart';

import 'SecondPage.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go to the Second Page'),
          onPressed: () async {
            final result = await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => const SecondPage(message: 'Hi'),
                ));

            debugPrint(result);
          },
        ),
      ),
    );
  }
}

SecondPage.dart

경로 : ~/lib/SecondPage.dart

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  final String message;

  const SecondPage({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message),
            ElevatedButton(
              child: const Text('Pop this page'),
              onPressed: () {
                Navigator.pop(context, 'bye');
              },
            ),
          ],
        ),
      ),
    );
  }
}

화면

• 위와 동일