[Flutter] Dialog에 SingleChildScrollView 사용하기

현상

Dialog 위젯 안에 있는 SingleChildScrollView 영역이 디바이스 사이즈를 벗어나는 경우 사이즈 오버로 에러가 뜨는 모습을 확인했다.

 

해결

👉 SingleChildScrollView를 Flexible로 감싸기

SingleChildScrollView를 Flexible로 감싸주어 디바이스 사이즈 영역에 알맞게 사이즈가 맞춰지고 Dialog 내부에 스크롤도 잘 작동했다. 

Dialog(
   Flexible(
      SingleChildScrollView(
         ///이 안에 Dialog Component를 넣어주세요:)
      );
   );
);

참고사이트 입니다 https://github.com/flutter/flutter/issues/23555

 

⚠️ 실수

처음엔 Expanded를 사용하여 디바이스 세로 길이에 꽉찬 Dialog가 되었었다. Expanded는 화면 전체에 딱 맞는 확장기능을 가지고 있다는 걸 잊고서..

참고자료를 보고 Flexible을 사용하였는데 마침 Flexible에 fit : flexFit.tight가 들어있었다;;; 그래서 Expanded 처럼 화면 세로 길이에 딱 맞게 늘어나는 현상이 생겼다. flexFit.tight를 삭제했더니 늘어나지 않았다.

* fit: flexFit.tight 는 flex 너비가 전체 사이즈에 딱 맞게 늘이는 역할을 한다. 이 부분은 좀 더 심도있게 Flexible을 공부해야할거같다.

Flexible(
    fit: flexFit.tigit,
    child: SingleChildScrollView(
       );
);