Layout Widget; margin&padding

目標:「Layout widget」に詳しい
Fluthドキュメントの「Widget category」で「Layout widget」を確認しました.https://flutter.dev/docs/development/ui/widgets/layout
Layoutコンポーネントには、サブアイテムが1つしかない「Single Child Layoutウィジェット」があります.
2つ以上の「multi-child layout widgets」があります.

Container

まず、以下に示すように、「Single Child layout widgets」の代表的なcontainerコンポーネントを使用してコードを記述します.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Container(),
        ),  // Container
      ),  // SafeArea
    );  //MaterialApp
  }
}

※「hotリロード」機能を使用するため、「StatelessWidget」では「MaterialApp」を使用しています.※
下図のようにcontainerの姿はまだ見えません.コンテナを設定するには、次の手順に従います.

Container
height : 100
width : 100
color : white
child : Text('flutter')

child: Container(
  height: 100,
  width: 100,
  color: Colors.white,
  child: Text('flutter'),
          ),

※「SafeArea()」を使用すると、コンテナは上の欄(ステータス欄)を占有しません.※
「margin」と「padding」の機能について説明します.

margin

まず「margin」を試してみます.

child: Container(
  height: 100,
  width: 100,
  color: Colors.white,
  child: Text('flutter'),
  margin: EdgeInsets.only(left: 30),
  ),

コンテナが左端から30ピクセル離れていることを確認します.

padding

「padding」を適用しましょう.

child: Container(
  height: 100,
  width: 100,
  color: Colors.white,
  child: Text('flutter'),
  margin: EdgeInsets.only(left: 30),
  padding: EdgeInsets.all(20),
  ),

コンテナの内部距離はすべてのエッジから2画素しかないことを確認した.
このように代表的な「Layout widget」とこれらの部品が提供する属性を使用することで、「Layout widget」を使用することに慣れています.