Paddingで指定したWidgetの余白を調整する方法を紹介します。
本記事の最後に「サンプルコード」を載せています。
Card(
child: Padding(
padding: EdgeInsets.all(30),
child: HelloText(),
),
),paddingではEdgeInsetsGeometryのサブクラスEdgeInsetsで余白を調整し、childで外部余白を調整するWidgetを指定します。
今回はHelloTextの外側にEdgeInsets.all(30)で余白を調整しています。
Paddingあり
Paddingなし
Card(
child: Padding(
padding: EdgeInsets.all(30),
child: HelloText(),
),
),EdgeInsets.allでは、上下左右全ての方向に同じだけ余白を作ります。
Card(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 50, 80, 100),
child: HelloText(),
),
),EdgeInsets.fromLTRBでは、上下左右の余白を別々に指定できます。（左、上、右、下側の順に値を渡す。）
Card(
child: Padding(
padding: EdgeInsets.only(left: 50, top: 100),
child: HelloText(),
),
),EdgeInsets.onlyでは、名前付き引数で指定したサイドに余白を作ります。
child: Card(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 50, horizontal: 100),
child: HelloText(),
),
),EdgeInsets.symmetricでは、名前付き引数で指定した軸（x軸、y軸）の両側に余白を作ります。
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('FlutterZero'),
),
body: Card(
child: Padding(
padding: EdgeInsets.all(30),
child: HelloText(),
),
),
),
);
}
}
class HelloText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
'Hello World',
style: TextStyle(
fontSize: 30,
),
);
}
}