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

paddingプロパティ
目次

paddingプロパティとは?

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

paddingプロパティはContainerなどのプロパティで使われ、Widgetの枠の内側の余白を指定します。また、paddingの引数に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(
          padding: EdgeInsets.all(50),
          child: Text('Hello World'),
          height: 200,
          width: 200,
          color: Colors.yellow,
        ),
      ),
    );
  }
}
pudding
padding あり
pudding2
padding なし
よかったらシェアしてね!
目次
閉じる