분류 전체보기137 [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. [Flutter Layout] 8. Row, Column 위젯 순서 정렬, Expanded와 flex Row, Column의 자식 요소의 순서 정렬에 대해 알아보고, Expanded 위젯과 flex 속성에 대해 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. verticalDirection, Column의 자식 순서 바꾸기 textDirection, Row 자식 순서 바꾸기 Expanded 위젯 flex, Expanded 공간 나누기 연습에서 사용할 화면과 코드는 아래와 같은 상태입니다. creatBox는 가로, 세로 50px 사이즈의 container의 리스트를 반환하는 메소드 입니다. verticalDirection, Column의 자식 순서 바꾸기 Column 위젯에는 열의 자식 순서를 결정하는 verticalDirection이라는 속성이 있습니다. VerticalDirectio.. 2022. 3. 24. [Flutter Layout] 7. Row, Column 위젯 정렬하기, 위젯 축 Row와 Column의 레이아웃에 대해 알아보고 위젯들을 정렬하는 법을 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Row, Column 위젯 레이아웃 배치 플러터 위젯 축 메인축, 교차축(MainAxisAlignment, CrossAxisAlignment) 속성 변경 Row, Column 위젯 레이아웃 이름에서 알 수 있듯 Row 레이아웃은 가로로 배치된 위젯의 목록이 되고, Column은 세로로 배치된 자식 위젯의 목록입니다. Row와 Column은 아마도 플러터 앱에서 사용하는 가장 간단한 레이아웃 위젯일 겁니다. Row와 Column은 동일한 속성을 갖습니다. 따라서 기본적으로 Row에서 설정한 모든 속성 설정은 Column의 속성 설정에서 사용할 수 있습니다. 이제 코드를.. 2022. 3. 22. 이전 1 ··· 15 16 17 18 19 20 21 ··· 35 다음
