인프런 커뮤니티 질문&답변
TabBarView와 BottomNavigation 및 table_calendar 같이 사용할 시 화면에 안나오는 문제
작성
·
196
·
수정됨
0
캘린더 예시에서 캘린더 라이브러리와 배너랑 스케쥴카드를 한 화면에 넣잖아요. 바텀네비게이션바와 충돌이 나는 건지.. Column(children:)으로 감싸면 화면 에러가 나고 SafeArea/Container(child: )로 감싸면 잘 나옵니다.
탭바뷰
List<Widget> renderChildren() {
return [
RuleScreen(),
TechniquesScreen(),
TotalCalendarScreen(),<-- 이부분
CalculateScreen(),
];
}TotalCalendarScreen() 잘 나오는 경우
class TotalCalendarScreen extends StatefulWidget {
@override
State<TotalCalendarScreen> createState() => _TotalCalendarScreenState();
}
class _TotalCalendarScreenState extends State<TotalCalendarScreen> {
DateTime selectedDate = DateTime.utc(
DateTime.now().year,
DateTime.now().month,
DateTime.now().day,
);
void onDaySelected(DateTime selectedDate, DateTime focusedDate) {
setState(() {
this.selectedDate = selectedDate;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: MainCalendar(
onDaySelected: onDaySelected,
selectedDate: selectedDate,
),
),
);
}
BOTTOM OVERFLOWED BY infinity PIXELS
return Scaffold( body: SafeArea( child: Column( children: [ <-- 리스트로 감싸면 에러납니다. MainCalendar( onDaySelected: onDaySelected, selectedDate: selectedDate, ), SizedBox(height: 8), TodayBanner(selectedDate: selectedDate), SizedBox(height: 8), ScheduleCard(startTime: 12, endTime: 14, content: 'content'), ], ), ), );
어떻게 해결하면 좋을까요?
답변 3
1
플러터에서 Column 위젯 내에 여러 자식 위젯을 배치할 때, 자식 위젯들이 화면 크기를 넘어서 확장될 수 있는 경우 Column은 모든 공간을 차지하려고 하기 때문에 위와 같은 오류가 발생합니다.
라는 AI 인턴의 조언 덕분에 문제 해결했습니다. Expanded() 두개로 나눠서 감쌌더니 해결했습니다.
0
0
안녕하세요, 인프런 AI 인턴입니다.
정세권님의 질문에 대해 적절한 해결 방안을 제시하는 기존 답변을 찾았습니다. 단, 직접적으로 BottomNavigationBar와 TabBarView 충돌 상황에 대해 언급된 것은 아니지만, Column 내용이 화면을 벗어나는 문제에 대한 일반적인 해결책을 제공합니다. 질문하신 Column 사용 시 ‘BOTTOM OVERFLOWED BY infinity PIXELS’ 오류를 해결하는 데 도움이 될 것입니다.
플러터에서 Column 위젯 내에 여러 자식 위젯을 배치할 때, 자식 위젯들이 화면 크기를 넘어서 확장될 수 있는 경우 Column은 모든 공간을 차지하려고 하기 때문에 위와 같은 오류가 발생합니다. 특히 ListView나 MainCalendar(스크롤 가능한 위젯이 포함된 경우)와 같이 자체적으로 스크롤 가능한 위젯을 포함할 때 이런 문제가 자주 발생합니다.
해결 방안으로는 Flexible 또는 Expanded 위젯을 사용하여 Column 내부의 스크롤 가능한 위젯들이 차지할 수 있는 공간을 동적으로 조정할 수 있습니다.
아래는 유사한 문제에 대해 안내된 기존 답변 링크입니다:
- “ListView 크기 오류”에서
ListView를Column내에서 사용할 때 생기는 비슷한 문제에 대한 해결책을 찾을 수 있습니다. 비록ListView와MainCalendar는 다른 컨텍스트에서 사용되는 위젝이지만,Column내에서 위젯이 화면을 넘어서 확장되는 문제를 해결하는 방법에 관한 일반적인 해결책을 제공합니다.
질문에 제시된 오류와 유사하게, Column 내 스크롤 가능한 위젯을 사용할 때, Expanded나 Flexible을 사용하여 대응해 볼 수 있습니다. 예를 들면, MainCalendar 위젯을 Expanded로 감싸 화면에 남은 공간을 자동으로 채우도록 설정할 수 있습니다. 이렇게 하면 Column 내에서 스크롤 가능한 위젯을 올바르게 렌더링하며, 화면 범위를 넘어서지 않게 할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.





