【Flutter】marginプロパティの使い方|EdgeInsets

marginプロパティの使い方
目次

marginプロパティとは?

//例
Container(
  margin: EdgeInsets.all(50),
),

marginプロパティはContainerなどのプロパティで使われ、Widgetの枠の外側に余白を作ります。またmarginの引数EdgeInsetsを使用します。

>>【Flutter】Widgetの基本的な仕組み/使い方

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

サンプルコード

// 左側の画像のコード
import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter入門アカデミー'),
        ),
        body: Container(
          margin: EdgeInsets.all(50),
          height: 100,
          width: 100,
          color: Colors.red,
        ),
      ),
    );
  }
}
margin
margin あり
margin2
margin なし
よかったらシェアしてね!
目次
閉じる