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
Let's say I want to position a widget inside a Stack but with a percent of the Stack position instead of a fixed size. How to do that in flutter ? I'd expect that the Positionned.fromRelativeRect
stackoverflow.com
여기 대답 중에 FractoinalOffset, FractionallySizedBox를 사용하는 방법이 간단해 보인다.
그리고 LayoutBuilder를 사용할 경우 Stack의 밖에서 감싼뒤 Stack 내부의 위젯들을 위치시킬때 Transform.translate를 사용하면 된다고 한다.