Flutter - サイズ・背景・余白・枠線 の設定

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),

Flutter – Rowにパディングを設定する

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'),
)

カテゴリー

Copyright © 昨日と今日の間 All Rights Reserved.