프로그래밍/Flutter54 [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. [Flutter Layout] 12. ListView Separated 생성자(구분 위젯이 있는 리스트 만들기) ListView 기본 기능을 지난 포스트에서 다뤘습니다. ListView의 Separated 생성자로 ListView를 만들어 보도록 하겠습니다. separated로 ListView를 만들면 리스트의 아이템 사이에 구분이 되는 위젯을 자동으로 넣을 수 있습니다. *소스코드는 지난 포스트에서 이어집니다. 전체 소스는 아래쪽에 첨부하였습니다. ListView Separeted 생성자로 ListView만들기 ListView 생성자를 호출하는 대신 ListViewSeparated 생성자를 호출할 수 있습니다. 먼저 List을 반환하는 대신 단일 Widget을 반환하는 함수를 만들어 보도록 하겠습니다. 리스트의 아이템이 될 위젯을 반환하는 함수 만들기 새롭게 createSingleBox 메소드를 만들었습니다. c.. 2022. 4. 11. [Flutter Layout] 11. ListView, 스크롤 가능한 레이아웃 만들기 ListView 위젯으로 스크롤이 가능한 레이아웃을 만들어 보고, ListVew의 자식 위젯들이 어떻게 배치되는지 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. ListView 위젯 세로 혹은 가로로 스크롤하기 화면 일부만 차지하는 ListView 만들기 ListView 위젯 ListView는 가로 또는 세로로 정렬할 수 있는 스크롤 가능한 위젯 리스트입니다. 기본 코드를 작성하고 변형하면서 특성을 살펴보도록 하겠습니다. 부트스트랩 되는 MyApp은 StatelessWidget입니다. MaterialApp을 반환하고 있으며 Scaffold의 body에 Home 클래스를 지정해 두었습니다. Scaffold의 body에 할당되는 Home 위젯입니다. Home 위젯은 StatelessWi.. 2022. 3. 29. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음
