[flutter] Expanded / singleChildScrollView (with.constraintsError)

오늘은 expanded, singleChildScrollView widget에 대해서 적어보려고 한다.

그 전에 우선 expanded를 사용하게 된 계기부터 적어보려고 한다.
이번에는 Listview builder를 이용해서 받아온 list들을 보여주려고 했는데, 빌드를 하니 아래와 같은 에러가 발생했다.

error가 난 곳을 console로 확인해 보니 listview의 부모 요소인 colum 위치에서 오류가 난 것을 확인할 수 있었다.

contraintsError가 뭔가 하니..

Flutter의 ConstraintsError는 일반적으로 위젯의 크기와 위치에 대한 제약 조건을 지정할 때 발생하는 오류입니다.
Flutter에서 위젯을 구성할 때, 다른 위젯과의 관계나 부모 위젯의 크기에 따라 해당 위젯의 크기와 위치를 지정할 수 있습니다.
ConstraintsError는 다양한 상황에서 발생할 수 있습니다. 예를 들어, 부모 위젯의 공간이 충분하지 않거나 지정된 제약 조건에 위배되는 경우에 발생할 수 있습니다.
또는 위젯의 크기를 지정할 때 최소 또는 최대 크기 제약 조건을 위반하는 경우에도 발생할 수 있습니다.
- chat GPT

위 chat GPT 설명에서 나와있듯이 일반적으로 위젯의 크기와 위치에 대한 제약 조건을 지정할 때 발생하는 오류라고 한다.

그렇다면 화면의 위젯에 크기를 지정해줘서 출력시켜보면 어떨까? 라는 생각이 들었고, spacer widget처럼 화면의 공간을 나눠가지는 Expanded widget이 있다는 것을 찾아 이용해보았다.

빌드는 됐지만 문제는 계속됐다..
사이즈가 맞았을 때는 아무 문제 없었지만 아래와 같이 화면이 넘치니까 아래와 같이 경고가 발생했다.

혹시나 해서 한 줄을 더 넣어봤더니 스크롤이 생기며 밑으로 내려가는 것이 아니라 간격이 좁아지면서 동일한 오류가 발생했다.

expanded의 문제는 전체 영역 크기가 고정되어 있기 때문에 새로운 widget 이 들어오면 한정된 공간을 나눠가지기 때문에 간격이 더 좁아질 뿐 본질적인 문제가 해결되지 않는다는 것,,,

이를 해결하기 위해 expanded widget을 없애고 sizebox로 크기를 지정해 준 다음 singleChildScrollView 를 이용하여 스크롤이 가능하도록 구현했다.
(singleChildScrollView는 자식 위젯을 스크롤 할 수 있도록 해주는 위젯이다)

 

아래는 singleChildScrollView를 적용한 코드이다

return SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 20),
                    const Text(
                      'Popular Movies',
                      style: TextStyle(
                        fontWeight: FontWeight.w900,
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(height: 300, child: makeList(popularInnerList)),
                    const Text(
                      'Now in Cinemas',
                      style:
                          TextStyle(fontWeight: FontWeight.w900, fontSize: 20),
                    ),
                    // Expanded(child: playingList(playingInnerList)),
                    SizedBox(height: 250, child: playingList(playingInnerList)),
                    const Text(
                      'Coming Soon',
                      style:
                          TextStyle(fontWeight: FontWeight.w900, fontSize: 20),
                    ),
                    SizedBox(
                      height: 300,
                      child: comingList(comingInnerList),
                    ),
                  ],
                ),
              );

화면 넘침도 해결되고 스크롤도 가능하도록 구현 완료 !

 

expended도 분명 공간을 주는 것에 있어서는 좋은 위젯이지만 이렇게 스크롤을 함께 이용해야 하는 순간에는 적합하지 않을 수 있다고 생각했다.

역시 상황에 맞는 위젯을 찾아 쓰는 것이 매우 중요 ..!

---

참고

https://api.flutter.dev/flutter/widgets/Expanded-class.html

https://happyhaelee.tistory.com/46

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html