広告

Flutterラボの

プレミアム会員になる

【Flutter】Containerのpaddingとmarginの違い

2021.11.26

HTMLやCSSを記述したことのある方はすでに理解されているかもしれませんが、paddingとmarginの違いについて説明したいと思います。

Flutter開発における基本的なWidgetのひとつであるContainerには、paddingとmargin、2つの余白に関する設定があります。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

簡単に説明すると
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),)
),
Flutterラボ 現役エンジニアが教えるFlutter学習! プログラミング初心者でもiOS・Android・WEBアプリ開発を学ぶことがで www.youtube.com



Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)