[flutter] 플러터 Column의 자식 위젯들 간 간격 조절하기

20 Dec 2023

flutter

플러터에서 Column의 자식 위젯들 간의 간격을 조절하려면 MainAxisAlignment와 CrossAxisAlignment 속성을 사용할 수 있습니다. MainAxisAlignment 속성은 자식 위젯들을 수직 방향으로 정렬하고, CrossAxisAlignment 속성은 수평 방향으로 정렬합니다.

아래는 Column 위젯을 사용하여 자식 위젯들 간의 간격을 조절하는 예시 코드입니다.

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Container(
      height: 50,
      width: 50,
      color: Colors.red,
    ),
    SizedBox(height: 20),
    Container(
      height: 50,
      width: 50,
      color: Colors.green,
    ),
    SizedBox(height: 20),
    Container(
      height: 50,
      width: 50,
      color: Colors.blue,
    ),
  ],
)

위의 예시 코드에서 mainAxisAlignment: MainAxisAlignment.spaceEvenly는 자식 위젯들 사이에 동일한 간격을 유지하도록 하고, SizedBox(height: 20)은 각 자식 위젯들 사이에 20의 간격을 추가합니다.

이제 Column 위젯을 사용하여 자식 위젯들 간의 간격을 조절하는 방법을 알았습니다. 간격을 조절하여 더 나은 UI를 만들어보세요!