플러터] 네비게이션과 라우팅 - 화면에 드로어(drawer) 추가하기
Material Design을 사용하는 앱에서는 내비게이션을 위한 두 가지 주요 옵션으로 탭과 드로어가 있습니다. 탭을 지원하기에 충분한 공간이 없을 때 드로어는 유용한 대안이 됩니다. Flutter에서, 드로어 위젯과 Scaffold를 조합하여 Material Design 드로어가 포함된 레이아웃을 만들 수 있습니다. 이 문서에서는 다음 단계를 사용합니다:Scaffold 생성드로어 추가드로어에 항목 채우기드로어를 프로그래밍 방식으로 닫기 1. Scaffold 생성앱에 드로어를 추가하려면, 이를 Scaffold 위젯으로 감싸야 합니다. Scaffold 위젯은 Material Design 가이드라인을 따르는 앱에 일관된 시각적 구조를 제공합니다. 또한, 드로어, AppBar, SnackBar와 같은 특..
플러터] 네비게이션과 라우팅 - 화면에서 데이터 반환하기
때때로 새로운 화면에서 이전 화면에 데이터를 반환하고 싶을 때가 있습니다. 예를 들어, 새 화면에서 사용자가 두 가지 옵션 중 하나를 선택할 수 있고, 사용자가 옵션을 선택하면 이전 화면에 그 선택을 알려주어 해당 정보를 기반으로 작업을 수행하게 됩니다. 다음 단계로 Navigator.pop() 메서드를 사용하여 이를 수행할 수 있습니다:홈 화면 정의선택 화면을 여는 버튼 추가두 개의 버튼이 있는 선택 화면 표시버튼이 눌리면 선택 화면 닫기홈 화면에 선택 사항을 스낵바로 표시하기 1. 홈 화면 정의홈 화면에는 버튼이 표시됩니다. 이 버튼을 탭하면 선택 화면이 시작됩니다.class HomeScreen extends StatelessWidget { const HomeScreen({super.key});..
플러터] 네비게이션과 라우팅 - 새로운 화면에 데이터 보내기
새로운 화면으로 이동할 때 데이터를 전달하는 경우가 종종 있습니다. 예를 들어, 사용자가 항목을 탭할 때 해당 항목에 대한 정보를 새 화면에 전달할 수 있습니다. 기억하세요: 화면은 단순히 위젯입니다. 이 예제에서는 할 일 목록을 생성하고, 할 일을 탭하면 해당 할 일에 대한 정보를 표시하는 새 화면(위젯)으로 이동합니다. 이 문서는 다음 단계를 사용합니다:할 일 클래스를 정의합니다.할 일 목록을 표시합니다.할 일 정보를 표시할 수 있는 세부 화면을 만듭니다.데이터와 함께 세부 화면으로 이동합니다. 1. 할 일 클래스 정의하기먼저, 할 일을 간단하게 표현할 방법이 필요합니다. 이 예제에서는 제목과 설명 두 가지 데이터를 포함하는 클래스를 만듭니다.class Todo { final String tit..
플러터] 네비게이션과 라우팅 - 새로운 화면으로 이동하고 돌아오기
대부분의 앱은 다양한 정보를 표시하기 위해 여러 화면을 포함합니다. 예를 들어, 한 앱에는 제품을 표시하는 화면이 있을 수 있습니다. 사용자가 제품 이미지를 탭하면 새 화면에서 해당 제품의 세부 정보를 표시합니다. Flutter에서는 화면과 페이지를 "라우트"라고 합니다. 이 문서의 나머지 부분에서는 라우트라는 용어를 사용합니다.Android에서 라우트는 액티비티(Activity)와 동등합니다.iOS에서 라우트는 뷰컨트롤러(ViewController)와 동등합니다.Flutter에서 라우트는 단순히 위젯입니다.이 문서에서는 Navigator를 사용하여 새로운 라우트로 이동합니다. 다음 섹션에서는 다음 단계를 사용하여 두 라우트 간에 이동하는 방법을 보여줍니다:두 라우트 생성하기Navigator.push()..
플러터] 네비게이션과 라우팅 - 탭(Tap) 작업하기
Material Design 가이드라인을 따르는 앱에서 탭 작업은 일반적인 패턴입니다. Flutter는 material 라이브러리의 일환으로 탭 레이아웃을 간편하게 만들 수 있는 방법을 제공합니다. 이 문서에서는 다음 단계를 사용하여 탭 예제를 만듭니다:TabController 생성하기탭 생성하기각 탭에 대한 콘텐츠 생성하기 1. TabController 생성하기탭이 제대로 작동하려면 선택된 탭과 콘텐츠 섹션을 동기화해야 합니다. 이 작업은 TabController가 담당합니다.TabController를 수동으로 생성하거나 DefaultTabController 위젯을 사용하여 자동으로 생성할 수 있습니다. DefaultTabController를 사용하는 것이 가장 간단한 옵션입니다. 이는 TabCon..
Flutter는 화면 간 이동과 딥 링크 처리를 위한 완벽한 시스템을 제공합니다. 복잡한 딥 링크가 없는 작은 애플리케이션은 Navigator를 사용할 수 있으며, 특정 딥 링크 및 네비게이션 요구 사항이 있는 애플리케이션은 Router도 함께 사용하여 Android와 iOS에서 딥 링크를 올바르게 처리하고 웹에서 앱이 실행 중일 때 주소 표시줄과 동기화되도록 해야 합니다.Android 또는 iOS 애플리케이션을 딥 링크를 처리하도록 구성하려면 딥 링크 설정 문서를 참조하세요.Navigator 사용하기Navigator 위젯은 화면을 스택 형태로 표시하며, 타겟 플랫폼에 맞는 전환 애니메이션을 사용합니다. 새로운 화면으로 이동하려면 BuildContext를 통해 Navigator에 접근하여 push() 또..