8. Positioned.fill 버그 발견 및 해소

참고 자료

찾았다면 이렇게 까지 구차하게 하지는 않았을 텐데 말이죠

 

---

 

과정

build만 하면 귀신같이 blank가 뜨며 동작이 되지 않는 문제가 있었다.

flutter run에서 정상 동작 하길래, build에서도 똑같이 돌겠지? 라는 안일함에 문제가 생겼다.

 

그리고 google, github에서 나는 일단 답을 찾지 못 했다.

상상을 초월하는 이슈의 개수

 

일단 버그를 만들 가능성이 있는 리스트를 만들어 봤다.

• 특정 Library가 web-build시 문제를 야기한다.
• Chrome에서 문제가 일어난다.
• Window에서 문제가 일어난다.
• Image의 용량, encode-decode 등의 옵션이 문제를 야기한다.
• flutter - web이 문제를 야기한다.

 

이제는 환경도 깔끔하게 만들었겠다, 대장정을 떠나보자!

 

---

 

Chrome에서 문제가 일어난다?

(좌) firefox / (우) chrome 

화면이 나오지 않는 문제는 browser 때문은 아니였다...

근데 비율적인 문제는 내 Chrome의 문제 였다. 다른 PC로 접속하면 문제가 없다.

내 Chrome version이나, 설정에서 뭔가 문제가 있는 것 같다.

fire-fox로 테스트 환경을 바꾼다. blank 화면 버그는 browser와 관련이 없다.

 

---

 

특정 Library가 web-build시 문제를 야기한다?

(좌) 디렉터리 / (우) pubspec.yaml

현재 코드에 들어간 모든 라이브러리를 하나씩 제거하면서 테스트를 전부 다 해봤다.

특정 라이브러리를 뺀다고 문제가 해결되지 않았다.

 

---

 

Window에서 문제가 일어난다?

이거는 확률이 좀 높다고 생각했다. Window에서 개발하는게 특정 영역에서 취약한 것은 사실이니까.

그래서 지난 포스트에 있듯이, debian기반 이미지위에 환경을 구축해서 테스트 했다.

결과는?  Window는 죄가 없었다. 의심해서 미안.

 

---

 

Image의 용량, 옵션등이 문제를 야기한다?

용량이 적은 이미지로도 대체 해 보고, png가 아닌 svg, jpeg등으로 테스트 해 봤다.

결과는? 이미지는 죄가 없었다. 의심해서 미안.

 

---

flutter - web에서 문제를 야기한다?

여기까지는 오고 싶지 않았는데 슬펐다.

그래도 어쩌겠는가, 기존 코드에서 모든 Widget를 하나씩 지워가며 테스트를 해 봤다.

생각없이 빌드를 하던 도중.. 

 

 

억겁의 시간 끝에 친구를 돌려 받았다...

 

아래의 코드는 위에서 보이는 main 이미지를 가지고 있는 widget이다.

반복패턴으로 위의 이미지를 background로 가지고, 그 위에 화살표 이미지를 얹은 형태의 widget이다.

return Stack(
      children: [
        ShakeWidget(
          shakeConstant: ShakeSlowConstant1(),
          autoPlay: false,
          enableWebMouseHover: true,
          child: SizedBox(
            width: screenWidth,
            height: screenHeight,
            child: Positioned.fill(
              child: Image.asset(
                'assets/images/album_all.png',
                repeat: ImageRepeat.repeat,
              ),
            ),
          ),
        ),
        Positioned(
          top: screenHeight / 2,
          left: screenWidth / 2 - arrowWidth / 2,
          child: arrowImage,
        ),
      ],

문제가 발생한 부분은 Positioned.fill이다.

Positioned.fill은 full-size에 맞게 배치하는 역할을 한다.

이 녀석을 지우니까 정상 동작을 했다...!

 

---

 

왜 문제가 발생했을까에 대하여

확신은 없지만 다음과 같이 생각한다.

flutter run -d chrome은 동적으로 실행되기 때문에 "정확한 view-size가 만들어진다." 그래서 Positioned.fill을 써도 문제가 발생하지 않는다.

 

flutter build는 정적으로 실행되기 때문에 "넉넉한 view-size가 만들어진다." 그래서 Position.fill은 하면 문제가 발생한다.

 

근거는, 비정상적으로 길었던 스크롤 바.

스크롤 바가 수십배로 길어졌었다.

그 이유가 아마 view-size를 너무 많이 차지해서 아닐까? 라는 의심이 이제야 든다.

 

이는 나의 추리에 불과하다.

Flutter 고수를 찾아서 이게 왜 그런지 물어 봐야한다.