최근 Flutter 3.27 stable 버전이 배포되었습니다.

성능 최적화, 버그 수정 등 여러 가지 변경사항이 있었습니다만, 그중에서도 가장 와닿았던 변경점 한 가지를 소개해드리려고 합니다.

---

Column / Row children 사이 공간 삽입

Column 또는 Row 위젯을 사용할 때, 자식 위젯들 사이에 공간을 주려면 사이사이에 직접 SizedBox 등을 이용해 빈 공간을 삽입해야만 했습니다.

Column(
    children: [
        ChildWidget(),
        SizedBox(height: 10),
        ChildWidget(),
        SizedBox(height: 10),
        ChildWidget(),
    ],
),

Row(
    children: [
        ChildWidget(),
        SizedBox(width: 10),
        ChildWidget(),
        SizedBox(width: 10),
        ChildWidget(),
    ],
),

지금은 어느 정도 적응해버려 별 생각이 없게 됐지만, 처음에는 이런 상황을 맞이할 때마다 CSS의 gap을 떠올리며 불편하다고 궁시렁대던 기억이 납니다.

자식 위젯이 많아질수록 SizedBox 위젯도 늘려야 했습니다.

만약 Column이 Row로, 또는 Row가 Column으로 변경되면, 모든 자식 SizedBox의 height와 width도 바꿔줘야 했습니다.

반복문이라도 쓰려고 하면, 각 요소의 앞이나 뒤에 SizedBox 위젯을 붙여주는 로직에다 첫 번째 또는 마지막 자식을 예외 처리하는, 참 난잡한 방식을 사용해야 했습니다.

spacing

이번 업데이트로 Column과 Row 위젯에 spacing 필드가 추가됐습니다. 사이 공간을 얼마나 줄지 한 번만 입력하면, 모든 자식들 사이에 해당 크기만큼의 공간이 만들어집니다.

Column(
    spacing: 12,
    children: [
        ChildWidget(),
        ChildWidget(),
        ChildWidget(),
    ],
),

Row(
    spacing: 12,
    children: [
        ChildWidget(),
        ChildWidget(),
        ChildWidget(),
    ],
),

한눈에 봐도 코드가 훨씬 직관적이고 깔끔해졌습니다.

더 이상 자식이 늘어날 때마다 SizedBox를 함께 추가할 일도 없고, Column과 Row가 서로 바뀌더라도 위젯 이름 말고는 더 수정할 것이 없습니다.

.

왜 진작 이런 게 없었나 싶었는데, 드디어 생기니 기분이 좋네요.

Flutter 3.27 업데이트의 자세한 내용은 Flutter 3.27.0 release notes에서 확인할 수 있습니다.

---

출처
https://docs.flutter.dev/release/release-notes/release-notes-3.27.0