Flutter - AlertDialog 안에 ListView 넣기 그리고 오류 해결하기

이미지 출처: Flutter API 가이드 유투브 캡쳐

 

Dialog는 앱개발을 하면서 가장 흔하게 자주 쓰이는 Widget 중에 하나다.

그리고 Dialog안에 표시할 컨텐츠들도 무궁무진하다.

 

통상적인 알림정도라면 문제가 없지만 뭔가 콘텐츠를 표시해 주고 선택이나 입력을 받으려면 결국 ListView가 필요해진다.

그렇다고 또 꼭 매번 모든 앱을 만들때마다 복잡한 구조의 Dialog를 띄울 일은 또 없기에...

 

Dialog안에서 ListView를 사용할때마다 접하는 오류들에 대해서 trouble-shooting 했던 내용들을

다음부터는 한번에 성공할 수 있도록 잘... 정리해 본다.

 

오류 1. ListView니까 Expanded로 감싸줘야 하겠지??

Widget makeList() {
    return Expanded(
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
        return Padding(
          padding: appPadding.all8,
          child: InkWell(
            child: Container(

 

 

Expanded로 감싸줘야하는 상황과 아닌 상황을 명확히 구분하면 좋겠지만 아직 내공이 부족한 모양이다;;;

AlertPopup은 내부구조를 제대로 연구하거나 학습하지 않고 바로 덤벼서 그런 걸 수도 있다.

 

" Incorrect use of ParentDataWidget. " 에러가 뜬다;;

 

이유를 찾아보니 Expanded는 Column 같은 Flex한 Widget들안에 child widget을 위치시킬 때 주로 사용한다고 한다.

AlertDialog Content영역은 Flex한 Widget들이 감싸고 있는 게 아닌가 보다.

 

Guide to Incorrect Use of ParentDataWidget in Flutter

 

오류 2. 그렇다면 shrinkWrap을 설정해 줘야되나??

Widget makeList() {
    return ListView.builder(
        shrinkWrap: true,
        itemCount: items.length,
        itemBuilder: (context, index) {
        return Padding(
        padding: appPadding.all8,
        child: InkWell(
           child: Container(

 

Scafford의 body안에 widget들 사이에 위치하는 경우에는 흔히 이 방법으로 해결을 해주곤 했었다.

그런데 해결이 역시나 되지 않는다;;;

 

이번에는 "The relevant error-causing widget was: " 라는 에러가 뜬다.

 

나중에야 Flutter API문서를 확인해 보니 아래와 같은 설명이 되어 있었다.

핑계긴 하지만 당장 개발할 시간도 부족해서 API문서 볼 시간이 없었다....ㅠㅠ (그냥 다 내 잘못.)

 

다이얼로그가 contents 사이즈에 맞게 동작하려는 특성이 있으니... ListView 같은 걸 쓰려면 크기를 지정해라!!

Because the dialog attempts to size itself to the contents, the content must support reporting its intrinsic dimensions. In particular, this means that lazily-rendered widgets such as ListView, GridView, and CustomScrollView, will not work in an AlertDialog unless they are wrapped in a widget that forces a particular size (e.g. a SizedBox).

 

AlertDialog class - material library - Dart API

 

SizedBox로 크기를 지정해서 오류 해결

결국 Flutter API가이드 문서와 관련 구글링을 통해서 해결방법을 찾았다.

방법은 Dialog안에 있는 ListView를 SizedBox나 Container등으로 명시적인 크기를 제한해줘야한다.

그리고 사이즈는 통상 많이 쓰는 double.infinite가 아니라 double.maxFinite로 해줘야 했다.

그렇게 아주 훌륭하게(?) 문제를 해결하고 해당 기능을 마무리해본다.

Widget makeList() {
   return SizedBox(
      width: double.maxFinite,
      child: ListView.builder(
        itemCount: branchNames.length,
        itemBuilder: (context, index) {
        return Padding(
          padding: appPadding.all8,
          child: InkWell(
            child: Container(

 

내가 격은 문제들을 모두 나열하고 해결방법도 줬던 medium.com의 글...

Listview doesn’t display in AlertDialog | A Flutter guide