Navigator는 항해,조종사라는 뜻으로 가야할 길을 알려주는 의미를 내포한다. Flutter에서 이 widget은 Page나 Screen간의 이동을 할 수 있는 아주 중요하고 유용한 Widget 중 하나이다.

Navigator
Navigator Widget은 크게 Navigator.push와 Navigator.pop으로 나눌 수 있다. Navigator.push는 stack 맨 위에 Screen을 추가 하는 것을 의미한다. 즉, 보여지는 화면에서 다음 화면을 전환되어 보여진다.
Navigator.pop은 stack 맨 위의 Screen을 제거하는 것을 의미한다. 즉, 마지막 방문한 Screen을 제거한다.

01. page나 Screen간의 이동 구현

# Navigator.push

우리가 앱을 만들 때 가장 많이 쓰이는 코드 중 하나로 onPressed: () {here}와 함께 적용을 하여 Button을 누르면 다른 Page나 Screen으로 넘어갈 수 있게 해주며 appbar에 "<-" icon을 줘서 이전 Page로 돌아올 수 있게 구현이 가능하다. 다음과 같이 간단하게 구현하여 적용시킬 수 있다.

Navigator.push(
	context,
    PageRouteBuilder(
        transitionDuration:
            Duration(microseconds: 1),
        transitionsBuilder:
            (BuildContext context,
                Animation<double> animation,
                Animation<double> secAnimation,
                Widget child) {
        animation = CurvedAnimation(
            parent: animation,
            curve: Curves.decelerate);

        return ScaleTransition(
          alignment: Alignment.center,
          scale: animation,
          child: child,
        );
      },
      pageBuilder: (BuildContext context,
          Animation<double> animation,
          Animation<double> secAnimation) {
        return NextPage();
      }));

02. 첫 로딩 화면 구현

# Navigator.pushReplacement

화면의 로딩 화면 구현은 가장 오래 고민하고 찾은 방법인데 생각보다 간단하고 신기해서 기분 좋은 인상을 심겨준 widget 중 하나이다.
Navigator을 쓰고자 하였을 때도 '이전으로 되돌아가기(<-)' 버튼이 main 화면에 생겨 여러 방법을 적용해보고 찾아냈다.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:mother/home_page.dart';

class LodingScreen extends StatefulWidget {
  @override
  _LodingScreenState createState() => _LodingScreenState();
}

class _LodingScreenState extends State<LodingScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
      Duration(seconds: 4),
      () => Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomePage()),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(242, 153, 121, 1),
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(
          child:
              SizedBox(width: 300, child: Image.asset('images/main_logo.png')),
        ),
      ),
    );
  }
}