Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】Containerのpaddingとmarginの違い
2021.11.26
HTMLやCSSを記述したことのある方はすでに理解されているかもしれませんが、paddingとmarginの違いについて説明したいと思います。
Flutter開発における基本的なWidgetのひとつであるContainerには、paddingとmargin、2つの余白に関する設定があります。
簡単に説明すると
padding:Containerの内側の余白
margin:Containeの外側の余白
となりますが、例を挙げて解説していきます。
以下のような黄色のContainerの中に文字があることを想定します。
Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Flutterラボ'),
),
body: Container(
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(width: 1)
),
width: 300,
height: 100,
child: const Text('Flutterラボ', style: TextStyle(fontSize: 25),)
),
);

この状態にpaddingを追記すると、Containerの枠線と文字の間に余白ができました。
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(width: 1)
),
width: 300,
height: 100,
child: const Text('Flutterラボ', style: TextStyle(fontSize: 25),)
),

次にmarginを追記すると、画面の端からContainerまでの余白が追加されました。
Container(
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(width: 1)
),
width: 300,
height: 100,
child: const Text('Flutterラボ', style: TextStyle(fontSize: 25),)
),


208min
プレミアム会員
見放題
3日でできるFlutterアプリ開発入門
2024.04.11
¥3,600
ソースコード ダウンロード可
180min
プレミアム会員
見放題
Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】
2021.08.28
¥7,500
147min
プレミアム会員
見放題
Flutter開発で最低限知っておきたいDartの基礎知識
2024.08.31
¥6,000
ソースコード ダウンロード可

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13