배치 및 공간 제어 위젯 작성 / Align, Spacer, Expanded

1. Align

아래 3개 코드는 다 동일
(아래로 내려갈 수록 자율성 높다)

body: Center(
    child: Container(
      color: Colors.yellow,
      height: 200,
      width: 200,
    ),
  ),

body: Align(
    alignment: Alignment.center,
    child: Container(
      color: Colors.yellow,
      height: 200,
      width: 200,
    ),
  ),

body: Align(
    alignment: const Alignment(0, 0),
    child: Container(
      color: Colors.yellow,
      height: 200,
      width: 200,
    ),
  )

2. Spacer (여백)

body: Row(
  children: [
    Container(
      color: Colors.yellow,
      height: 40,
      width: 40,
    ),
    Container(
      color: Colors.green,
      height: 40,
      width: 40,
    ),
    const Spacer(), // ★★★
    Container(
      color: Colors.blue,
      height: 40,
      width: 40,
    ),
    const Spacer(), // ★★★
    Container(
      color: Colors.pink,
      height: 40,
      width: 40,
    ),
    const Spacer(), // ★★★
    Container(
      color: Colors.purple,
      height: 40,
      width: 40,
    ),
  ],
)

flex properties

const Spacer(
  flex: 3,
),