Flutter: Containerで「Cannot provide both a color and a 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)」を設定せよ

 

とある。

 

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

 

 

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

 

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

 

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

 

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

 

 

どうやら「Container」直下の「color」属性は、単純なパターンの背景色を手軽に設定できるように用意されたもので、グラデーションや画像など、高度な背景をつける場合は「decoration」属性を使うように、ということらしい。

 

なるほど、理解できました。

 

\ Flutterの学習で役立ったコンテンツ・書籍 /

 

 

 


Dart入門 – Dartの要点をつかむためのクイックツアー
タイトルとURLをコピーしました