내비게이션3 [Flutter Layout] 16. TabBar 내비게이션 만들기 TabBar를 이용한 플러터 앱에서 간단히 화면 전환을 하는 법을 알아보도록 하겠습니다. *바로 코드를 확인하고 싶으시면 맨 아래로 내려주세요. TabBar 란? TabBar는 TabBarController, 탭이 포함된 TabBar, child를 가지는 TabBarView의 세 부분으로 구성됩니다. TabBarController는 TabBar와 TabBarView 사이의 탭 선택을 컨트롤합니다. 위의 캡처와 같이 TabBar는 가로로 탭들이 표시가 되고, TabBar에서 탭 중 하나를 클릭하면 TabBarView에 위젯이 표시됩니다. 이제 코드에서 알아보도록 하겠습니다. TabBar 만들기 runApp에서 호출되는 MyApp의 build 메소드에서 소스를 코딩하고 있습니다. 1. MaterialApp의.. 2022. 4. 22. [Flutter Layout] 15. PopupMenuButton(팝업메뉴버튼) 내비게이션 만들기 플러터의 앱 화면 간에 내비게이션을 할 때 주로 사용하는 위젯은 PopupMenuButton, Drawer, BottomNavigationBar, TabBar 등이 있습니다. 오늘은 내비게이션 레이아웃의 첫 번째 포스트로 PopupMenuButton을 이용해서 플러터 내비게이션을 만들어 보도록 하겠습니다. 플러터 앱을 만드는 데 있어서 필수적인 화면간 전환에 대해 꼭 알아보도록 합시다. 이번 포스트는 다음 내용을 다루고 있습니다. PopupMenuButton(팝업 메뉴 버튼) 개요 및 만들기 onSelected 이벤트에서 내비게이션 설정 플러터 내비게이션 (Navigator, MaterialPageRoute) 기본 코드 만들기 PopupMenuButton을 이용해 내비게이션을 구현하기 앞서 바탕이 되는 .. 2022. 4. 21. [Flutter] 7. 내비게이션(Navigation) 서랍 메뉴에서 내비게이션 기능을 추가해 보도록 하겠습니다. 이번 포스트에서는 다음 내용을 다루고 있습니다. 화면 추가하기 내비게이션 스택 이해하기 내비게이션 코드 추가 화면 추가하기 한 경로에서 다른 경로로 이동하기 위해서 최소한 앱에 두 화면이 존재 해야 하므로 화면 하나를 더 추가하겠습니다. bmi_screen.dart파일을 추가하였고 아래와 같이 코딩해 주었습니다. BmiScreen클래스를 stateless위젯으로 만들었고, 지금은 화면을 완성시키지 않고 Scaffold를 반환하도록 만들어 주겠습니다. Scaffold에는 title로 Text위젯을 가지는 appBar와, body에는 Center에 Text위젯을 설정해 두었습니다. 앱에 내비게이션 기능을 추가하기 전까지는 아직 이 화면은 볼 수 없습.. 2022. 2. 19. 이전 1 다음
