flutter bottom overflowed by pixels

플러터 screen에서 bottom overflowed by ~~ pixels라고 뜰 때가 있다. 노란색과 검정색의 빗금이 마구 쳐져있다.

이것을 해결하기 위한 방법은,

 

Scaffold 하위에

resizeToAvoidBottomInset : false,

body부분에

 

SingleChildScrollView

 

를 넣어주면 된다.

 

resizetoAvoidBottomInset에 대해서 더 알아보자면,

 

이 값이 true 일 경우에는, body와 scaffold의 위젯들이 키보드 위에 존재하지 않도록 하는 것이다. 즉 키보드가 나타나면 이 값들이 키보드 밑에 존재하지 않도록 쭈욱 밀린다는 것이다. 따라서 이 값을 false로 설정해야 값들이 밀리지 않고 overflow 표시가 나지 않는다.

 

아래는 코드이다.

class MonthScreen extends StatelessWidget {
  const MonthScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset : false,
        body: SingleChildScrollView(child:SafeArea(
            child: Column(
      children: [
        SizedBox(height: 8.0),
        Tablecalendar(),
      ],
    ))));
  }
}

 

다음은 에러난(?) 화면이다.

밑에를 보면 빗금 표시가 나있다.

resizetoAvoidBottomInset, singlechildscrollview를 추가해주고나니 bottom overflow가 사라졌다!

 

다음은 resizetoAvoidBottomInset property에 대한 설명이다...

https://api.flutter.dev/flutter/material/Scaffold/resizeToAvoidBottomInset.html

resizeToAvoidBottomInset property - Scaffold class - material library - Dart API