Flutter로 여백이 있는 리스트 만들기: LayoutBuilder와 ConstrainedBox 활용 가이드

Flutter는 다양한 UI 요소를 제공하며, 그중 리스트에 여백을 추가하여 시각적으로 깔끔한 디자인을 구현하는 방법은 사용자 경험을 향상시키는 핵심 기술입니다. 이번 글에서는 LayoutBuilder, ConstrainedBox, 그리고 Column을 활용하여 여백이 있는 리스트를 만드는 방법을 자세히 알아봅니다.

참고. List with spaced items

리스트에 여백을 추가해야 하는 이유

리스트 아이템 간에 적절한 여백을 추가하면 다음과 같은 장점을 얻을 수 있습니다:

1. 가독성 향상: 아이템 간의 간격으로 콘텐츠 구분이 명확해집니다.
2. 적응형 디자인 구현: 화면 크기나 장치에 따라 유연하게 레이아웃이 조정됩니다.
3. 시각적 균형 유지: 디자인적으로 더욱 완성도 있는 화면을 제공합니다.

구현 방법: 3단계로 배우는 리스트 여백 추가

1. LayoutBuilder와 SingleChildScrollView 추가

리스트가 화면 크기를 초과할 경우 스크롤을 지원하기 위해 LayoutBuilder와 SingleChildScrollView를 사용합니다.

LayoutBuilder(
  builder: (context, constraints) {
    return SingleChildScrollView(
      child: Placeholder(),
    );
  },
);

2. ConstrainedBox를 활용한 높이 제약 설정

ConstrainedBox는 자식 위젯의 최소 높이를 제약하여, 화면 크기에 맞게 조정됩니다. 이를 통해 리스트가 적절히 배치될 수 있습니다.

LayoutBuilder(
  builder: (context, constraints) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraints.maxHeight),
        child: Placeholder(),
      ),
    );
  },
);

3. Column과 MainAxisAlignment로 아이템 간 간격 추가

아이템 간 간격을 추가하려면 Column의 mainAxisAlignment를 spaceBetween으로 설정합니다. 이를 통해 리스트가 균등한 간격으로 배치됩니다.

LayoutBuilder(
  builder: (context, constraints) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: BoxConstraints(minHeight: constraints.maxHeight),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Item 1'),
            Text('Item 2'),
            Text('Item 3'),
          ],
        ),
      ),
    );
  },
);

추가적으로 활용 가능한 위젯: Spacer와 Expanded

Spacer

리스트 내 고정된 간격을 추가하려면 Spacer를 사용합니다. 간단하게 간격을 조정할 수 있습니다.

Column(
  children: [
    Text('Item 1'),
    Spacer(),
    Text('Item 2'),
  ],
);

Expanded

특정 아이템이 여유 공간을 더 많이 차지하도록 설정하려면 Expanded를 활용합니다.

Column(
  children: [
    Text('Item 1'),
    Expanded(
      child: Text('Item 2'),
    ),
    Text('Item 3'),
  ],
);

활용 팁: 다양한 기기에 대한 적응형 디자인

1. 화면 크기 테스트:
   • 다양한 화면 크기에서 디자인을 테스트하여 유연성을 확인하세요.
2. IntrinisicHeight 사용:
   • Column 위젯을 IntrinsicHeight로 감싸 아이템 크기를 제한적으로 설정할 수 있습니다.

---

결론: Flutter에서 리스트 디자인을 한 단계 업그레이드하기

Flutter의 LayoutBuilder, ConstrainedBox, 그리고 Column을 사용하면 여백이 있는 깔끔한 리스트를 손쉽게 구현할 수 있습니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있으며, 디자인의 완성도를 높일 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(const SpacedItemsList());

class SpacedItemsList extends StatelessWidget {
  const SpacedItemsList({super.key});

  @override
  Widget build(BuildContext context) {
    const items = 4;

    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        cardTheme: CardTheme(color: Colors.blue.shade50),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: List.generate(
                    items, (index) => ItemWidget(text: 'Item $index')),
              ),
            ),
          );
        }),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  const ItemWidget({
    super.key,
    required this.text,
  });

  final String text;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: SizedBox(
        height: 100,
        child: Center(child: Text(text)),
      ),
    );
  }
}