36. Flutter에서 일정 간격이 있는 리스트 만들기 | Flutter

크리스탈 스타일, 그냥 모니터 박살난 느낌, dall-e

 

Flutter로 일정 간격이 있는 리스트 만들기

 

01. 서론

Flutter에서 리스트 간격의 필요성

Flutter는 크로스플랫폼 모바일 애플리케이션 개발을 위한 강력한 프레임워크로, 다양한 UI 구성 요소를 제공합니다. 많은 앱에서 리스트는 필수적인 UI 요소로 사용됩니다. 그러나 리스트 아이템 간의 간격을 적절히 조정하지 않으면, UI가 복잡해지고 사용자 경험이 저하될 수 있습니다. 적절한 간격을 두어 아이템을 배치하면 가독성이 향상되고, UI가 더 깔끔하고 정돈된 느낌을 줄 수 있습니다. 따라서 리스트 아이템 간의 간격을 조정하는 것은 매우 중요합니다.

Flutter의 LayoutBuilder와 ConstrainedBox 소개

Flutter에서 리스트 아이템 간의 간격을 조정하기 위해 LayoutBuilder와 ConstrainedBox를 사용할 수 있습니다. LayoutBuilder는 부모 위젯의 크기를 계산하여 자식 위젯의 레이아웃을 동적으로 설정할 수 있게 해주며, ConstrainedBox는 자식 위젯의 크기를 제한하는 데 사용됩니다. 이를 통해 리스트 아이템 간의 간격을 적절히 조정할 수 있습니다.

 

02. LayoutBuilder와 SingleChildScrollView 사용

LayoutBuilder와 SingleChildScrollView의 역할

LayoutBuilder는 부모 위젯의 제약 조건을 기반으로 자식 위젯의 레이아웃을 구성할 수 있도록 해줍니다. 이를 통해 자식 위젯이 부모 위젯의 크기에 따라 동적으로 크기와 배치를 조정할 수 있습니다. SingleChildScrollView는 자식 위젯을 스크롤 가능하게 만들어주는 위젯으로, 리스트 아이템이 화면 크기를 초과할 때 유용합니다. LayoutBuilder와 SingleChildScrollView를 함께 사용하면 리스트 아이템 간의 간격을 조정하면서 스크롤 가능한 리스트를 만들 수 있습니다.

기본 코드 예제

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('Spaced List Example'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ItemWidget(text: 'Item 1'),
                  ItemWidget(text: 'Item 2'),
                  ItemWidget(text: 'Item 3'),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  final String text;

  ItemWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.blueAccent,
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }
}

위 예제 코드를 실행하면, 화면에 세 개의 리스트 아이템이 일정 간격을 두고 배치된 것을 확인할 수 있습니다. 각 아이템은 ItemWidget으로 구성되며, 배경색과 패딩이 적용되어 있습니다.

 

03. ConstrainedBox를 사용한 최소 높이 설정

ConstrainedBox의 역할과 사용 방법

ConstrainedBox는 자식 위젯의 크기를 제한하는 역할을 합니다. 이 위젯을 사용하면 자식 위젯의 최소 또는 최대 크기를 설정할 수 있으며, 이를 통해 리스트 아이템 간의 간격을 조정할 수 있습니다. 특히 리스트가 스크롤 가능해야 할 때, ConstrainedBox를 사용하여 자식 위젯의 최소 높이를 부모 위젯의 높이로 설정하면 아이템들이 균등한 간격을 유지하면서 화면에 배치될 수 있습니다.

코드 예제와 설명

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('ConstrainedBox Example'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: Column(
                children: [
                  ItemWidget(text: 'Item 1'),
                  ItemWidget(text: 'Item 2'),
                  ItemWidget(text: 'Item 3'),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  final String text;

  ItemWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.blueAccent,
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }
}

이 코드는 ConstrainedBox를 사용하여 자식 위젯의 최소 높이를 부모 위젯의 최대 높이로 설정합니다. 이를 통해 리스트 아이템들이 균등한 간격을 유지하면서 화면에 배치됩니다.

 

04. 일정 간격의 아이템이 있는 Column 생성

Column과 mainAxisAlignment.spaceBetween 사용

Column 위젯은 자식 위젯을 세로로 나열하는 데 사용됩니다. mainAxisAlignment 속성을 사용하여 자식 위젯 간의 간격을 조정할 수 있습니다. mainAxisAlignment.spaceBetween을 사용하면 첫 번째와 마지막 자식 위젯은 시작과 끝에 배치되고, 나머지 자식 위젯들은 균등한 간격을 두고 배치됩니다.

다양한 예제 코드

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('Spaced Items Column Example'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  ItemWidget(text: 'Item 1'),
                  ItemWidget(text: 'Item 2'),
                  ItemWidget(text: 'Item 3'),
                ],
              ),
            ),
          );
        }),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  final String text;

  ItemWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.blueAccent,
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }
}

