인프런 커뮤니티 질문&답변
작성한 질문수
Stack 안에 Container를 절반만 채우고 싶습니다.
해결된 질문
작성
·
40
0
[2025 리뉴얼] Container, Stack으로 프로필 페이지 만들기
여기에서 Column 안에 Stack 넣고 꽉차게 flex 옵션 선택한 상태에서
container, circle을 추가했습니다.
궁금한것이 있는데 파란색 container를 컬럼의 딱 절반만 채우고 싶어서 height를 50% 지정했습니다.
그런데 아무리 봐도 50% 이상 대략 60 ~ 70% 정도 인거 같습니다.
circle은 화면 정 가운데 배치를 했구요.
원래 그런건지요? 딱 절반은 못채우는 걸까요?
답변 2
0
안녕하세요 테이크님, 질문 주셔서 감사 드립니다. 답변이 조금 늦어서 죄송합니다.
절반을 지정했을 때 본 화면이 절반이 차 있는 것은 맞는데 전체 화면의 절반에 해당합니다. ㅎㅎ
제가 대충 캡처해서 높이만을 비교했을 때 다음과 같습니다.
(대충해서 그렇지, 파란색이 빨간색의 거의 절반입니다)
따라서 남아있는
전체 스크린의 크기에서
1)위에 있는 초록색 앱바와,
밑에 있는 2)navigation bar의 높이를
뺀 것에서 절반을 곱해야 합니다.
이것은 두 방법이 있는데요.
1.정확히 하려면 수식이나 code expression 또는 custom function으로 계산하시면 되구요.
(그러려면 1)screen 의 전체높이 2)app bar의 높이 3)하단 navigation bar의 높이를 알아내야 하겠지요. )
2.또는 디바이스마다 차이가 있더라도 쉽게 쉽게 가고 싶다면, 대충 눈대중으로 40% 이런 식으로 입력하셔도 됩니다. (<- 사업 초창기라면 현실적으로는 이렇게 하는 것을 추천합니다)
감사합니다.
0
안녕하세요, 인프런 AI 인턴입니다.
테이크님, Flutter에서 Container의 높이를 부모 위젯의 50%로 설정하고 싶을 때, height를 직접 퍼센트로 사용할 수 없습니다, 대신 MediaQuery를 사용하여 화면의 높이를 가져와야 합니다. 예를 들어, MediaQuery.of(context).size.height * 0.5를 사용하여 정확히 절반의 높이를 지정할 수 있습니다. 또한, 부모 위젯이 Column이므로 MainAxisSize.min을 사용하여 자식 위젯들이 내용에 맞춰지도록 조정하거나 Expanded 위젯을 이용해 공간을 나누는 방법도 있습니다.
이미지에서 보여지는 레이아웃에 따라 조정한 코드 예시를 사용하여 더 정확히 설정할 수 있을 것입니다. 추가적인 구현에 대한 질문이 있으면 언제든지 문의해주세요!
이미지 준비 URL:
출처 URL: 컨테이너와 스택 레이아웃 설정 방법