Flutterラボの
プレミアム会員になる
【Flutter】Containerに枠線(Border)をつける方法

#Flutter#入門#プログラミング入門#dart#Flutter入門
ContainerはFlutter開発において頻出ウィジェットで使い方を知っていれば様々なUIを作成することができます。
今回は、枠線のつけ方を紹介します。
例として黄色のContainerを用意します。
これに枠線をつけていきます。
Container(
color: Colors.yellow,
width: 300,
height: 100,
),

このContainerウィジェットのdecorationプロパティを追記するだけですが、そのまま追記するだけではエラーが出てしまうので注意が必要です。
Container(
color: Colors.yellow,
width: 300,
height: 100,
decoration: BoxDecoration(
border: Border.all(width: 1)
),
),

Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
これはdecorationプロパティとcolorプロパティが同時に存在するときに起こるエラーで、decorationを設定するならそのdecoration内にcolorの設定を移動させることで解決することができます。
Container(
width: 300,
height: 100,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(width: 1)
),
),

これでまわりをすべて囲う枠線をつけることができました。