この記事では、FluterのEdgeInsetsについて書いていきます。
EdgeInsets.allとは
「エッジ・インセッツ・オール」と読みます。
- Edge（エッジ）: 端、境界
- Insets（インセッツ）: 内側に挟み込む、差し込む
- all（オール）: すべて（上下左右）
上下左右の4つの方向すべてに同じ大きさの余白（マージンやパディング）を一括で設定するためのコンストラクタです。
引数に double 型の数値を1つ指定します。指定した数値分だけ、上下左右すべての方向にスペースが追加されます。
よく使うプロパティ
| プロパティ名 | 役割 | 記述例 |
|---|---|---|
| .all | 上下左右すべてに同じ余白を設定する | EdgeInsets.all(16.0) |
| .symmetric | 上下・左右をそれぞれまとめて設定する | EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0) |
| .only | 特定の方向だけ（上だけ、左だけなど）設定する | EdgeInsets.only(top: 10.0, left: 15.0) |
| .fromLTRB | 左・上・右・下（Left, Top, Right, Bottom）の順で個別指定する | EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0) |
| .zero | 余白を完全にゼロ（なし）にする | EdgeInsets.zero |
サンプル
サンプルでは、25,26行目になります。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Container Sample'),
),
body: Center(
// ここからコピペ用のContainerコード
child: const Container(
// 1. サイズの設定
width: 200,
height: 100,
// 2. 余白の設定
margin: EdgeInsets.all(16.0), // 外側の余白
padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0), // 内側の余白
// 3. 子要素の配置
alignment: Alignment.center, // 中央配置
// 4. デザイン・装飾（※colorはBoxDecoration内に記述する）
decoration: BoxDecoration(
color: Colors.blue, // 背景色
borderRadius: BorderRadius.all(Radius.circular(12.0)), // 角丸
border: Border.fromBorderSide(
BorderSide(color: Colors.white, width: 2.0), // 枠線
),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 8.0,
offset: Offset(2, 4), // 影の位置
),
],
),
// 5. 中身のウィジェット
child: Text(
'Container Sample',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
),
// ここまで
),
),
);
}
}
