Udemyセール開催中! 対象コースが1,220円から

【Flutter】EdgeInsetsの使い方|余白のサイズ・側面を指定する

今回は「EdgeInsets」の基本的な使い方について紹介します。

EdgeInsetsを使えば、余白を作る側面・サイズを指定できます。

目次

EdgeInsetsの基本コンストラクタ

EdgeInsets.all

EdgeInsets.all(50)

枠の上下左右全ての方向に同じ余白を作ります。

EdgeInsets.fromLTRB

EdgeInsets.fromLTRB(10,20,30,40)

左、上、右、下側の順に余白の大きさを指定します。

EdgeInsets.only

EdgeInsets.only(left: 50, top: 20)

left, top, right, bottomで余白を作りたい側面を指定して余白が作れます。

EdgeInsets.symmetric

EdgeInsets.symmetric(vertical: 50, horizontal: 10)

vertical(垂直), horizontal(水平)で余白を作りたいラインを指定して余白が作れます。

EdgeInsetsを使用したソースコード

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter"),
        ),
        body: const Center(
          child: Card(
            color: Colors.yellow,
            child: Padding(
              padding: EdgeInsets.all(30),
              child: Text("Hello World"),
            ),
          ),
        ),
      ),
    );
  }

以上です。

  • URLをコピーしました!
目次
閉じる