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

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

Margin

margin と共に EdgeInsets を使って設定します

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

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

// 水平、左右に50
margin: EdgeInsets.symmetric(horizontal: 50)
// 垂直、上下に50
margin: EdgeInsets.symmetric(vertical: 50)

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

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

margin: EdgeInsets.all(50.0)

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

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

// 水平、左右に50

margin: EdgeInsets.symmetric(horizontal: 50)

// 垂直、上下に50

margin: EdgeInsets.symmetric(vertical: 50)

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

margin: EdgeInsets.only(left: 50.0)

margin: EdgeInsets.only(top: 50.0)

margin: EdgeInsets.only(right: 50.0)

margin: EdgeInsets.only(bottom: 50.0)

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

EdgeInsets.all

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

200×200 のサイズの Container の中に’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('Margin Test'),
          backgroundColor: Colors.grey,
        ),
        body: Container(
          color: Colors.greenAccent,
          width: 200.0,
          height: 200.0,
          margin: const EdgeInsets.all(50.0),
          // margin: const EdgeInsets.fromLTRB(120, 30, 60, 50),
          // margin: const EdgeInsets.symmetric(horizontal: 50),
          // margin: const EdgeInsets.symmetric(vertical: 50),
          // margin: const EdgeInsets.only(left: 50.0),
          // margin: const EdgeInsets.only(top: 50.0),
          // margin: const EdgeInsets.only(right: 50.0),
          // margin: const EdgeInsets.only(bottom: 50.0),
          child: const 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('Margin Test'),

backgroundColor: Colors.grey,

body: Container(

color: Colors.greenAccent,

width: 200.0,

height: 200.0,

margin: const EdgeInsets.all(50.0),

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

// margin: const EdgeInsets.symmetric(horizontal: 50),

// margin: const EdgeInsets.symmetric(vertical: 50),

// margin: const EdgeInsets.only(left: 50.0),

// margin: const EdgeInsets.only(top: 50.0),

// margin: const EdgeInsets.only(right: 50.0),

// margin: const EdgeInsets.only(bottom: 50.0),

child: const Text(

'Text',

style: TextStyle(

fontSize: 32,

backgroundColor: Colors.green,

);

}

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

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

EdgeInsets.fromLTRB

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

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

EdgeInsets.symmetric

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

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

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

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

EdgeInsets.only

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

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

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

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

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

Paddingはこちらにあります
Margin と EdgeInsets で余白の設定

　
References:
flutter_margin_widget
Margin class