Flutter - 페이지 이동 기술 - 2 (MaterialPageRoute)

💡 학습목표
   1. MaterialPageRoute 란 뭘까?
   2. showDialog 위젯 사용해보기

1. MaterialPageRoute 란 뭘까?

MaterialPageRoute는 Flutter에서 앱 내 페이지 전환을 위한 라우터를 제공하는 위젯입니다. 이 위젯은 플랫폼별로 일관된 모양과 느낌의 페이지 전환을 제공하기 위해 디자인되었습니다.

1. Navigator:
   Flutter에서 화면 간의 탐색을 관리하는 객체입니다. push와 pop 메서드를 주로 사용하여 새로운 화면으로 이동하거나 현재 화면을 종료합니다.

2. Route:
   화면(또는 페이지) 간의 단일 전환을 나타내는 객체입니다. MaterialPageRoute는 Route의 하위 클래스입니다.

3. BuildContext:
   위젯 트리 내에서 위젯의 위치에 대한 참조입니다. Navigator를 사용하려면 대부분의 경우 현재의 BuildContext가 필요합니다.

MaterialPageRoute

• MaterialPageRoute는 Material Design 권장 사항에 따라 페이지 전환 애니메이션을 제공합니다.
• iOS에서는 슬라이드 전환 애니메이션, Android에서는 Fade 애니메이션과 같이 플랫폼별로 알맞은 전환을 제공합니다.

Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => SecondPage()));

1. Navigator.of(context):
   • Flutter 앱에서는 여러 화면 간의 이동을 관리하기 위해 Navigator 클래스를 사용합니다.
   • Navigator.of(context)는 현재 BuildContext에 연결된 Navigator의 인스턴스를 반환합니다. 즉, 앱에서 페이지 스택을 관리하는 객체에 접근하는 방법입니다.
2. push():
   • push() 메서드는 새로운 페이지(Route)를 현재 페이지 스택에 추가하는 메서드입니다. 이 메서드를 호출하면 새로운 페이지가 애니메이션과 함께 화면에 표시됩니다.
   • push()에 전달된 Route 객체는 이동할 페이지에 대한 정보를 담고 있습니다.
3. MaterialPageRoute(builder: (context) => SecondPage()):
   • MaterialPageRoute는 Material Design 스타일의 페이지 전환 애니메이션을 사용하여 새로운 페이지를 표시하는 라우트입니다.
   • builder 속성은 화면에 표시될 위젯을 반환하는 콜백 함수를 받습니다. 위의 코드에서는 SecondPage() 위젯을 반환하고 있으므로 SecondPage가 화면에 표시됩니다.

💡 MaterialPageRoute 객체가 먼저 생성되고, Navigator의 push 메서드가 호출됩니다. 
   그 후 페이지 전환 애니메이션이 시작되면서 builder 콜백이 호출되어 
   실제로 SecondPage 위젯이 생성되고 화면에 표시됩니다

페이지 뒤로 돌아 가는 코드는??

Navigator.of(context).pop();

2. showDialog 위젯 사용해보기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 시작 페이지로 FirstPage 위젯을 사용
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            // 버튼을 눌렀을 때 Navigator 를 사용해 페이지 이동 처리
            //Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondPage()));
            _showMyDialog(context);
          },
        ),
      ),
    );
  }

  _showMyDialog(BuildContext context) {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('팝업 창 제목'),
            content: Text('팝업 창 내용 입니다'),
            actions: [
              TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text('닫기')),
            ],
          );
        });
  }
} // end of FirstPage

class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to First Page'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}