Stack 안에서 pixel단위가 아닌 percentage(ratio)로 위젯을 위치시키는 방법

Stack 안에서 위젯의 위치를 width와 height로 설정할 때 현재 가능한 영역 내에서 비율로 위치시키는 방법이 궁금했다. 

width는 왼쪽에서부터 30% 오른쪽으로, height는 위쪽(top)에서부터 20% 아래쪽으로 처럼 말이다. 

 

구글링을 했더니 stackoverflow에 방법이 있었다. 질문은 2017년에 올라온 것이지만, 답변에는 2021년에 올라온 것도 있어 참고할만 하다. 이와중에 이 질문자가 Remi Rousselet 이다~! 답변도 자기가 해놨네. 몰라서 질문했다기보다 알려주려고 한건가보다

 

Positioned.fill 과 LayoutBuilder를 이용해서 stack 아래에서 사용가능한 영역을 알아낸 뒤에,  원하는 위치에 위젯을 두기 위해 padding으로 나머지 공간을 점유하는 방식으로 해결하고 있다. 

 

2019년에 추가로 달린 댓글에는, Container의 alignment 파라미터를 이용해서 Alignment.lerp( ) 메소드를 넘겨줘서 가능하다는 내용도 있다. 

 

2021년에는 FractionalOffset과 FractionallySizedBox 를 사용하면 간단하게 해결 가능하다는 글이 있다. 

 

 

참고 자료는 아래 링크~!

https://stackoverflow.com/questions/46637197/position-widget-in-stack-with-percent

Position widget in stack with percent

 

여기 대답 중에 FractoinalOffset, FractionallySizedBox를 사용하는 방법이 간단해 보인다. 

 

그리고 LayoutBuilder를 사용할 경우 Stack의 밖에서 감싼뒤 Stack 내부의 위젯들을 위치시킬때 Transform.translate를 사용하면 된다고 한다.