Choe's In coding...

여렷 앱 UI를 밴치마크 하다보니 내가알고있는 방법으로는 구현 방법이 안떠오르는 것들이 몇 가지 보인다.

오늘 그중  Stack Widget과 Positioned Widget을 알아보자

Stack Widget은

위젯들을 겹치는 역할을 한다. 예를들어 아이콘 위에 아이콘을 겹치게 하고싶다면

해당 위젯을 사용하면 된다.

이런 식으로 하면된다. 

그런데 해당 결과물은 아래 아이콘만 화면에 보이게 된다.

그 이유는 사이즈도 같고 위치도 같기 떄문이다.

따라서 사이즈를 조절하거나

위치를 변경해주면 되는데

위젯의 위치를 변경할때 사용되는 위젯이 바로 Positioned Widget이다.

이 처럼 작성하면

노란색 아이콘은 회색 아이콘보다 오른쪽에서 30정도 더 움직여있을것이다.

경우에 따라 아이콘이 영역에 벗어나 짤리는 경우가 발생하기도 하는데 이럴떄는

Stack 안에 clipBehavior: Clip.none을 지정해주면

짤리는 부분없이 그려줄수 있다.

추가적으로 Positioned는 꼭 Stack으로 감싸줘야한다.