[flutter] Spacer를 이용하여 간격이 고려된 비율로 레이아웃을 구성하는 방법은?

만약 두 개의 위젯을 놓고 그 사이에 공백을 나누어 각각의 넓이 비율을 정하고 싶다면, Spacer를 사용하여 간단히 구현할 수 있습니다.

예를 들어, 다음 코드는 Spacer를 사용하여 화면을 위, 아래, 가운데로 나누고 각 영역을 1:2:1의 비율로 나타내는 방법입니다.

Column(
  children: <Widget>[
    Spacer(flex: 1),
    Container(
      height: 100,
      color: Colors.blue,
    ),
    Spacer(flex: 2),
    Container(
      height: 100,
      color: Colors.green,
    ),
    Spacer(flex: 1),
  ],
)

위 예제에서 Spacer 위젯은 각 Container 위젯을 감싸고 있으며, flex 속성을 사용하여 각 영역의 상대적인 비율을 설정합니다.

이러한 방식으로 Spacer를 이용하면 유연하고 간편하게 간격이 고려된 비율로 레이아웃을 구성할 수 있습니다.