플러터:화면 전환(화면 쌓기, 하단 네비게이션 바) 편집하기 (부분)

= 기본 화면 전환(Navigator) =
* Flutter 앱에서 화면을 이동하는 가장 기본적인 방식은 Navigator를 사용하는 것이다.
* Navigator는 “화면(stack)”을 관리하며, 새로운 페이지를 push하여 화면을 열고 pop하여 닫는다.
<syntaxhighlight lang="dart">import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator Demo',
      debugShowCheckedModeBanner: false,
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  // StatelessWidget: 상태(state)를 가지지 않는 화면
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("첫 번째 화면"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("두 번째 화면으로 이동"),
          onPressed: () {
            // 화면 이동 (push)
            Navigator.push(
              context,  // 현재 위젯의 위치가 어디인지.(어디 위에 화면을 올릴 것인지.)
              MaterialPageRoute(builder: (_) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  // 두 번째 화면도 상태를 가지지 않는 StatelessWidget
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("두 번째 화면"),
      ),
      body: Center(
        child: Text(
          "여기는 두 번째 화면!",
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}</syntaxhighlight>

== 이해를 위한 추가 설명 ==
{| class="wikitable"
!요소
!설명

!비고
|-
|화면을 위에 올리기.
Navigator.push
|<syntaxhighlight lang="dart">Navigator.push(
context,
MaterialPageRoute(builder: (_) => SecondPage()),
);</syntaxhighlight>

새로운 페이지를 스택 위에 ‘올려서’ 이동한다.

MaterialPageRoute는 기본적인 화면 전환 애니메이션을 제공한다.
|마테리얼 디자인 규칙에 따라 뒤로가기가 가능하면 자동으로 뒤로가기 버튼이 생긴다.
<code>_</code>는 '인자를 받긴 해야 하지만, 나는 쓰지 않겠다'라는 의미의 Dart 관례적인 이름.(원랜 BuildContext context가 들어감.)
|-
|뒤로 가기
Navigator.pop
|<code>Navigator.pop(context)</code>

현재 페이지를 스택에서 제거(pop)하여 이전 화면으로 돌아간다.
|위 코드엔 없지만, 특정 함수에서 진행하면 창이 닫힌다.
|}

=== 결론 ===
스택을 쌓아 화면이 바뀐다.

== 의문 ==

=== 왜 push()는 context가 필요한가? ===
Navigator는 위젯 트리 안에 존재하는 “Navigator State”를 찾아야 하는데, 이를 위해 현재 위젯의 BuildContext가 필요하다.

BuildContext는 “현재 위젯이 트리에서 어디 위치하는지”를 나타내는 정보다.

=== MaterialPageRoute 말고 다른 것도 있나? ===
있다.

* CupertinoPageRoute (iOS 스타일 전환)
* PageRouteBuilder (전환 애니메이션 직접 커스텀)
* go_router, auto_route 같은 라우팅 라이브러리