플러터34 [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. [Flutter Layout] 10. Stack 위젯 레이아웃 실습 지난 포스트에서 Stack 위젯의 기본 사용법에 대해 공부해 보았습니다. 이번 포스트는 실제로 앱을 만들 때 어떠한 레이아웃에서 Stack이 사용되는지 연습해 보도록 하겠습니다. Stack 위젯에 대해 전혀 모르시면 먼저 이쪽포스트를 참고해 주세요. 레이아웃 연습 목표 Stack 위젯의 자식 위젯을 배치하여 아래와 같은 레이아웃을 만들어볼 계획입니다. 레이아웃을 만들면서 Card위젯, Positioned 위젯, Container에 배경 이미지 넣기, ElevatedButton 위젯 등에 대해 공부해 보도록 합시다. 어떻게 하면 위와 같이 만들 수 있을지 잠시 생각해 보세요. Stack 레이아웃 우선 연습에서 사용되는 기본 코드는 아래와 같습니다. 앱은 MaterialApp을 만들고 있습니다. home 속.. 2022. 3. 29. [Flutter Layout] 9. Stack 위젯, 겹치는 레이아웃 만들기 플러터 앱에서 레이아웃 만드는 법에 대해 알아보고 있습니다. Stack 위젯으로 레이아웃을 만드는 방법에 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Stack 레이아웃 Stack의 자식 위젯 배치하기(Align 위젯, Positioned 위젯) Stack 레이아웃 일반적으로 화면이 배치하려는 위젯이 겹칠 때 스택을 사용합니다. 어떻게 작동하는지 스택 기반으로 화면을 만들어 보겠습니다. Stack 레이아웃에 사용할 기본 코드는 입니다. 머티리얼 앱으로 home에 Scaffold를 지정해 두었습니다. 스캐폴드에서는 body로 RowColumn 클래스를 넣고 있고 RowColumn 위젯은 화면의 전체 사이즈를 가지는 Stack위젯을 자식으로 가지는 Container입니다. Contai.. 2022. 3. 26. 이전 1 2 3 4 5 6 7 ··· 9 다음
