グレーブロック問題の解決

はじめに

Flutter 開発を中断した原因の一つ「グレーブロック問題」が解決した

環境

Windows 11 Home
Flutter 3.27.1 channel stable

問題点

Debug Build ではレイアウトが正しく表示されるが、Release Build ではグレー表示でヌリカベ状態になる
Flutter バージョンがいくつからかこの問題が発生するようになった

デバッグビルドの結果
build_debug

リリースビルドの結果
build_release

グレー塗り状態で全く表示されない

解決

まずは、問題を引き起こしているレイアウト定義を引き算で外していく

Center(
    child: Expanded(
        child: Padding(
            padding: EdgeInsets.all(4),
            child: FocusScope(node: FocusScopeNode(),
                child: RawKeyboardListener(
                ),

上の問題が発生するレイアウト定義から、Expanded 定義を外すことで解決した！

これで終わりでは、原因は解ったが理由はわからないまま…

理由は？

実は、デバッグ出力に下のような警告が出力されている

======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type BoxParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Center widget.

こんなメッセージ出しても、Debug Build ではしれっと表示できているので見過ごしがち

キーワードでネット検索すると下の記事が見つかった

https://qiita.com/Ricky-yu/items/806ff7f8ba35b6abca5d
Incorrect use of ParentDataWidget（ParentDataWidget の不適切な使用エラー）

ここで理由と対策が丁寧に説明されている

要約すると、Expanded を使う場合、親レイアウト定義に制限がありますよ！ということ

まとめ

解決したけど、不満は残る結果！
Debug Build で問題が発生しないように見えて、Release Build で問題が表面化するのでは原因究明の手間がハンパない
レイアウト定義組み合わせの罠はもう少しわかりやすくできるのでは！？

これまで、動作確認時表示できてれば問題ないでしょ！でログ出力なんて確認していなかったが、少し目を向けようと反省

タイトルとURLをコピーしました