[Flutter]Cannot provide both a color and a decoration To provide both, use “decoration: BoxDecoration(color: color)”.の解決ほ

Flutter

2021.10.31

FlutterでContainerを使っていると、急に「Cannot provide both a color and a decoration To provide both, use “decoration: BoxDecoration(color: color)”.」というエラーが出ました。

このエラーはどうすれば解決できるのでしょうか？

原因

このエラーは、Containerの引数「color」とBoxDecorationを同時に使っているからです。

同時に使っていることが原因なので、引数「color」を指定し、何も設定していないBoxDecorationを引数「decoration」に指定するだけでエラーになります。

例えば、以下のコードは、エラーになります。

Container(
  decoration: BoxDecoration(),
  color: Colors.yellow,
),

解決方法は、Containerの引数「color」を消し、BoxDecorationの引数「color」を使うことです。

同時に使っていることが問題なので、引数「color」もしくはBoxDecorationのどちらかを消さなければいけません。

ですが、実はBoxDecoration自体に「color」という引数があり、この引数で色を設定できます。

Container(
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    color: Colors.yellow,
  ),
),

なので、Containerの引数「color」を削除し、BoxDecorationの「color」で色を設定するのが解決方法となります。