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

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

배경색, 테두리, 모서리 둥글기, 테두리 색상 등 스타일링 가능하고, 박스 그림자, 네모 그림자 또는 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 위젯 문서를 통해 확인했죠.

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

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

컬럼이나 로우에 자식 위젯을 넣으면 expansion이라는 속성이 추가됩니다.

확장(expansion)은 디폴트, 유연(flexible), 확장(expanded) 세 가지 옵션으로 나뉘며, 화면 구성 요소의 너비가 고정되어 있을 때는 디폴트를 사용하면 되지만, 나머지 공간을 채우고 싶을 때에는 유연(flexible) 또는 확장(expanded)를 사용합니다.

이러한 확장(expansion) 속성은 컬럼과 로우에서만 볼 수 있습니다.

Column과 Row에서 expanded를 사용하면 위젯은 추가 공간을 항상 모두 채우게 된다고 해요.

하지만, flexible은 위젯이 추가 공간보다 커지면 오버플로를 방지하면서 최대 너비를 설정해준다고 해요.

이렇게 하면 위젯이 부모 위젯에서 주어진 공간보다 커지면 계속 확장될 때 생기는 오류를 방지할 수 있어요.

이를 통해 어떻게 하면 오버플로 없이 추가 공간을 적절히 활용할 수 있는지, 실용적인 예시까지 살펴볼 수 있어요.

채팅 UI를 예시로 들어 Flexible과 Expanded를 사용한 과정을 설명합니다.

Flexible는 실제 텍스트의 길이를 고려해 최대 너비를 지정해줍니다.

따라서 너비를 넘어가면 자동으로 다음 라인으로 넘어가게 됩니다.

다른 방법인 Expanded는 Flexible과 비슷하지만, 남은 공간을 채우기 위해 강제로 차지합니다.

이에 따라 만약 적은 양의 텍스트가 있다면 여전히 전체 길이를 가지게 됩니다.

어떤 방법을 사용할 지는 디자인에 따라 다르다는 점 참고해주세요.

Expanded와 Flexible의 주요한 차이점은, 사용자가 원하는 공간 차지 비율 설정에 있어요요.

Expanded는 남은 공간을 차지하기 위해 사용되고, Flexible은 오버플로 에러를 방지하면서 공간을 유연하게 처리해요요.

추가적인 속성인 Flex값을 설정할 수도 있는데요요.

Expanded는 두 개 이상의 자식 위젯을 동일 비율로 확장할 때 사용하고, Flexible은 유연하게 오버플로 처리를 하고 싶을 때 사용해요요.

Flex 값은 각 자식 위젯이 공간을 어떻게 나눌지 지정할 수 있는 기능이에요.

Expanded 속성이 설정된 두 개의 컨테이너가 있는 행(Row)이 있다고 가정해보면, 오렌지 컨테이너는 첫 번째 컨테이너의 공간의 두 배만큼 차지하도록 하려면 첫 번째 컨테이너에는 flex 값 1을 주고, 오렌지 컨테이너에는 flex 값 2를 주면 되요.

flex 값은 가감이 가능한데, 여기서는 총 flex 값이 3이므로 오렌지 컨테이너는 2/3, 보라색 컨테이너는 1/3을 차지합니다.

하지만 flex 값은 flexible 또는 expanded 속성의 제약 내에서 작동한다는 것이 중요합니다.