[Flutter layout]Container

Container

flutter container
위젯에 배경스타일이 필요하다면, 위젯에 배경색이나 모양을 추가해야 한다면, 크기에 제한을 두고 싶다면 Container 위젯을 사용해보자.

constructor

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})

properties

• alignment(AlignmentGeometry?)
  • Container 안에 자식위젯들을 정렬한다.
• child(Widget?)
  • container에 속하는 자식 위젯들
• clipBehavior(Clip)
  • clip(화면을 어떻게 자를지 결정하는 것) Container.decoration이 null이 아닐 때 사용된다.
• color(Color?)
  • 자식의 뒤에 색을 칠할 때 사용된다.
• constraints(BoxConstraints?)
  • 자식위젯들에 제약을 추가할 때 사용한다.
• decoration(Decoration?) - Decoration은 보통 그림을 넣을 때 사용된다.
  • 자식위젯 뒤를 꾸밀 때 사용한다.
• foregroundDecoration(Decoration?)
  • 자식위젯 앞을 꾸밀 때 사용된다.
• margin(EdgeInsetsGeometry?)
  • decoration과 자식을 감싸는 빈공간
• padding(EdgeInsetsGeometry?)
  • decoration과 내부에 새길 빈 공간. 자식위젯이 있는 경우 이 패딩 안에 넣는다.
• transform(Matrix4?)
  • 컨테이너를 칠하기 전에 적용할 변환 행렬
• transformAlignment(AlignmentGeometry?)
  • 변환이 지정된 경우 컨테이너 크기에 따른 원점 정렬.

example

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

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