이 코드는 Column 위젯의 mainAxisAlignment를 MainAxisAlignment.spaceBetween으로 설정하여 각 아이템 간의 간격을 균등하게 만듭니다.

 

05. Spacer와 Expanded를 사용한 고급 설정

Spacer와 Expanded의 역할

Spacer와 Expanded는 Flutter에서 자식 위젯 간의 간격을 조정하거나, 자식 위젯이 가능한 모든 공간을 차지하도록 만드는 데 사용되는 위젯입니다.

• Spacer: 부모 위젯 내에서 빈 공간을 만들어줍니다. Spacer는 다른 자식 위젯 사이에 균등한 간격을 추가할 때 유용합니다.
• Expanded: 자식 위젯이 가능한 모든 공간을 차지하도록 만듭니다. Expanded는 자식 위젯이 남은 공간을 모두 사용할 수 있도록 하는 데 유용합니다.

IntrinsicHeight를 사용한 예제 코드

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 and Expanded Example'),
        ),
        body: LayoutBuilder(builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: IntrinsicHeight(
                child: Column(
                  children: [
                    ItemWidget(text: 'Item 1'),
                    Spacer(),
                    ItemWidget(text: 'Item 2'),
                    Expanded(
                      child: ItemWidget(text: 'Item 3'),
                    ),
                  ],
                ),
              ),
            ),
          );
        }),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  final String text;

  ItemWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.blueAccent,
      child: Text(
        text,
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }
}

이 코드는 Spacer와 Expanded를 사용하여 각 아이템 간의 간격을 더욱 세밀하게 조정합니다. Spacer는 빈 공간을 추가하여 아이템 간의 간격을 넓히고, Expanded는 마지막 아이템이 가능한 모든 공간을 차지하도록 합니다.

 

06. 결론

리스트 간격 조정의 장점

리스트 아이템 간의 간격을 조정하면 다음과 같은 장점을 얻을 수 있습니다.

• 가독성 향상: 리스트 아이템 간의 간격을 적절히 조정하면 UI가 더 깔끔하고 정돈된 느낌을 줍니다. 이를 통해 사용자가 정보를 더 쉽게 읽고 이해할 수 있습니다.
• 시각적 매력: 적절한 간격을 두어 아이템을 배치하면 시각적으로 매력적인 인터페이스를 만들 수 있습니다. 이는 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
• UI 구성의 유연성: Spacer와 Expanded와 같은 위젯을 사용하면 리스트 아이템 간의 간격을 세밀하게 조정할 수 있어 다양한 레이아웃을 유연하게 구성할 수 있습니다.

추가 리소스 및 학습 자료

Flutter에서 리스트 아이템 간의 간격을 조정하는 방법에 대해 더 깊이 학습하고 싶다면 아래의 리소스를 참고하세요.

• Flutter 공식 문서 - LayoutBuilder
• Write your first app

이 리소스들을 활용하여 Flutter에서 리스트 아이템 간의 간격을 조정하는 다양한 방법을 더욱 효율적으로 구현하고, 다양한 사용자 인터페이스를 제작해보세요.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.29 - [Study] - 32. Flutter ListView 사용법: 효과적인 리스트 구현 전략 | Flutter

32. Flutter ListView 사용법: 효과적인 리스트 구현 전략 | Flutter

2024.07.29 - [Study] - 31. Flutter에서 레이아웃을 구성하는 방법: 단계별 가이드 | Flutter

31. Flutter에서 레이아웃을 구성하는 방법: 단계별 가이드 | Flutter

2024.07.28 - [Study] - 30. Flutter 레이아웃 완벽 가이드: 기본부터 고급까지 | Flutter

30. Flutter 레이아웃 완벽 가이드: 기본부터 고급까지 | Flutter

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)