본문 바로가기

Positioned2

[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.