19-컨테이너

 

컨테이너의 역할은 무엇이 있나요?

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

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

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

 

 

배경 스타일링 예시에서 그라데이션 기능 설명

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

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

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

 

 

배경 이미지 사용 시 주의사항

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

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

 

웹앱에서 max-width속성의 사용 예시는?

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

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

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

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

 

 

컨테이너에 적용할 수 있는 애니메이션 기능은?

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

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

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

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

 

페이지 높이값을 지정하는 방법은?

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

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

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

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

 

 

FlutterFlow에서 페이지 상태 설정하는 방법은?

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

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

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

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

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