Flutter의 Spacer 위젯으로 효율적으로 UI 배치하기

728x90

Flutter로 UI를 개발할 때는 다양한 위젯을 사용하여 레이아웃을 구성하게 됩니다. 그중 Spacer는 레이아웃 내의 빈 공간을 효과적으로 조절하는 데 매우 유용한 위젯입니다. Row, Column 등의 위젯 내부에서 사용해 위젯 사이에 간격을 조정하고 균형 잡힌 UI를 만들 수 있어 특히 반응형 디자인에 적합합니다.

이 글에서는 Spacer 위젯의 기본 개념과 사용법, 주요 속성에 대해 설명하고, 다양한 예제를 통해 Spacer 위젯을 활용하는 방법을 자세히 알아보겠습니다. Flutter의 Spacer 위젯을 이해하고 잘 활용하면 UI 레이아웃을 더욱 깔끔하고 효율적으로 구성할 수 있습니다.

1. Spacer 위젯이란?

Spacer 위젯은 부모 위젯(보통 Row 또는 Column) 내에서 남는 공간을 차지하는 역할을 합니다. 다른 위젯들 사이에 간격을 넣거나, 화면 비율에 맞춰 여백을 자동으로 조정하는 데 유용합니다. Spacer 위젯을 활용하면 Padding이나 SizedBox 없이도 적절한 간격을 배치할 수 있어 코드의 가독성도 높아집니다.

2. Spacer 위젯의 주요 속성

Spacer 위젯은 간단한 구조를 가지고 있어 설정해야 할 속성이 많지는 않지만, flex 속성을 통해 간격을 유연하게 조절할 수 있습니다.

flex: Spacer 위젯이 차지할 공간의 비율을 설정하는 속성입니다. 기본값은 1로 설정되어 있으며, 여러 Spacer 위젯이 있을 경우 flex 값에 따라 비율적으로 공간이 나누어집니다. 이로 인해 레이아웃 내에서 특정한 비율로 간격을 설정할 수 있습니다.

3. Spacer 위젯 기본 사용법

