Flutter: ‘decoration != null || clipBehavior == Clip.none’: is not true. のエラー

結論：「decoration:」に、引数なしの「BoxDecoration」を設定する

2022/6/16　Flutter エラー・バグ日記

Container内に、Containerよりも大きいサイズの画像を配置し、はみ出た部分をカットすべく「clipBehavior: Clip.antiAlias」を設定したところ、表題のエラーが発生。

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかは載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

具体的には、下記コードのように、Containerにサイズ規定した上で、「Transform.scale」コンストラクタを用いて画像を拡大し、Containerのサイズよりも大きく表示させた。

Container(
                width: 200,
                height: 300,

                // 拡大してはみ出した部分をカットする
                clipBehavior: Clip.antiAlias,

                child: Transform.scale(

                    // 1.8倍で表示
                    scale: 1.8,

                    child: Image.network(

                      // サンプル画像
                      "https://picsum.photos/250?image=9",

                      // 親Containerの範囲内に収まるように広げる（倍率1.0のとき）
                      fit: BoxFit.contain,
                    ),
                  ),
              ),

はみ出た部分は、下記記事を参考にさせていただき、Containerの「clipBehavior:」プロパティを「Clip.antiAlias」に設定することで、カットすることにした。

Containerから画像がはみ出ないようにしたい｜Flutter逆引き辞典

しかし、ビルドすると、以下のエラーが発生。

'package:flutter/src/widgets/container.dart': Failed assertion: line 273 pos 15: 'decoration != null || clipBehavior == Clip.none': is not true.

メッセージにある「Container」クラスのソースコードである「container.dart」の273行目を見てみるが、同じ内容がassertとして設定されているだけだった。

メッセージを見るに、「decoration」プロパティがnullでない、もしくは、「clipBehavior」プロパティが「Clip.none」である必要があるとのこと。

理由がわからないので、さらにソースコード内で「clipBehavior」プロパティのソースコードを見てみると、緑文字の説明書きに、下記記載があった。

/// The clip behavior when [Container.decoration] is not null.
（clipBehaviorは、Container.decorationがnullでないときのclip（カット）の挙動を表すもの）

/// Defaults to [Clip.none]. Must be [Clip.none] if [decoration] is null
（デフォルトは「Clip.none」であり、「decoration」の設定が無いなら、「Clip.none」にしなければならない）

この説明内容とエラーメッセージからすると、「clipBehavior」を「Clip.none」以外に設定したいならば、「decoration」プロパティを何らか設定する必要がある、ということだと思われる。

このエラーに対する対応事例が載っていないかと、エラーメッセージでググってみるも、ヒットする記事は見つからず。。

しかたなく、エラーメッセージどおり対応しようとしたが、装飾系（decoration）については、特に設定したい内容はなかったので、下記コードのように、「decoration」プロパティに、引数なしの「BoxDecoration」のコンストラクタを設定してみた。

※「BoxDecoration」は「required」（必須）の引数が無いため、引数がなくてもエラーにならない。

Container(

                // ↓これを追加
                decoration: BoxDecoration(),

                width: 200,
                height: 300,
                clipBehavior: Clip.antiAlias,
                child: Transform.scale(
                    scale: 1.8,
                    child: Image.network(
                      "https://picsum.photos/250?image=9",
                      fit: BoxFit.contain,
                    ),
                  ),
              ),

これでビルドすると、確かにエラーは発生せず、はみ出た部分をClip（カット）して表示できた。

カットする場合は、残される領域の装飾を何らか規定しておく必要がある、というルールだと理解したが、

「BoxDecoration」に引数が無いのに、なぜ装飾を規定したことになるの？

と疑問に感じる。

そこで、「BoxDecoration」のソースコードを見てみると、引数指定がない場合、「shape」という引数だけは「BoxShape.rectangle」が設定される（Containerの形を四角形にする）ことになっていた。

そのため、引数無しで「BoxDecoration()」を設定するだけでも

円形ではなく、あくまで四角形にカットすれば良いんだね

を明確化できるので、「Clip.antiAlias」を実行できるようになる、というロジックだったと理解。