ㅅㅈㅍ ㅈㅂㅈㅇ (신제품 정보좀요)

컨테이너는 배경 스타일링 및 레이아웃에 자주 사용되며, 대개 컬럼, 로우 또는 그리드가 포함돼요.

배경색, 테두리, 모서리 둥글기, 테두리 색상 등 스타일링 가능하고, 박스 그림자, 네모 그림자 또는 elevation이라고도 하는 두 가지 서로 다른 드롭 샤도우, 그라데이션 또는 배경 이미지도 넣을 수 있어요.

섹션, 카드 또는 기타 콘텐츠를 스타일링하려면 이를 컨테이너로 감싸시면 됩니다.

그라데이션이 적용된 배경 예시를 보여드리며, 각각의 색상 전환 지점을 0~1 사이 값으로 설정할 수 있답니다.

그림자도 추가 가능하며 디자인 요소에 따라서 각각의 스타일을 다르게 지정할 수 있어요.

특히, 그라데이션 옵션에서는 각도를 조절하여 배경에 다양한 변화와 화려함을 줄 수 있어요.

배경 이미지를 사용할 때, 'Unsplash'에서 가져와 사용하는 방법이 소개되며 이미지를 캐싱하여 페이지를 로딩할 때 네트워크 요청 없이 바로 나타나게 할 수 있어요.

이미지의 적절한 표시를 위해 '박스 피트' 속성을 사용하여 컨테이너를 사용하여 최대 너비나 높이를 조절해서 콘텐츠가 너무 크거나 작아지지 않도록 할 수 있어요.

웹앱에서 max-width는 주로 수평 공간이 많은 경우 적용돼요.

섹션이 너무 넓어져서 가독성이 떨어지거나, 여러 섹션을 수평으로 배치해야 할 때 적용돼요.

모바일 기기에서도 작동하게 하려면 max-width 설정이 필수적이며, 대화면에서도 적절하게 보여주고자 한다면 max-width를 설정해야 해요.

반응형 디자인에서 작은 화면에 집중하기 때문에 큰화면을 고려하고 있는 경우 often overlooked or forgotten하지만, max-width 설정은 대화면에서의 레이아웃을 잡는 데 매우 유용해요.

컨테이너에는 사용 가능한 멋진 애니메이션 기능이 있어요.

변수로 설정된 속성이 변경되면 자동으로 컨테이너에 애니메이션을 추가해요.

높이와 같은 변수로 설정된 속성은 동적으로 업데이트할 수 있어요.

사용자가 컨테이너를 클릭하면 컨테이너를 확대할 수 있어요.

페이지 상태 변수를 사용하여, 컨테이너 높이 값을 정하는 방법을 설명해드릴게요.

State Management 탭에서 변수 이름, 방식, 초기값 등을 입력하고 확정한 후, 컨테이너 높이를 지정하는 코드를 작성하고 페이지 상태 변수를 지정해요.

작성이 끝나면, 검토하고 값을 확인할 수 있는 방법도 제공돼요.

또한 페이지 상태 변수는 매우 유용한 도구이며, 상태 관리 등 다양한 용도로 활용할 수 있다는 것도 알려드릴게요.

애니메이션을 적용하기 전에 animation curve를 설정하는데, 이를 위해 이징 함수(easing function)를 설정합니다.

그 후에 액션 흐름 에디터(action flow editor)에서 새로운 액션을 추가합니다.

액션에서 설정한 값에 따라 동작하는데, 지금은 310으로 설정하고 있습니다.

이제 child alignment을 설정하는데, 이는 위와 같은 alignment를 기준으로 작동하여 항목을 정렬합니다.

FlutterFlow에서의 페이지 상태 설정이 완료되었으니, 이제 설정한 대로 동작하는지 확인해보세요.

위젯을 원하는 위치로 정렬하기 위해 align 속성을 사용해요.

이 속성은 부모 컨테이너 안에 있는 위젯을 원하는 위치로 이동시키는 역할을 합니다.

CSS의 absolute positioning과 비슷한 역할을 한다고 할 수 있어요.

부모 컨테이너는 전체 너비와 높이를 차지하고, 그 안에는 100 x 100 크기의 컨테이너가 있으며, 정렬 속성은 upper left로 설정되어 있어요.

이렇게 설정된 속성을 조정하면 위젯을 그리드 안에서 원하는 위치로 이동시킬 수 있고, 조정된 값들은 실시간으로 변합니다.

또한, 이 값들을 수동으로 편집하여 더 정밀한 제어가 가능해요.

2D 그리드를 사용하여 레이아웃의 위치를 지정하며, 중앙은 0, 오른쪽은 1, 위쪽은 -1, 아래쪽은 1을 기준으로 해요.

align은 부모 요소를 기준으로 자식 요소의 위치를 조정하는 데 주로 사용되며, 선택된 아이콘의 위치를 지정하는 예제가 있어요.

프라이머리 레이아웃에는 컬럼이나 로우 같은 메인 레이아웃 위젯이 주로 사용되며, align은 보조적인 레이아웃 속성에 적합합니다.

Column을 주로 사용하고, Align 위젯을 사용하여 정렬을 조절해요.

Widget 자체에 align을 사용하는 것이 좋고, 부모에게 align을 주는 것은 피하는 것이 좋아요.

Align 위젯은 주로 Stack 위젯이나 Container와 함께 사용돼요.

여러 위젯을 중첩하는 경우 Stack 위젯을 사용하고, 일반적으로 위젯 위쪽에 요소를 배치하게 돼요.

UI Builder에 표시되지 않는 '패딩(padding)', '확장(expansion)', '정렬(alignment)'과 같은 속성은 실제로는 위젯이에요.

