3. Container, Padding

오늘 알아볼 것은 Container와 Padding 위젯이다.

같이 묶어서 작성하는 이유는 두 위젯이 거의 유사하기 때문이다.

Container

우선 공식문서에는 Container가 자식 위젯을 커스터마이징 할 수 있는 위젯이라고 나와있다.

이 말은 즉,  여백, 간격, 테두리 또는 배경색을 추가하고 싶을 때 Container를 사용할 수 있다는 것이다.

 

실제로 Cotainer 위젯은 다양한 속성을 가지고 있다.

Container Container({
    Key? key,                           
	AlignmentGeometry? alignment,                           
	EdgeInsetsGeometry? padding,                           
	Color? color,                           
	Decoration? decoration,                           
	Decoration? foregroundDecoration,                           
	double? width,                           
	double? height,                          
	BoxConstraints? constraints,                          
	EdgeInsetsGeometry? margin,                           
	Matrix4? transform,                          
	AlignmentGeometry? transformAlignment,                         
	Widget? child,                        
	Clip clipBehavior = Clip.none})

 

이 중에서 실제로 자주 사용하게 되는 alignment, padding, color, decoration, width, height에 대해 알아보자.

 

alignment는 Container 위젯의 child로 오는 자식 위젯의 위치에 해당한다.

alignment를 지정하지 않은 경우 좌측 상단에 고정된다.

padding은 내부 여백을 의미한다.

color는 Container의 컬러이고, decoration은 Container에 다양한 옵션을 추가할 수 있는 요소이다.

 

이런 식으로 사용할 수 있는데 아래와 같은 결과가 출력된다.

 

 

다음은 Container의 속성에 대해 알아보려고 한다. 우선 아래와 같이 코드를 작성해 주었다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Container 예제"),
        ),
        body: Container(
          color: Colors.black,
        ),
      ),
    );
  }
}

위 코드로 빌드를 진행하면 이처럼 화면에 꽉 찬 Container가 생성이 된다.

 

그렇다면 여기서 child로 더 작은 크기의 Container를 생성해주면 어떻게 될까?

 

빨간색을 갖는 Container를 자식으로 넣어줬다.

검은색 배경에 작은 사이즈의 빨간 상자가 있을까?

실행시켜보면 그렇지 않다는 것을 알 수 있다.

 

이것은 Container의 속성 때문인데

부모 Container의 크기를 지정해주지 않은 경우

자식 Container의 크기를 따라간다는 속성이 있다.

검은색을 갖는 부모 Container의 크기를 지정해주지 않았기에

빨간색을 갖는 자식 Container인 크기를 따라가고

자식 Container에 의해 덮어진 것을 알 수 있다.

 

그렇다면 이번엔 부모 Container의 크기를 자식 Container의 크기보다 크게 만들면 어떻게 될까?

우리가 원했던 검은색 배경에 작은 사이즈의 빨간 상자가 있을까?

실행시켜보면 역시 그렇지 않다는 것을 알 수 있다.

 

이것도 역시 Container의 속성 때문인데

Container의 자식으로 Container를 선언하게 되면 자식 Container로 덮어진다.

그러면 우리가 원하는 출력물을 만들 수 있는 방법은 없다고 생각할 수 있지만 다른 위젯을 이용하면 된다.

예를 들어 Row, Column, Stack이 있는데 우선 출력 결과만 보고 다음에 설명하도록 하겠다.

 

Column

Row

Stack

Padding

Padding 위젯의 경우 Container와 거의 유사하다.

하지만 커스터마이징 요소를 제공하고 있지 않고 단순히 내부 여백을 조정하는 padding의 기능만 제공한다.

Padding Padding({
	Key? key,                      
	required EdgeInsetsGeometry padding,             
	Widget? child})