[Flutter] Padding と EdgeInsets で余白の設定

FlutterにてWidgetの間隔をあけたり余白を作りたい時にpaddingやmarginを使います

Padding

padding では EdgeInsets を使って設定します

// 上下左右に50.0のマージンを付ける
padding: EdgeInsets.all(50.0)

// Left: 120, Top: 30, Right: 60, Bottom: 50 
padding: EdgeInsets.fromLTRB(120, 30, 60, 50)

// 水平、左右に50
padding: EdgeInsets.symmetric(horizontal: 50)

// 垂直、上下に50
padding: EdgeInsets.symmetric(vertical: 50)

// leftなど各辺だけの設定
padding: EdgeInsets.only(left: 50.0)
padding: EdgeInsets.only(top: 50.0)
padding: EdgeInsets.only(right: 50.0)
padding: EdgeInsets.only(bottom: 50.0)

// 上下左右に50.0のマージンを付ける

padding: EdgeInsets.all(50.0)

// Left: 120, Top: 30, Right: 60, Bottom: 50

padding: EdgeInsets.fromLTRB(120, 30, 60, 50)

// 水平、左右に50

padding: EdgeInsets.symmetric(horizontal: 50)

// 垂直、上下に50

padding: EdgeInsets.symmetric(vertical: 50)

// leftなど各辺だけの設定

padding: EdgeInsets.only(left: 50.0)

padding: EdgeInsets.only(top: 50.0)

padding: EdgeInsets.only(right: 50.0)

padding: EdgeInsets.only(bottom: 50.0)

目次
1. EdgeInsets.all
2. EdgeInsets.fromLTRB
3. EdgeInsets.symmetric
4. EdgeInsets.only

EdgeInsets.all

プロジェクトのテンプレートの Empty Applicationを修正して padding を入れてみます

Card の中に’Text’を入れて背景色で位置がわかりやすくします

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Padding Test'),
          backgroundColor: Colors.grey,
        ),
        body: const Card(
          color: Colors.lightGreenAccent,
          child: Padding(
            padding: EdgeInsets.all(50.0),
            // padding: EdgeInsets.fromLTRB(120, 30, 60, 50),
            // padding: EdgeInsets.symmetric(horizontal: 50),
            // padding: EdgeInsets.symmetric(vertical: 50),
            //  padding: EdgeInsets.only(left: 100.0),
            //  padding: EdgeInsets.only(top: 100.0),
            //  padding: EdgeInsets.only(right: 50.0),
            //  padding: EdgeInsets.only(bottom: 150.0),
            child: Text(
              'Text',
              style: TextStyle(
                fontSize: 32,
                backgroundColor: Colors.green, 
              ),
            ),
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MainApp());

}

class MainApp extends StatelessWidget {

const MainApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text('Padding Test'),

backgroundColor: Colors.grey,

body: const Card(

color: Colors.lightGreenAccent,

child: Padding(

padding: EdgeInsets.all(50.0),

// padding: EdgeInsets.fromLTRB(120, 30, 60, 50),

// padding: EdgeInsets.symmetric(horizontal: 50),

// padding: EdgeInsets.symmetric(vertical: 50),

// padding: EdgeInsets.only(left: 100.0),

// padding: EdgeInsets.only(top: 100.0),

// padding: EdgeInsets.only(right: 50.0),

// padding: EdgeInsets.only(bottom: 150.0),

child: Text(

'Text',

style: TextStyle(

fontSize: 32,

backgroundColor: Colors.green,

);

}

EdgeInsets.all(50.0)
これで実行してみると

Cardの背景色と枠がなければ
テキストの余白ができたように見えます

EdgeInsets.fromLTRB

上下左右を個別に設定したい場合は、

// Left: 120, Top: 30, Right: 60, Bottom: 50 
padding: EdgeInsets.fromLTRB(120, 30, 60, 50)

1 2	// Left: 120, Top: 30, Right: 60, Bottom: 50 padding: EdgeInsets.fromLTRB(120, 30, 60, 50)

EdgeInsets.symmetric

// 水平、左右に50 
padding: EdgeInsets.symmetric(horizontal: 50)

1 2	// 水平、左右に50 padding: EdgeInsets.symmetric(horizontal: 50)

// 垂直、上下に50 
padding: EdgeInsets.symmetric(vertical: 50)

1 2	// 垂直、上下に50 padding: EdgeInsets.symmetric(vertical: 50)

EdgeInsets.only

// leftだけの設定
padding: EdgeInsets.only(left: 50.0)

1 2	// leftだけの設定 padding: EdgeInsets.only(left: 50.0)

rightやbottomは画面上何もないように見えますが、大きな値に設定するとこのようになってしまいます

// rightだけの設定 
padding: EdgeInsets.only(right: 350.0)

1 2	// rightだけの設定 padding: EdgeInsets.only(right: 350.0)

margin はこちらを参考に
Margin と EdgeInsets で余白の設定

　
References:
Padding class
Padding class – widgets library – Dart API