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
ソースコード ダウンロード可
Flutter
Dart
入門
初心者
180min
プレミアム会員
見放題
Flutter × FirebaseでTwitterみたいなSNSアプリを作成する【ログイン機能】【画像保存】
2021.08.28
¥7,500
Flutter
Dart
SNS
Firebase
ログイン機能
入門
122min
プレミアム会員
見放題
Flutter開発で最低限知っておきたいDartの基礎知識
2024.04.19
NEW
¥6,000
ソースコード ダウンロード可
Flutter
Dart
データ型
変数
null safety
入門
【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