Flutter: Containerで「Cannot provide both a color and a decoration」のエラー

結論：Containerの色は「decoration:」プロパティの方で設定する

2022/4/10　Flutter エラー・バグ日記

恐らく超初歩的な話かと思われるが、知らずに若干詰まったので、対処法を記録。

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

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

「Container」に丸い枠線と、背景色をつけようと思い、

Container(
                    color: Colors.blueGrey,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(3.0),
                    ),
                    child: Text("テスト"),
                  ),

のようにコードを書き、ビルドしたところ、以下のエラーが出た。

Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 274 pos 15: 'color == null || decoration == null'

色（color）と装飾（decoration）は同時に設定できないらしい。。

そんなはず無いのでは（それは困る）と思いつつ、仕方ないので「child」のWidget側で色を付けられないか、ソースコードを調べたりしてみたが、ふとエラー文をよく見ると、

両方設定したいなら、「decoration」属性に、「BoxDecoration(color: color)」を設定せよ

とある。

調べてみると、こちらに分かりやすい解説記事があった。

58. Flutter で Cannot provide both a color and a decoration エラーが出てしまったら？｜Tamappe Life Log

Flutter で Cannot provide both a color and a decoration エラー？

つまり、このように修正すれば良いらしい。

Container(
                    // color: Colors.blueGrey,
                    decoration: BoxDecoration(
                      color: Colors.blueGrey, // <- 色の設定をこっちに移動
                      borderRadius: BorderRadius.circular(3.0),
                    ),
                    child: Text("テスト"),
                  ),

確かにこれで、エラー無く、丸い枠線と背景色を付けることができた。

公式サイトできちんと調べると、下記に説明があった。