[Flutter ❌] RenderFlex overflowed by Infinity pixels on the bottom.에러를 해결해보아요

 

ERRRRRRRRRRRRROR

픽셀 초과 에러가 자꾸 떴다,, 

플린이라서 뭐하나만 코드를 치면 에러난다..!😤

요 에러는 Column이나 Row위젯은 (기기)화면 크기를 벗어나는 UI를 작성할 수 없기때문에 발생한다.

 

그래서 두 가지 방법을 먼저 정의하면,

1. (Scroll이 필요시) Column의 경우 ListView로 변경해 스크롤이 되는 화면으로 변경

2. Expanded로 감싸거나 BoxSized로 크기 설정

---

이제 잘못된 부분을 하나씩 보며 해결해보겠습니다!

 

 

 

 

 

 

 

 

 

 

 

우선 코드를 설명하면,

왼쪽 main.dart의 InputWidgets클래스에서 반환한 Scaffold내에, TextField.dart 파일에서 만든 TextFields()클래스를 불러와 화면에 뜨도록 하였다.

 

 

 

그런데, 아래에서 보면, TextFields()클래스내에서도 scaffold를 넣어 그 안에서 위젯들을 구성했기때문에 발생한 error!!!

TextField.dart

 

그래서 TextField.dart의 scaffold만 Container로 바꾸고, 다시 실행해보아따!

와있.....!! 여전히 위의 에러와 함께 또 다른 문제가 있었다.

 

Unhandled Exception: Cannot hit test a render box with no size.

StackOverFlow 행님들의 답

 

Expanded로 해결!! 근데 Row위젯에서 수직배치를 하고 싶어 Column위젯으로 바꾸니까 다시 뜨는 에러,,,

(이부분은 왜그런지 아시는분 설명부탁드려요,,,ㅠ) ->자답: 새로 픽셀이 화면을 초과해서 column으로하면 에러

 

Flutter error:Failed assertion: line 1785 pos 12: 'hasSize'

비슷한 해결법 제시인데,, 다른 집을 찾아가보았다.

 내부 크기를 정해야한다는것!!

(Container의 경우 height와 width로, 기타 위젯의 경우 SizedBox최대 가로 크기 설정 필요)

 

처음에 감싸주었던 Expanded 위젯도 지우고, SizedBox로 Container를 감싸주었다. +width지정

import 'package:flutter/material.dart';

class TextFields extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //main.dart에 scaffold로 이 페이지를 감싸고 있음!! -> scaffold()안에 scaffold로 감싸면X: 'RenderFlex overflowed by Infinity pixels on the bottom.'요론 에러뜸
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            width: 400, //입력창 밑줄길이 조절
            child: Container(
              child: TextField(),
              padding: EdgeInsets.only(left: 20, bottom: 30), //아래 textfield와 간격
            ),
          ),
          SizedBox(
            width: 400,
            child: Container(
              child: TextField(
                  decoration: InputDecoration(
                labelText: '여기에 입력하세요',
              )),
              padding: EdgeInsets.only(left: 20, bottom: 30),
            ),
          ),
          SizedBox(
            width: 400,
            child: Container(
              child: TextField(
                decoration: InputDecoration(
                  labelText: '여기에 입력하세요',
                  border: OutlineInputBorder(),
                ),
              ),
              padding: EdgeInsets.only(left: 20),
            ),
          )
        ],
      ),
    );
  }
}

 

해결되어따,,, ㅠ

 

 

추가로 오늘 에러에 대해 쓰긴 했지만, TextField에 관해 만들었기 때문에 관련 링크!

https://api.flutter.dev/flutter/material/TextField-class.html

TextField class - material library - Dart API

 

 

---

웹과 다른것이 앱 화면상에서 픽셀이나 크기부분이 안맞으면 에러로 띄워버리는 듯,,,,보이지 않으니 뭔가 수정하기도 어렵당ㅠㅠ 아직 코드도 제대로 못짜봤는데 화면 한번 띄워보자고 허우적 거린 하루.ㅋㅋㅋ😥 주말 빠이....