Flutter – サイズ・背景・余白・枠線 の設定
Flutter
この記事の目次
Flutter – サイズ・背景・余白・枠線 の設定
color
背景色
背景色の指定は、
color: Colors.背景色,
Container(
color: Colors.blue, // 背景色の指定
child: Text('blue'),
)width / height
サイズ（幅・高さ）
横幅・縦幅の指定は、
width: 数値,
height: 数値,
Container(
width: 200,// 横幅
height: 50,// 縦幅
child: Text('200x50'),
)margin / padding
余白
余白（マージン・パディング）の指定は、
padding: EdgeInsets.all(数値),
margin: EdgeInsets.all(数値),
Container(
padding: EdgeInsets.all(8),// 内側の余白（パディング）
margin: EdgeInsets.all(8),// 外側の余白（マージン）
child: Text('padding / margin'),
)個別に余白を指定
padding:const EdgeInsets.only(top: 20, right: 0, bottom: 20, left: 10),
border
枠線
枠線の指定は、
border: Border.all(color: Colors.色, width: 枠線の幅),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),// 枠線
),
child: Text('border'),
)borderRadius
角丸
角丸の指定は、
borderRadius: BorderRadius.circular(角丸の大きさ),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),// 角丸
),
child: Text('border'),
)image
背景画像
背景画像の指定は、
image: DecorationImage(image: NetworkImage(‘絶対パス’),),
Container(
decoration: BoxDecoration(
// 背景画像
image: DecorationImage(
image: NetworkImage('https://placehold.jp/200x100.png'),
),
),
child: Text('image'),
)
