flutter navigator 을 활용한 화면 이동

Navigator 위젯은 Flutter에서 화면 간의 네비게이션을 관리하는 데 사용됩니다.

Flutter 앱은 일반적으로 여러 화면(Screen)으로 구성되며, 사용자가 다양한 화면 간을 이동할 수 있도록 Navigator를 사용합니다. Navigator는 스택(Stack) 자료구조를 사용하여 화면을 관리합니다.

새로운 화면을 푸시(Push)하고 이전 화면을 팝(Pop)하는 방식으로 작동합니다.

 

주요 메서드

 

1. push: 새로운 화면을 스택에 추가합니다.

2. pop: 현재 화면을 스택에서 제거합니다.

3. pushReplacement: 현재 화면을 새 화면으로 교체합니다.

4. pushAndRemoveUntil: 특정 조건에 따라 스택의 모든 화면을 제거하고 새로운 화면을 추가합니다.

5. popUntil: 특정 조건에 따라 스택의 화면을 제거합니다.

 

 

현재 페이지에서 새로만든 SecondView 라는 페이지로 이동을 원할 경우

body: Center(
  child: GestureDetector(
    onTap: () => Navigator.push(context, MaterialPageRoute(
        builder: (_) => SecondView())
    ),
    child: Container(
      padding: EdgeInsets.all(15),
      color: Colors.blue,
      child: Text("Get Started"),
    ),
  ),
)

이동하는 페이지에서는 다음과 같이 구현할 수 있습니다. 

뒤로가기 아이콘의 onPressed 에 pop() 이라는 메소드로 현재 위로 올라온 페이지를 제거하여 뒤로 가는 방법입니다. 

import 'package:flutter/material.dart';

class SecondView extends StatefulWidget {
  const SecondView({super.key});

  @override
  State<SecondView> createState() => _SecondViewState();
}

class _SecondViewState extends State<SecondView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () => Navigator.of(context).pop(),
          ),
          title: const Text("test title"),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(15),
            color: Colors.blue,
            child: Text("This is the second view"),
          ),
        )
    );
  }
}

 

 

 

다른 예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => FirstPage()),
            );
          },
          child: Text('Go Back to First Page'),
        ),
      ),
    );
  }
}

 

3. pushAndRemoveUntil

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(builder: (context) => ThirdPage()),
              (Route<dynamic> route) => false,
            );
          },
          child: Text('Go to Third Page and remove all previous pages'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

 

 

 

주요 포인트

 

• push: 새로운 화면을 스택에 추가합니다.

• pop: 현재 화면을 스택에서 제거합니다.

• pushReplacement: 현재 화면을 새 화면으로 교체하고, 이전 화면을 스택에서 제거합니다.

• pushAndRemoveUntil: 특정 조건에 따라 스택의 모든 화면을 제거하고 새로운 화면을 추가합니다.

• popUntil: 특정 조건에 따라 스택의 화면을 제거합니다.

 

추가 메서드

 

• canPop: 현재 화면이 스택에서 팝될 수 있는지 확인합니다.

• maybePop: 팝될 수 있는 경우 화면을 팝합니다.

• popAndPushNamed: 현재 화면을 팝하고 새로운 화면을 이름으로 푸시합니다.

• pushNamed: 이름으로 새로운 화면을 푸시합니다.

 

Navigator 문서

 

• Navigator 클래스 문서

• MaterialPageRoute 클래스 문서