복수 위젯담는 박스(컨테이너) 작성

복수 위젯담는 박스(컨테이너) 작성

Column (칼럼, 열, 세로축)
Row (로우, 행, 가로축)
Wrap (children에 공간이 부족해지면 자동으로 다음 줄로 바꿔줍니다)
Stack (children의 위젯들을 겹쳐서 출력합니다)

1. Column (열, 세로 축)

컨테이너 박스를 세로로 나열할 때

body: Column(
  children: [
    Container(
      color: Colors.red,
      width: 150,
      height: 300,
      child: const Text(
        '1',
      ),
    ),
    Container(
      color: Colors.yellow,
      width: 150,
      height: 300,
      child: const Text(
        '2',
      ),
    ),
    Container(
      color: Colors.green,
      width: 150,
      height: 300,
      child: const Text(
        '3',
      ),
    ),
  ],
),

mainAxisSize

• MainAxisSize.min : Column사이즈가 자식 사이즈 만큼 잡힘
• MainAxisSize.max : Column사이즈가 한 열 만큼 전부 잡힘

body: Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      color: Colors.red,
      width: 150,
      height: 300,
      child: const Text(
        '1',
      ),
    ),
  ],
),

mainAxisAlignment

• start, center, end 첫번째, 가운데, 끝 이렇게 위치 조정 가능
• spaceAround, spaceBetween, spaceEvenly 설정 가능

mainAxisAlignment: MainAxisAlignment.center,

2. Row (행, 가로 축)

body: Row(
  children: [
    Container(
      color: Colors.red,
      width: 150,
      height: 300,
      child: const Text(
        '1',
      ),
    ),
    Container(
      color: Colors.yellow,
      width: 150,
      height: 300,
      child: const Text(
        '2',
      ),
    ),
    Container(
      color: Colors.green,
      width: 150,
      height: 300,
      child: const Text(
        '3',
      ),
    ),
  ],
),

mainAxisSize

• MainAxisSize.min : Row사이즈가 자식 사이즈 만큼 잡힘
• MainAxisSize.max : Row사이즈가 한 열 만큼 전부 잡힘

mainAxisSize: MainAxisSize.min,

mainAxisAlignment

• start, center, end 첫번째, 가운데, 끝 이렇게 위치 조정 가능
• spaceAround, spaceBetween, spaceEvenly 설정 가능

mainAxisAlignment: MainAxisAlignment.center,

3. Wrap

overflow났을 때 다음 줄로 내리고싶을때

children에 공간이 부족해지면 자동으로 다음 줄로 바꿔줍니다

body: Wrap(
	// direction: Axis.vertical,
	children: [
	  Container(
	    color: Colors.red,
	    width: 150,
	    height: 300,
	    child: const Text(
	      '1',
	    ),
	  ),
	  Container(
	    color: Colors.yellow,
	    width: 150,
	    height: 300,
	    child: const Text(
	      '2',
	    ),
	  ),
	  Container(
	    color: Colors.green,
	    width: 150,
	    height: 300,
	    child: const Text(
	      '3',
	    ),
	  ),
	],
	),

4. Stack

겹쳐서 위젯을 출력하고 싶을 때

children의 위젯들을 겹쳐서 출력합니다

body: Stack(
  alignment: Alignment.center,
  children: [
    Container(
      color: Colors.red,
      alignment: Alignment.center,
      width: 100,
      height: 200,
      child: const Text(
        '1',
      ),
    ),
    Container(
      color: Colors.green,
      alignment: Alignment.center,
      width: 100,
      height: 100,
      child: const Text(
        '2',
      ),
    ),
    Container(
      color: Colors.yellow,
      alignment: Alignment.center,
      width: 100,
      height: 50,
      child: const Text(
        '3',
      ),
    ),
  ],
)