Dart

58. Flutter で Cannot provide both a color and a decoration エラーが出てしまったら?

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

Flutter で書いている時に Cannot provide both a color and a decoration のエラーが発生しました。

エラー内容

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 320 pos 15: 'color == null || decoration == null'

このエラーが出たら、Container のところを見てみましょう。

具体例

Container(
              width: 100,
              height: 100,
              color: Colors.blueAccent,
              decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.greenAccent
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              child: Text('color and decoration エラー'),
            )

例えばあるボタンに枠線と背景色をつけようと思った時につい書いてしまいそうなコードですね。
今回は Text ですけど。

Container は枠線やサイズを調整できてとても便利ですが、どうやら枠線と背景色を同時につけることができないみたいです。
背景色か枠線どちらかを削除するとエラーが消えます。

Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.greenAccent
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              child: Text('color and decoration エラー'),
            )

どうやってwidgetに枠線+背景色をつけたら良いでしょうか。

ただ、それだとどうやって枠線+背景色をつけたら良いでしょうか。

答えはBoxDecoration の中で color 指定すれば大丈夫です。

Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.greenAccent
                ),
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(5),
              ),
              child: Text('color and decoration エラー'),
            )

これでエラーが発生しなくなります。

StackOverFlow に同じ質問がありました。

それではバイバイ。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。