Flutter エラー「color == null || decoration == null Cannot provide both a color and a decoration」が発生した場合の解決方法

Flutter エラー「color == null || decoration == null Cannot provide both a color and a decoration」が発生した場合の解決方法

Flutterで、エラー「’color == null || decoration == null’: Cannot provide both a color and a decoration
To provide both, use “decoration: BoxDecoration(color: color)”.)」が発生した場合の解決方法を記述してます。

環境

  • OS  windows11 pro 64bit
  • Flutter 3.3.1

エラー全文

以下のコードで発生

     body: Container(
        height: 200,
        width: 200,
        color: Colors.blue,
        decoration: const BoxDecoration(
          // 背景画像
          image: DecorationImage(
            image: NetworkImage('https://placehold.jp/100x100.png'),
          ),
        ),
      ),

エラー全文

例外が発生しました
_AssertionError ('package:flutter/src/widgets/container.dart': Failed assertion: line 273 pos 15: 

'color == null || decoration == null': Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".)

画像

原因

Containerは、背景色と背景画像を同時に指定できないみたいです

対処法

「BoxDecoration」の中で指定する

      body: Container(
        height: 200,
        width: 200,
        decoration: const BoxDecoration(
          color: Colors.blue,
          // 背景画像
          image: DecorationImage(
            image: NetworkImage('https://placehold.jp/100x100.png'),
          ),
        ),
      ),

実行結果