こんにちは!
日中は相変わらず暑いですが、最近少し夜が過ごしやすいと感じるぐらい気持ちい気温になってきたように感じます!
この時期の夜に散歩をするのが好きで、いい気分転換になっている今日この頃です(笑)
さて、今回はpaddingを使ってContainer内のテキストとContainerの枠との間に余白を設ける方法についてご紹介したいと思います。
最後まで読んでいただけたら、嬉しいです!
1,paddingとは?
padding(パディング)は、Flutterにおいてwidgetの内部コンテンツとwidgetの枠(境界)との間のスペースを指定するためのプロパティです。これにより、widgetの内部コンテンツと枠の間に余白を設けることができます。具体的には、widgetの四辺(上、下、左、右)に対してスペースを追加する効果があります。
paddingを設定するために使える主なEdgeInsetsのプロパティ
種類 | 説明 |
---|---|
EdgeInsets.all(~~) | 上下左右のすべての辺に同じ値の余白を設定します。 |
EdgeInsets.symmetric(vertical: ~~, horizontal: ~~) | 上下と左右に異なる値の余白を設定します。 |
EdgeInsets.only({left, top, right, bottom}) | 各辺ごとに異なる値の余白を設定します。 |
2,Containerを作ろう
Containerの内部にテキストを配置し、Containerの枠とテキストの間に余白を設けると言うことで、初期位置の状態で余白を加えていきます。
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.yellow),
child: Text(
"Hello Flutter!",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black),
),
)
3,paddingを加えて、余白を設けよう
今回は先ほど紹介した3種類のプロバティの中で
・EdgeInsets.all(~~)
・EdgeInsets.symmetric(vertical: ~~, horizontal: ~~)
を例にとって紹介していきます。
EdgeInsets.all(~~)
Container(
height: 200,
width: 200,
padding: EdgeInsets.all(50),//上下左右の辺に同じ値の余白を設定
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.yellow),
child: Text(
"Hello Flutter!",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black),
),
)
EdgeInsets.symmetric(vertical: ~~, horizontal: ~~)
EdgeInsets.symmetric(horizontal: ~~)
Container(
height: 200,
width: 200,
padding: EdgeInsets.symmetric(horizontal: 50),//左右に余白50を設定
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.yellow),
child: Text(
"Hello Flutter!",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black),
),
)
EdgeInsets.symmetric(vertical: ~~)
Container(
height: 200,
width: 200,
padding: EdgeInsets.symmetric(vertical: 50),//上下に余白50を設定
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: Colors.yellow),
child: Text(
"Hello Flutter!",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black),
),
)
おわり
いかがだったでしょうか!
今回は、Container内のpaddingについて紹介しましたが、どうしたら見やすく、伝わりやすい記事になるだろうと考えた結果、画像が多くなりいつもより長い記事になってしまいました、、、すいません、、、
今回も最後まで見ていただき、ありがとうございました!
暑いですので、みなさん水分補給忘れずに!