[Flutter] Container란?

Container는 플러터의 위젯 카탈로그 중 기본 위젯에 속하고 painting, 위치 설정과 크기 조정 위젯을 결합한 위젯이다.

Scaffold 안에 화면을 만들 때 부모 위젯으로 사용할 수 있는데 공식문서에선 어떻게 설명하는지 확인한다.

 

https://api.flutter.dev/flutter/widgets/Container-class.html

Container class - widgets library - Dart API

컨테이너는 먼저 자식을 패딩으로 둘러싸고(decoration에 있는 border에 의해 부풀려짐) 패딩된 범위에 추가 제약 조건(너비, 높이 중 하나가 non-null이면 제약 조건으로 통합)을 적용한다. 그 다음 컨테이너는 margin에서 설명한 추가 빈 공간으로 둘러싸인다
페인팅하는 동안 컨테이너는 먼저 주어진 transform을 적용한 다음 decoration을 페인팅해서 패딩된 범위를 채운 다음 자식을 페인팅하고, 마지막으로 foregroundDecoration을 페인팅해서 패딩된 범위(padded extent)를 채운다. 자식이 없는 컨테이너는 들어오는 제약 조건이 unbounded가 아닌 경우 가능한 크게 만들며, 이 경우 가능한 작게 만든다. 자식이 있는 컨테이너는 자식에 맞게 크기를 조절한다. 생성자에 대한 너비, 높이,제약 조건 인수가 이를 재정의한다. 기본적으로 컨테이너는 모든 히트 테스트에 false를 리턴한다. color 프로퍼티가 지정된 경우 히트 테스트는 항상 true를 리턴하는 ColoredBox가 처리한다...(중략)...컨테이너는 각각 고유한 레이아웃 동작을 가진 여러 위젯을 결합하기 때문에 컨테이너의 레이아웃 동작은 복잡하다. 요약하면 컨테이너는 alignment(정렬)를 준수하고 자식에 맞게 크기를 맞추며 너비, 높이, 제약 조건을 지키고, 부모에 맞게 확장하고, 가능한 작게 만들려고 노력한다...(중략)

 

아래는 화면 중앙에 Container를 써서 작은 사각형을 표시하는 공식문서의 예시다.

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.amber[600],
        width: 48.0,
        height: 48.0,
      ),
    );
  }
}

 

아래는 constraints, padding, color, alignment, transform 등 Container가 제공하는 기능 중 여러 개를 한 번에 사용하는 방법을 보여주는 예시다.

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(
        height: Theme.of(context).textTheme.headlineMedium!.fontSize! * 1.1 + 200.0,
      ),
      padding: EdgeInsets.all(8.0),
      color: Colors.blue[600],
      alignment: Alignment.center,
      transform: Matrix4.rotationZ(0.1),
      child: Text(
        'Hello World',
        style: Theme.of(context)
            .textTheme
            .headlineMedium!
            .copyWith(color: Colors.white),
      ),
    );
  }
}

 

사용해 보면 HTML의 div 태그를 쓰는 것 같은 느낌이다. 안드로이드로 치면 리니어 레이아웃 같은 레이아웃을 사용하는 것 같다.

Container의 특징 중 중요한 것은 자기 크기를 자식 위젯에 맞춘다는 것 같다. 이 점을 잘 생각하고 사용해야 복잡한 UI를 만들 때 자식 위젯이 뜻대로 만들어지지 않아서 머리아픈 일이 없을 듯하다. 역시 실제로 사용해 보면서 감을 익히는 수밖에는 없다.