Spacer 위젯을 Row나 Column 위젯 안에서 사용해 간단히 간격을 조절하는 예제를 살펴보겠습니다. 다음 예제에서는 두 개의 버튼 사이에 Spacer를 넣어 간격을 생성하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Spacer 위젯 예제"),
        ),
        body: Center(
          child: Row(
            children: <Widget>[
              ElevatedButton(
                onPressed: () {},
                child: Text("Button 1"),
              ),
              Spacer(),
              ElevatedButton(
                onPressed: () {},
                child: Text("Button 2"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이 예제에서 Row 위젯 내에 Spacer 위젯을 넣어 두 개의 버튼 사이에 빈 공간을 만들었습니다. Spacer는 flex 값을 통해 이 공간을 유연하게 조절할 수 있으며, 두 버튼이 양쪽 끝으로 자동 배치되어 깔끔한 레이아웃을 제공합니다.

4. Spacer 위젯의 다양한 활용 예제

1) 다중 Spacer 사용

여러 개의 Spacer 위젯을 활용해 각각 다른 비율로 간격을 설정할 수도 있습니다. 예를 들어, 세 개의 버튼 사이에 Spacer 위젯을 두 개 넣고, 각 Spacer에 flex 값을 다르게 지정하여 원하는 간격을 구현할 수 있습니다.

Row(
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Text("Button 1"),
    ),
    Spacer(flex: 1),
    ElevatedButton(
      onPressed: () {},
      child: Text("Button 2"),
    ),
    Spacer(flex: 2),
    ElevatedButton(
      onPressed: () {},
      child: Text("Button 3"),
    ),
  ],
)

위 예제에서는 첫 번째 Spacer는 flex: 1, 두 번째 Spacer는 flex: 2로 설정되어 있습니다. 이를 통해 버튼들 사이의 간격을 비율적으로 조정하여 더 균형 잡힌 배치를 만들 수 있습니다.

2) Column 내에서 Spacer 활용

Spacer는 Column 위젯 내에서도 동일하게 사용 가능합니다. 화면의 상단과 하단을 비율적으로 나누고, 특정 요소를 중앙에 배치하는 경우에도 유용합니다.

Column(
  children: <Widget>[
    Spacer(flex: 2),
    Text(
      "중앙에 배치된 텍스트",
      style: TextStyle(fontSize: 24),
    ),
    Spacer(flex: 1),
    ElevatedButton(
      onPressed: () {},
      child: Text("하단 버튼"),
    ),
  ],
)

위 예제에서는 텍스트가 화면의 중간에 배치되며, 버튼이 하단에 위치하게 됩니다. flex 값을 조절하여 위젯의 위치를 유동적으로 바꿀 수 있습니다.

5. Spacer 위젯을 사용할 때 유의할 점

Row와 Column 내에서만 사용 가능: Spacer 위젯은 반드시 Row나 Column과 같은 Flex 위젯 내에서만 사용할 수 있습니다. 다른 컨테이너에서는 동작하지 않으므로, Spacer 사용 시 위젯 계층 구조를 고려해야 합니다.
불필요한 Spacer 사용 피하기: 간격을 세밀하게 조정할 때 Padding이나 SizedBox와 혼합하여 사용하는 경우가 있습니다. Spacer는 동적인 비율을 지정하는 데 유용하므로, 고정 간격이 필요할 경우 SizedBox를 사용하는 것이 더 적합합니다.

6. Spacer와 다른 간격 위젯 비교하기

Spacer 위젯과 함께 간격을 조절할 때 자주 사용되는 SizedBox와 Padding 위젯과 비교해 보겠습니다.

Spacer	남은 공간을 비율에 따라 채워주는 역할을 합니다.	Row나 Column 내에서 유연한 간격을 조절할 때 사용
SizedBox	특정한 크기의 고정 간격을 제공합니다.	고정된 간격이 필요할 때 사용
Padding	부모 위젯과의 간격을 조정할 때 사용됩니다.	외부 위젯과의 간격 조절이 필요할 때 사용

예를 들어, SizedBox(width: 20)는 Spacer와 달리 20픽셀 고정 간격을 주기 때문에, 레이아웃의 크기에 관계없이 항상 동일한 크기를 유지합니다. 반면 Spacer는 주어진 공간 내에서 동적으로 간격을 맞추기 때문에, 반응형 레이아웃 구현에 더 유용합니다.

7. Spacer를 이용한 반응형 레이아웃 구성하기

모바일 디바이스의 화면 크기에 맞춰 간격을 자동으로 조정하고 싶다면, Spacer와 함께 MediaQuery를 사용할 수 있습니다. 다음 예제는 화면 크기에 따라 위젯 간의 간격을 동적으로 변경하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

class ResponsiveSpacerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(title: Text("Responsive Spacer Example")),
      body: Center(
        child: Row(
          children: [
            Icon(Icons.star),
            Spacer(flex: (screenWidth > 600) ? 2 : 1),
            Icon(Icons.star),
            Spacer(flex: (screenWidth > 600) ? 3 : 1),
            Icon(Icons.star),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 화면의 넓이가 600픽셀 이상일 때와 미만일 때 flex 값을 다르게 설정하여, 화면 크기에 따라 간격이 유연하게 조정됩니다. 이를 통해 다양한 디바이스에 대응하는 반응형 레이아웃을 쉽게 구현할 수 있습니다.

결론

Flutter의 Spacer 위젯은 레이아웃 내에서 유연한 간격을 제공하여 UI를 효율적으로 배치하는 데 도움을 줍니다. 특히 반응형 UI를 구성할 때 강력한 기능을 제공하며, Row와 Column 내에서 다른 위젯들과 조합하여 사용하는 경우에 유용합니다. 간격을 비율적으로 조절하고 싶다면, Spacer 위젯을 적극적으로 활용하여 코드의 가독성과 유지보수성을 높일 수 있습니다.