3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【flutter】paddingを使ってContainer内のテキストとContainerの枠との間に余白を設けたい

Last updated at Posted at 2023-08-31

こんにちは!
日中は相変わらず暑いですが、最近少し夜が過ごしやすいと感じるぐらい気持ちい気温になってきたように感じます!
この時期の夜に散歩をするのが好きで、いい気分転換になっている今日この頃です(笑)
さて、今回は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),
        ),
      )

スクリーンショット 2023-08-25 10.35.37.png

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

スクリーンショット 2023-08-25 10.58.00.png

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

スクリーンショット 2023-08-25 11.13.45.png

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

スクリーンショット 2023-08-25 11.20.06.png

おわり

いかがだったでしょうか!
今回は、Container内のpaddingについて紹介しましたが、どうしたら見やすく、伝わりやすい記事になるだろうと考えた結果、画像が多くなりいつもより長い記事になってしまいました、、、すいません、、、
今回も最後まで見ていただき、ありがとうございました!
暑いですので、みなさん水分補給忘れずに!

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?