Cannot provide both a color and a decorationの解決方法【2025年最新版】

エラーの概要・症状

このエラーメッセージ「Cannot provide both a color and a decoration」は、Flutterアプリ開発中に Containerウィジェットを使用する際に発生します。具体的には、Containerに対してcolorプロパティとdecorationプロパティの両方を同時に指定した場合に表示されます。このエラーが発生すると、アプリが正しく表示されず、UIの問題を引き起こすことがあります。

例えば、 Containerウィジェットに背景色を設定するためにcolorを指定し、さらにボーダーや影を追加するためにdecorationを指定すると、このエラーに遭遇します。このエラーは、Flutterがどちらの設定も同時に受け入れないために発生します。特に初心者の方にとっては、何が間違っているのか分かりにくいことがあります。

このエラーが発生する原因

このエラーが発生する主な原因は、 Containerウィジェットにおいてcolorとdecorationの両方を同時に指定することです。Flutterの内部実装では、colorはBoxDecorationの一部として扱われるため、両方を同時に使用することはできません。

1. colorプロパティの使用: colorプロパティは背景色を簡単に設定できますが、これはBoxDecorationのcolorプロパティを使う場合の簡略化された形式です。

2. decorationプロパティの使用: decorationプロパティを使用すると、ボーダー、影、グラデーションなど、より複雑なスタイルを設定できます。しかし、この場合はcolorを含めてはいけません。

3. コードの構造: 開発者がContainerの定義を行う際に、誤って両方を指定してしまうことが多く、これがエラーを引き起こします。

解決方法1（最も効果的）

このエラーを解決するための最も簡単で効果的な方法は、Containerウィジェットのcolorプロパティを削除し、decorationプロパティ内でBoxDecorationを使用して背景色を指定することです。以下に具体的な手順を示します。