Flutter에서는 위젯을 컨테이너 내부에 래핑하여 표현하고, FlutterFlow에서도 이런 위젯을 숨기는 대신 속성으로 노출시켜 사용성을 높이고 보다 쉽게 접근할 수 있게 제공하는 거에요.

위젯 트리에서 위젯들을 찾고 변경하기 어려워지고, 위젯을 드래그하고 재정렬할 때 지저분해질 가능성이 있어요.

FlutterFlow는 이러한 문제를 해결하기 위해 위젯들을 속성으로 노출시킴으로써 작업을 정리하고 빠르게 처리할 수 있도록 도와줘요.

특히 패딩과 같은 속성은 주로 웹 디자인 배경에서는 소유하는 위젯의 속성으로 생각하는 편인데, FlutterFlow는 이를 고려하여 이러한 속성을 숨긴답니다.

이렇게 함으로써 디자이너와 개발자들에게 편의와 작업 효율성을 제공해줘요.

주축 정렬과 교차 축을 이해하는 게 필요해요.

예시로 설명하여 이해를 도와줄게요.

정렬 위젯을 감싸는 Align 위젯이 가로로 가득 차면, 자식 위젯들도 가로로 가득 차게 배치돼요.

가로로 가득 차게 배치된다는 것은 Align 위젯 문서를 통해 확인했죠.

만약 위젯 간 중간에 다른 위젯이 있다면 레이아웃을 이해하기 어려울 수 있어요.

이 때 코드를 확인하면 문제를 해결할 수 있어요.

FlutterFlow에서 가장 중요한 레이아웃의 원칙에 대해 다루고 있습니다.

제약은 아래로, 크기는 위로라는 원칙이 있어요.

이를 암기하면 레이아웃을 마스터할 수 있습니다.

이 원칙은 '제약은 아래로'와 '크기는 위로'라는 두 부분으로 이루어져 있어요.

부모 위젯이 위치를 결정합니다.

제약은 높이와 너비의 최소 및 최대 값으로 전달되며, 부모에서 자식으로 내려갑니다.

이를 이용하여, 컨테이너의 자식에 적용되는 제약은 기본적으로 최소 너비 0부터 최대 너비 100, 최소 높이 0부터 최대 높이 100을 나타냅니다.

일반적으로 컬럼이나 로우 등을 사용하여 고정된 값으로 디자인하지 않고, 화면 크기에 대응합니다.

스크롤되는 레이아웃은 'unbounded' 상태를 가지며, 제약의 정확한 값이 아니라 어디에서부터 전달되었는지를 알 필요는 없습니다.

Flutter에서 레이아웃 디자인을 할 때는 세 가지 원칙을 고려해야 해요.

첫 번째로, 제약 조건은 위에서 아래로 흐른다는 것이에요.

부모나 조부모 다양한 레벨에서 제약 조건이 내려오기 때문에 위젯 트리에서 명확한 경로를 찾아야 해요.

두 번째로, 크기는 아래에서 위로 전달된다는 것이죠.

부모 위젯이 자식 위젯에게 얼만큼의 공간을 할당할지 정한 후, 자식 위젯이 필요한 크기를 알리는 순서이에요.

세 번째로, 위치는 부모 위젯에서 결정된다는 것도 중요해요.

제약 조건과 크기가 정해지면, 부모 위젯이 자식 위젯을 올바른 위치에 배치할 수 있게 된답니다.

컬럼이나 로우와 같은 부모 컴포넌트에 대한 예시를 통해, 부모 컴포넌트가 자식 컴포넌트의 위치를 설정할 수 있어요.

레이아웃을 디버그하는 방법을 확인하면, 특정 레이아웃이 작동하지 않거나 이상하게 보일 때, 이 레이아웃 원칙을 적용하여 문제를 해결할 수 있어요.

이상한 레이아웃 예시를 확인하면, 컬럼과 컨테이너를 갖고 있는데, 컨테이너의 가로 크기가 100픽셀로 설정되어 있는데도 전체 가로 영역을 차지하고 있으며, 세로 크기는 정상적이에요.

이번 예시에서는 row와 container 위젯을 사용하여 패딩과 정렬의 관계를 알아봤어요.

이 때, 컨테이너가 지정된 width보다 padding이 큰 경우, 실제로는 해당 컨테이너가 전체 영역을 차지하게 된답니다.

위의 경우, 컨테이너가 전체 width를 차지하는 모습을 row가 중앙에 오도록 설정했지만, 실제로는 좌측 정렬과 같아진다는 것을 알게 되었어요.

FlutterFlow의 세 번째 원칙은 부모가 위치를 설정한다에요.

부모 위젯인 '컬럼'이 위치를 지정하면 자식 위젯도 영향을 받아요.

그러나 때로는 부모와 자식의 요구 사이에서 모순이 발생할 수 있어요.

이때 두 가지 중 하나가 발생하는데, 오류 또는 덮어쓰기요.

우선순위가 있는데, 우선순위가 높은 것이 이기게 되죠.

이러한 모순을 해결하려면 '유연한'이나 '확장된' 위젯에 대해 알아보시면 됩니다요.

Widget 사이즈와 제약 조건에 따라 오버플로우 오류가 발생할 수 있어요요.

오버플로우 오류는 부모 위젯으로부터 전달받은 제약 조건을 따르지 못하면 발생하죠.

이를 해결하기 위해 제약 조건을 재정의하거나 크기를 조절해야 해요요.

레이아웃을 다루는 데에는 제약 조건이 하향식으로 전달되고, 사이즈는 상향식으로 전달되며, 부모 위젯이 위치를 설정해요요.