플러터34 [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 Layout] 14. 플러터 갤러리 만들기(using GirdView) GridView에 대해 알아보고, GirdView를 이용해서 갤러리를 만들어 보도록 하겠습니다. 전체 소스코드는 하단에 첨부되어있습니다. 다음 내용을 다루고 있습니다. GridView란 GridView 위젯 사용법 GridView로 갤러리 만들기 GirdView 란 GridView는 스크롤 가능한 2D 위젯 배열입니다. 여기서 핵심 개념은 GridView가 스크롤 가능하고 2차원이라는 것입니다. 즉 스크롤 가능한 테이블입니다. ListView와 마찬가지로 가로 또는 세로로 스크롤할 수 있습니다. GirdView에서는 여러 가지 사례를 다루는 몇 가지 생성자가 있습니다. 생성자의 자세한 내용은 아래 공식 문서를 확인해 주세요. https://api.flutter.dev/flutter/widgets/Grid.. 2022. 4. 15. [Flutter Layout] 13. ListView와 ListTile로 연락처 목록 디자인 하기 앱에서 찾을 수 있는 일반적인 기능 중 하나는 연락처 목록입니다. 이번 포스트에서는 연락처 목록의 레이아웃을 작성해 보도록 하겠습니다. 이번 포스트는 아래 내용을 다루고 있습니다. 연락처 모델 만들기 ListTile 위젯 개요 ListTile 위젯으로 레이아웃 만들기 지난 코드 살펴보기 수직으로 스크롤하는 목록 뷰가 있는 상태에서 소스코드를 수정해 보도록 하겠습니다. 매터리얼 앱으로 home 속성에 Scaffold 위젯을 설정하고 있고 body 속성에 다시 Home 위젯을 불러오고 있습니다. Home 클래스는 StatelessWidget으로 build 메소드에서는 화면을 꽉 채우는 Container를 리턴해 주고 있습니다. Container위젯의 child로는 ListView의 separated 생성자로.. 2022. 4. 13. 이전 1 2 3 4 5 6 ··· 9 다음
