[플러터] Navigator 에 대해 ( 화면 전환 )

Navigator 는 화면을 전환하기 위한 스택 개념으로 생각하면 됩니다. 안드로이드의 경우 Intent를 통해 넘겨주거나 그나마 최근에 생긴 Navigator 기능을 통해 넘겨주는데 안드로이드 navigator와 비슷합니다.

여기서 스택 개념이라고 표현한 이유로는 Navigator에 push, pop를 통해 화면 이동을 조정하기 때문입니다.

<전체 코드>

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("첫 페이지"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('다음 Page'),
          onPressed: (){
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context)=>SecondPage()),
            );
          },
        ),
      )
  ,
    );
  }
}

class SecondPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("2번 페이지"),
      ),
      body: Center(
          child : RaisedButton(
            child: Text('이전 Page'),
            onPressed: (){
              Navigator.pop(context);
            },
          )
      ),
    );
  }
}

 ㅁ맨 처음 앱이 시작되는 MyApp이 있고 First, Second page 클래스가 있습니다.

첫 페이지의 가운데에 버튼을 만들고 해당 버튼에 onPressed() 이벤트에 Navigator.push ()를 선언합니다. 

Navigator에 push 하면 해당 페이지로 넘어가는 거고 pop 를 하기 되면 이전 페이지로 돌아오게 됩니다. 

플러터 공홈에서는 스크린이나 페이지를 Routes ( 경로 ) 라고 표시한다고 나와있습니다. 그래서 Navigator 인가 봅니다.

Terminology: In Flutter, screens and pages are called routes. The remainder of this recipe refers to routes.