この記事の目次
Flutter – サイズ・背景・余白・枠線 の設定
背景色の指定は、
color: Colors.背景色,
Container(
color: Colors.blue, // 背景色の指定
child: Text('blue'),
)
横幅・縦幅の指定は、
width: 数値,
height: 数値,
Container(
width: 200,// 横幅
height: 50,// 縦幅
child: Text('200x50'),
)
余白(マージン・パディング)の指定は、
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.all(color: Colors.色, width: 枠線の幅),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2),// 枠線
),
child: Text('border'),
)
角丸の指定は、
borderRadius: BorderRadius.circular(角丸の大きさ),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),// 角丸
),
child: Text('border'),
)
背景画像の指定は、
image: DecorationImage(image: NetworkImage(‘絶対パス’),),
Container(
decoration: BoxDecoration(
// 背景画像
image: DecorationImage(
image: NetworkImage('https://placehold.jp/200x100.png'),
),
),
child: Text('image'),
)