【Flutter】Containerのpaddingとmarginの違い

#Flutter#入門#プログラミング入門#dart#Flutter入門
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),)
),
