본문 바로가기

레이아웃3

[Flutter Layout] 9. Stack 위젯, 겹치는 레이아웃 만들기 플러터 앱에서 레이아웃 만드는 법에 대해 알아보고 있습니다. Stack 위젯으로 레이아웃을 만드는 방법에 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Stack 레이아웃 Stack의 자식 위젯 배치하기(Align 위젯, Positioned 위젯) Stack 레이아웃 일반적으로 화면이 배치하려는 위젯이 겹칠 때 스택을 사용합니다. 어떻게 작동하는지 스택 기반으로 화면을 만들어 보겠습니다. Stack 레이아웃에 사용할 기본 코드는 입니다. 머티리얼 앱으로 home에 Scaffold를 지정해 두었습니다. 스캐폴드에서는 body로 RowColumn 클래스를 넣고 있고 RowColumn 위젯은 화면의 전체 사이즈를 가지는 Stack위젯을 자식으로 가지는 Container입니다. Contai.. 2022. 3. 26.
[Flutter Layout] 7. Row, Column 위젯 정렬하기, 위젯 축 Row와 Column의 레이아웃에 대해 알아보고 위젯들을 정렬하는 법을 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Row, Column 위젯 레이아웃 배치 플러터 위젯 축 메인축, 교차축(MainAxisAlignment, CrossAxisAlignment) 속성 변경 Row, Column 위젯 레이아웃 이름에서 알 수 있듯 Row 레이아웃은 가로로 배치된 위젯의 목록이 되고, Column은 세로로 배치된 자식 위젯의 목록입니다. Row와 Column은 아마도 플러터 앱에서 사용하는 가장 간단한 레이아웃 위젯일 겁니다. Row와 Column은 동일한 속성을 갖습니다. 따라서 기본적으로 Row에서 설정한 모든 속성 설정은 Column의 속성 설정에서 사용할 수 있습니다. 이제 코드를.. 2022. 3. 22.
[Flutter Layout] 2. 플러터 Themes, 다크모드, 앱의 컬러 선택 사이트 지난 포스트에서 만든 레이아웃을 베이스로 Themes와 Colors에 대해 알아보도록 하겠습니다. 그리고 앱의 컬러를 쉽게 선택할 수 있게 도와주는 사이트를 알아봅시다. 이번 포스트는 다음 내용을 다루고 있습니다. brightness, 다크 모드 설정 primarySwatch, 앱바 생상 변경 textTheme, 텍스트 스타일 일괄적으로 변경 Material Palette, 플러터 앱의 컬러 선택을 쉽게 현재 아래와 같은 앱을 구성하고 있습니다. 코드를 보면 앱에 대해서 어떤 색상도 설정하지 않았지만 화면에서는 파란색과 흰색 색상이 표현되고 있습니다. 이러한 앱의 테마를 쉽게 변경할 수 있습니다. MaterialApp 위젯에 테마를 설정해 보도록 하겠습니다. MaterialApp 테마 설정 1. brig.. 2022. 3. 14.