Layout Widget; margin&padding

goal : 'Layout widget' 사용에 익숙해지기

Flutter 문서의 'Widget category'에서 'Layout widget'을 확인했다. https://flutter.dev/docs/development/ui/widgets/layout

Layout 위젯은 자식을 하나만 가질 수 있는 'Single-child layout widgets'과
둘 이상을 가질 수 있는 '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 reload' 기능을 사용하기 위해 'MaterialApp'을 'StatelessWidget' 안에서 'return' 시켰다.※
아래와 같이 아직 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'사용에 익숙해졌다.