Stack 안에 Container를 절반만 채우고 싶습니다.

Question

[2025 리뉴얼] Container, Stack으로 프로필 페이지 만들기 여기에서 Column 안에 Stack 넣고 꽉차게 flex 옵션 선택한 상태에서 container, circle을 추가했습니다. 궁금한것이 있는데 파란색 container를 컬럼의 딱 절반만 채우고 싶어서 height를 50% 지정했습니다. 그런데 아무리 봐도 50% 이상 대략 60 ~ 70% 정도 인거 같습니다. circle은 화면 정 가운데 배치를 했구요. 원래 그런건지요? 딱 절반은 못채우는 걸까요?

ilgyu865859 · Answer

안녕하세요 테이크님, 질문 주셔서 감사 드립니다. 답변이 조금 늦어서 죄송합니다.   절반을 지정했을 때 본 화면이 절반이 차 있는 것은 맞는데 전체 화면의 절반에 해당합니다. ㅎㅎ 제가 대충 캡처해서 높이만을 비교했을 때 다음과 같습니다. (대충해서 그렇지, 파란색이 빨간색의 거의 절반입니다)   따라서 남아있는 전체 스크린의 크기에서 1)위에 있는 초록색 앱바와, 밑에 있는 2)navigation bar의 높이를 뺀 것에서 절반을 곱해야 합니다.   이것은 두 방법이 있는데요. 1.정확히 하려면 수식이나 code expression 또는 custom function으로 계산하시면 되구요. (그러려면 1)screen 의 전체높이 2)app bar의 높이 3)하단 navigation bar의 높이를 알아내야 하겠지요. )   2.또는 디바이스마다 차이가 있더라도 쉽게 쉽게 가고 싶다면, 대충 눈대중으로 40% 이런 식으로 입력하셔도 됩니다. (<- 사업 초창기라면 현실적으로는 이렇게 하는 것을 추천합니다)   감사합니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 테이크님, Flutter에서 Container 의 높이를 부모 위젯의 50%로 설정하고 싶을 때, height 를 직접 퍼센트로 사용할 수 없습니다, 대신 MediaQuery 를 사용하여 화면의 높이를 가져와야 합니다. 예를 들어, MediaQuery.of(context).size.height * 0.5 를 사용하여 정확히 절반의 높이를 지정할 수 있습니다. 또한, 부모 위젯이 Column 이므로 MainAxisSize.min 을 사용하여 자식 위젯들이 내용에 맞춰지도록 조정하거나 Expanded 위젯을 이용해 공간을 나누는 방법도 있습니다. 이미지에서 보여지는 레이아웃에 따라 조정한 코드 예시를 사용하여 더 정확히 설정할 수 있을 것입니다. 추가적인 구현에 대한 질문이 있으면 언제든지 문의해주세요! 이미지 준비 URL: 출처 URL: 컨테이너와 스택 레이아웃 설정 방법