Container, SizedBox, Stack, Column, Row의 특징
Container
크기 지정이 없을 경우 차지할 수 있는 최대의 범위를 가져간다.
SizedBox
크기르 지정하지 않을 경우 Child를 나타낼 수 있는 최소한의 layout을 가져간다.
Stack
자식들중 가장큰 크기에 맞춘다.
여러 자식들의 Alignment를 다 다르게 주고 싶어서 Align으로 감싼뒤 alignment property에 원하는 Alignment(x, y)를 넣어 보았는데 x축으로는 적용이 되는데 y축으로는 alignment가 적용이 되지 않는다.
Stack에 api doc를 보았더니 아래와 같은 내용이 있다.
https://api.flutter.dev/flutter/widgets/Stack-class.html
Stack class - widgets library - Dart API
A widget that positions its children relative to the edges of its box. This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom. Ea
api.flutter.dev
그럼 Stack안에서 LayoutBuilder를 이용해서 contraint로 size를 받아서 그 값을 기반으로 relative positiond을 계산한뒤 children을 배치하는 class를 만들어야 하거나, 위의 api doc에서 말한거처럼 CumstomMultiChildLayout을 사용해야 할 것같다.
구글링으로 찾아보니 나와 같은 문제를 발견한 사람이 있지만 유익한 답변은 아직없다.
https://stackoverflow.com/questions/61984635/alignment-on-y-axis-doesnt-respond-flutter
Alignment on y-axis doesn't respond flutter
I want a CircleAvatar over an Image so I created a stack, its children are an Image and an Align (CircleAvatar inside). All seems works but I can't move the CircleAvatar on the y-axis, only on the x-
stackoverflow.com
그러다 찾은게 align_positioned 라는 위젯 패키지인데, 만드사람 말로는 stack에서도 다 된다고 한다.
https://pub.dev/packages/align_positioned
align_positioned | Flutter Package
When your desired layout or animation is too complex for Columns and Rows, this widget is a life saver. It lets you declaratively position/size its child in complex ways.
pub.dev
적용해봐야겠다.
Column
Row