【Flutter】リリースビルドだとグレー画面が表示されていた件(Stack)

Flutterで開発していたら、デバッグビルドだと正常に表示されるのに
リリースしたアプリだとグレー画面が表示されてしまっていた。

原因はStackでの制御の問題だった!!知見をまとめておく。
ちなみにStackOverFlowに同じ記事あった。

スクショ比較

デバッグ	リリース

ソースコード

実際のソースコードは以下。原因はStackとAnimatedContainerの前に
Positionedを設定していたのが原因だった!!

SizedBox(
          height: oneThirdOfTheHeight,
          child: Stack(
-              fit: StackFit.expand, // グレー画面の原因
              alignment: Alignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // ドア・左
-                    Positioned(
-                      left: 0, // 左端に配置
                      child: AnimatedContainer(
                        duration: Duration(milliseconds: time),
                        curve: Curves.easeInOut,
                        // 滑らかな動き
                        transform: Matrix4.translationValues(_right, 0, 0),
                        // X軸に移動
                        child: Positioned(
                          left: 0, // 左端に配置
                          child: Image.asset(
                            selectDoor.doorLeftImage,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
-                    ), 
              ]),
        ),

Stackのパラメータにfit: StackFit.expandがあるが、これのせいで
レイアウトを重ねる領域が全体に拡張されていたためグレー画面になっていた。

また今回は画像を移動させるが、AnimatedContainerだけで十分だった。
Positionedで初期状態の表示位置を指示していたが、それだと移動が適用されなかった。
ChatGPTに聞いて実装したが、やっぱ鵜呑みはダメだね。。

まとめ

別記事でリリースビルドで確認する方法もまとめておくが、
開発中のデバッグビルドで問題なくてもリリースビルドで大丈夫なのか精査する必要があることは勉強になった！

Containerを重ねる→ Stack
Containerの移動　→AnimatedContainer
と即座に置き換えできるが、それを鵜呑みにせずちゃんと精査して実装する必要があると思った。

　
【最後に】
今日がプロ野球開幕の日！！
最近買ったオレンジのジャンパー、野球の時は着れないと思った。
ヤクルトファンなので、、特に巨人戦😂😂