20 - stack widget

 

 

스택 | FlutterFlow 대학

1. ️Stack 위젯을 사용하여 위젯을 쌓아 올리거나 겹쳐서 배치할 수 있다.
- Stack 위젯은 위젯들을 *쌓아올리는 방식으로 배치*할 수 있는 기능을 제공한다.
- Stack은 행 또는 열과 같이 옆으로 배치하는 것이 아닌, 위젯들을 *서로 겹쳐서 배치*한다.
- Stack 위젯을 사용할 때 주의해야 할 점은 *스택 순서*인데, 보이는 순서와 반대이다. 즉, 맨 아래에 있는 위젯이 위로 가는 것이다.
- Stack 위젯에는 자식 위젯이 *맨 위부터 추가되는데*, 이는 실제로는 맨 아래에 나타난다.

2. Flutter에서 Stack 위젯을 사용하여 Container 위젯이 쌓이는 과정 설명
- Flutter에서 Stack 위젯은 크기가 없으므로, 자식 위젯의 크기에 따라 크기를 정함
- 자식 위젯이 없으면, 암묵적으로 크기가 적용됨
- 내부 정렬을 조정하기 위해 default child alignment를 지정할 수 있음
- default child alignment를 지정하지 않으면, 자식 위젯이 왼쪽 상단에 추가됨
- 하지만, default child alignment를 조정하면, 더 다양한 위젯을 만들 수 있음

3. Stack 위젯 속성 파악 및 디자인 활용
- Container 위젯을 Stack의 property로 활용 가능해 하여 다양한 배치에 응용 가능함을 확인
- 디자이너들이 활용하는 hinting 기능 소개
- hinting 기능을 적용한 예시 중 Stack이 리스트뷰와 함께 사용되어, 화면 밖에 있는 컨텐츠 존재를 시각적으로 알려준다는 설명

4.  다양한 디자인 요소들을 공간을 효율적으로 활용하며 정리하는 패턴들
- 원래는 스크롤을 이용하여 공간 부족 문제를 해결하지만, '스택(Stack)'을 사용하여 디자인 요소들을 겹치게 함으로써 정보를 정리할 수 있다.
- 디자이너가 자주 빠지는 함정 중 하나인 공간을 다 채우려는 경향을 피하고요, 스택을 사용하여 디자인 요소들을 정리하면 불필요한 혼잡함을 방지할 수 있다.
- 또한 스택을 사용하여 이미지를 배경으로 사용할 때, 텍스트가 가독성이 떨어지는 문제를 그라디언트나 채우기 색상으로 조정할 수 있다.
- 스택을 사용하여 여러 요소들을 겹치게 하는 '레이어링(Layering)' 패턴도 흔히 사용된다.

5.  웹디자인에서 사용하는 peeking 기법과 FlutterFlow의 사용.
- peeking은 디자인 기법 중 하나로, 사용자가 마치 화면 안으로 들어오거나 벗어나는 듯한 느낌을 준다.
- 이 기법은 일반적으로 웹 디자인에서 많이 사용된다. 보통 웹 디자인에서는 물체를 배치하는데, 물체를 옆이나 위아래로 놓거나 안에 넣는 것으로만 생각된다.
- 하지만 peeking 기법을 사용하여 다른 구역에 어울리는 물체를 비추게 하면 보다 역동적인 디자인을 구현할 수 있다.
- FlutterFlow에서는 Stack 위젯으로 peeking 디자인 기법을 구현할 수 있다.

*Stack 위젯*은 무엇인가요?

Stack 위젯은 위젯들을 쌓아올리는 방식으로 배치할 수 있는 기능을 제공해요.

위젯들을 서로 겹쳐서 배치한다는 특징이 있어요.

스택 순서에 주의해야 해요.

Stack 위젯에는 자식 위젯이 맨 위부터 추가되는데, 이는 실제로는 맨 아래에 나타나요.

Flutter의 Stack 위젯이란?

Flutter에서 Stack 위젯은 크기가 없으므로, 자식 위젯의 크기에 따라 크기를 정해요.

자식 위젯이 없으면, 암묵적으로 크기가 적용돼요.

내부 정렬을 조정하기 위해 default child alignment를 지정할 수 있어요.

default child alignment를 지정하지 않으면, 자식 위젯이 왼쪽 상단에 추가돼요.

하지만 default child alignment를 조정하면, 더 다양한 위젯을 만들 수 있어요.

Stack 위젯의 배치 활용 방법

Container 위젯을 Stack의 속성으로 활용가능해, 다양한 배치에 응용이 가능하다는 것을 확인했어요.

디자이너들이 사용하는 hinting 기능에 대해 소개하고, Stack과 리스트뷰를 함께 사용한 예시를 보며 컨텐츠 존재 여부를 시각적으로 알려준다는 것을 알게 되었어요.

스택(Stack)을 사용한 공간 활용 디자인 패턴

'스택(Stack)'을 사용하여 디자인 요소들을 겹치게 함으로써 정보를 정리할 수 있어요.

그러면서 디자이너가 자주 빠지는 함정 중 하나인 공간을 다 채우려는 경향을 피할 수 있어요.

텍스트가 가독성이 떨어지는 문제를 그라디언트나 채우기 색상으로 조정하거나, 여러 요소들을 겹치게 하는 '레이어링(Layering)' 패턴도 흔히 사용됩니다

 

Peeking 기법과 FlutterFlow에서의 활용

Peeking은 디자인 기법 중 하나로, 사용자가 마치 화면 안으로 들어오거나 벗어나는 듯한 느낌을 줘요.

웹 디자인에서 많이 사용되며, 다른 구역에 어울리는 물체를 비추어 역동적인 디자인을 구현할 수 있어요.

FlutterFlow에서는 Stack 위젯을 이용하여 peeking 디자인 기법을 구현할 수 있답니다.