18. 플러터 : 화면 이동(네비게이션)

어휴.. 드디어 여기까지 왔다!
시간이 무한정 있는 것은 아니니까..
우재가 스마트폰 앱을 만들려면 최소 화면 전환까지는 해야 하고
추가로 목록 보여주기까지하면 퍼펙트!

일단 가장 간단한 네비게이션을 이용한 화면 전환부터 해보자.
스마트폰에서 네비게이션은 새롭게 표시할 화면을 기존 화면 위에 순서대로 쌓는 개념을 말해.
이때 화면은 영역 일부를 가리킬 수 없고 반드시 전체 화면이어야 하고.
그래서 이전에 있던 화면은 새로운 화면에 가려서 전혀 볼 수가 없게 되는거야.

왼쪽 화면(페이지)에서 버튼을 누르면 오른쪽 화면으로 이동하고,
"처음 화면으로 돌아가기" 버튼을 누르면 왼쪽 화면으로 돌아가게 만들었어.
Navigation 클래스를 사용한 네비게이션의 장점은
다음 화면으로 넘어갈 때는 버튼을 직접 구현해야 하지만,
이전 화면으로 돌아갈 때는 상단 제목줄 왼쪽에 있는 화살표 버튼을 눌러도 돼.
그러니까 오른쪽 화면에서 "처음 화면으로 돌아가기" 버튼은 만들지 않아도 되는거지.
그래도 나중에는 직접 구현해야 할 때가 있기 때문에 아빠는 구현을 한 거야.

아래 코드를 볼 때 중요한 점 첫 번째!
First와 Second 클래스는 거의 똑같은 코드라는 점.
First 위젯에서는 Second 위젯으로 이동할 거니까 다음 화면을 넣어야 하고
Second 위젯에서는 First 위젯으로, 다시 말해 Second 위젯을 제거할 거니까 현재 화면을 없애는 코드만 달라.

두 번째는 Scafold 클래스가 각각의 화면 클래스에 들어가야 해.
그래야 상단 제목줄부터 시작하는 전체 화면을 쉽게 구성할 수 있으니까.

세 번째는 두 번째와 같은 이유로
main 함수에서 Scafold 객체를 만들지 않아.
각각의 화면에 들어갔으니까 만들면 안되는 거지.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '네비게이션',
        home: First(),
    ));
}

class First extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('첫 번째')),
            body: Center(
                child: RaisedButton(
                    child: Text('두 번째 화면으로 이동', style: TextStyle(fontSize: 21)),
                    color: Colors.blue,
                    onPressed: () {
                        // push에 전달되는 두 번째 매개변수는 Route<T> 클래스.
                        Navigator.push(context,
                            MaterialPageRoute<void>(builder: (BuildContext context) {
                                return Second();
                            })
                        );

                        // 화살표 문법 적용
                        // Navigator.push(context,
                        // MaterialPageRoute<void>(builder: (BuildContext context) => Second())
                        // );
                        
                        // 위와 같은 코드. of 메소드 호출이 불편하다.
                        // Navigator.of(context).push(
                        // MaterialPageRoute<void>(builder: (BuildContext context) => Second())
                        // );
                    },
                ),
            ),
        );
    }
}

class Second extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('두 번째')),
            body: Center(
                child: RaisedButton(
                    child: Text('처음 화면으로 돌아가기', style: TextStyle(fontSize: 21)),
                    color: Colors.green,
                    onPressed: () {
                        Navigator.pop(context);
                        
                        // 위와 같은 코드
                        // Navigator.of(context).pop();
                    },
                ),
            ),
        );
    }
}