MaterialPageRoute

MaterialPageRoute 클래스는 화면 전환 애니메이션과 함께 새로운 화면을 표시하는 데 사용됩니다. Navigator.push 메서드를 사용하여 새로운 화면으로 이동할 때, MaterialPageRoute 클래스를 사용하면 기본적인 화면 전환 애니메이션을 적용할 수 있습니다.

Navigator.push 메서드를 사용하여 새로운 화면으로 이동할 때, MaterialPageRoute 클래스를 사용하지 않으면 화면 전환 애니메이션이 적용되지 않습니다. 대신, Navigator.pushReplacement, Navigator.pushNamed, Navigator.pushNamedAndRemoveUntil 등의 메서드를 사용하여 화면 전환 애니메이션을 적용할 수 있습니다. 하지만, 이러한 메서드는 MaterialPageRoute 클래스보다 덜 유연하며, 사용법도 조금 다릅니다.

따라서, MaterialPageRoute 클래스를 사용하면 화면 전환 애니메이션을 쉽게 적용할 수 있으며, 코드의 가독성도 향상됩니다.

void _onPostVideoButtonTap() {
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context) => Scaffold(
        appBar: AppBar(title: const Text('Record video')),
      ),
      fullscreenDialog: true,
    ),
  );
}

이 함수 _onPostVideoButtonTap는 Flutter 앱에서 새로운 화면으로 이동하는 기능을 수행합니다.

자세히 설명하면:

1. Navigator.of(context).push: 현재 BuildContext에 연결된 Navigator 위젯을 사용하여 새로운 화면(또는 라우트)을 푸시합니다. 이것은 새로운 화면을 현재 화면 위에 추가합니다.

2. MaterialPageRoute: 이것은 Android와 iOS에서 일반적으로 사용되는 화면 전환 효과를 제공하는 라우트 생성자입니다.

   • builder: 새로운 화면의 내용을 정의하는 부분입니다. 여기서는 간단한 Scaffold 위젯을 반환하며, 그 위에는 'Record video'라는 제목의 AppBar가 있습니다.

   • fullscreenDialog: 이 속성이 true로 설정되면, 새 화면이 모달 대화상자 형식으로 표시됩니다. iOS에서는 일반적으로 화면이 아래에서 위로 슬라이드하여 나타납니다.

_onPostVideoButtonTap 함수가 호출되면, 사용자는 "Record video"라는 제목의 새로운 화면을 보게 됩니다. 이 화면은 전체 화면 모달 대화상자 형식으로 표시되며, 사용자가 뒤로 가기 버튼을 누르거나 화면을 닫으면 원래 화면으로 돌아갈 수 있습니다.

Flutter에서 fullscreenDialog 속성은 MaterialPageRoute 생성자에서 사용되는 선택적 불리언 매개변수입니다. 이 속성을 true로 설정하면 페이지 전환과 페이지 자체의 동작 및 외관에 특정한 효과가 있습니다.

fullscreenDialog를 true로 설정하면 다음과 같은 일이 발생합니다:

1. 대화형 스타일 전환: 새 페이지가 화면 오른쪽에서 수평으로 슬라이드되는 대신 (iOS의 표준), 아래쪽에서 위로 슬라이드됩니다 (안드로이드의 표준인 페이드 인과는 다름). 이 하단에서 상단으로의 전환은 일반적으로 모달 대화상자와 연관됩니다.

2. 닫기 표시: iOS에서는 페이지 헤더에 일반적으로 "뒤로" 버튼 대신 왼쪽 상단에 "닫기" 버튼이 포함됩니다. 이는 전체 화면 대화상자가 사용자가 종료하거나 닫는 모달 상호작용의 일종이라는 관례와 일치합니다.

3. 사용 사례: 이 속성은 새 화면이 전체 화면을 차지해야 하는 모달 대화상자일 때 유용합니다. 예를 들어 새 항목 생성, 목록에서 연락처 선택, 더 많은 공간이 필요한 복잡한 양식이나 정보를 제시하는 경우 등이 있습니다.

예제 사용법:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => YourNewScreen(),
    fullscreenDialog: true,
  ),
	);

이 예시에서 YourNewScreen으로 네비게이트 할 때, 페이지는 하단에서 상단으로 슬라이드되고, iOS에서는 뒤로 버튼 대신 닫기 버튼을 표시하여 전체 화면 모달 대화상자임을 나타냅니다.