• Flutter で Cannot provide both a color and a decoration エラー？
• どうやってwidgetに枠線+背景色をつけたら良いでしょうか。

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 に同じ質問がありました。

Stack Overflow

Flutter Container: cannot provide both a color and a decoration

https://stackoverflow.com/questions/53678664/flutter-container-cannot-provide-both-a-color-and-a-decoration

I want to draw a border around my container and have the background be colored. Widget bodyWidget() { return Container( color: Colors.yellow, decoration: BoxDecoration( border: Bor...

それではバイバイ。

Tamappe

モバイルアプリエンジニア

XContact

都内の会社で働いているモバイルアプリエンジニアのTamappeです。今はiOSとAndroidの両OSを開発しています。使用言語はSwift/Objective-C/Java/Kotlin/Dartです。趣味はポーカーとスプラトゥーン2。最近は、シミュレーションゲームもやっています。