【Flutter】Containerのdecorationプロパティ適用時のcolorプロパティのエラー対応

今回は、Containerのdecorationプロパティを使用している際のcolorプロパティの使用方法について解説していきます。

今回は下の画像のような赤色の箱を表示する方法で解説します。

decorationプロパティ適用なし

まずは、decorationプロパティを適用せずに赤色の箱を表示してみます。

ソースコードは以下です。

return Scaffold(
     appBar: AppBar(),
     body: Center(
       child: Container(
         width: 200,
         height: 200,
         color: Colors.red,
       ),
     ),
   );

decorationプロパティ適用あり

上記のコードのContainerにdecorationプロパティを適用してみます

return Scaffold(
     appBar: AppBar(),
     body: Center(
       child: Container(
         decoration: BoxDecoration(),
         width: 200,
         height: 200,
         color: Colors.red,
       ),
     ),
   );

すると下記画像のようなエラーが発生するかと思います。

解決方法

このエラーの解決方法は、colorプロパティの指定をContainerで行うのではなく、BoxDecorationで行うと解決可能です。

Scaffold(
     appBar: AppBar(),
     body: Center(
       child: Container(
         decoration: BoxDecoration(
           color: Colors.red //この行を追加
         ),
         width: 200,
         height: 200,
       ),
     ),
   );

これで冒頭の画像と同じUIを作ることができます。

まとめ

Containerのdecorationプロパティを使い、デザインしていくことがあるかと思います。

その時は、Containerのcolorプロパティを使用せず、BoxDecorationのcolorプロパティを使用しましょう！