35. Flutter로 다양한 유형의 아이템이 포함된 리스트 만들기 | Flutter

실크 스크린 스타일, dall-e

 

Flutter로 다양한 유형의 아이템이 포함된 리스트 만들기

 

01. 서론

Flutter에서 혼합형 리스트의 필요성

Flutter는 크로스플랫폼 모바일 애플리케이션 개발을 위한 강력한 프레임워크입니다. 많은 앱에서 리스트는 필수적인 UI 요소로 사용됩니다. 리스트는 사용자에게 많은 정보를 간결하게 제공하는 데 유용하지만, 경우에 따라서는 다양한 유형의 아이템을 한 리스트에 표시해야 할 필요가 있습니다. 예를 들어, 채팅 애플리케이션에서는 메시지, 이미지, 알림 등을 모두 하나의 리스트에 혼합하여 표시해야 합니다. 이러한 혼합형 리스트는 사용자의 이해를 돕고, 시각적으로 더 매력적인 인터페이스를 제공합니다.

Flutter의 ListView 소개

Flutter의 ListView 위젯은 스크롤 가능한 리스트를 만드는 데 사용됩니다. 기본적으로 ListView는 동일한 유형의 아이템을 나열하지만, ListView.builder()를 사용하면 다양한 유형의 아이템을 동적으로 생성하고 관리할 수 있습니다. ListView.builder()는 리스트의 각 아이템을 필요한 시점에 생성하여, 아이템 유형에 따라 적절한 위젯을 반환할 수 있도록 합니다. 이를 통해 혼합형 리스트를 손쉽게 구현할 수 있습니다.

 

02. 다양한 유형의 아이템 정의

아이템 유형 클래스 정의

혼합형 리스트를 구현하기 위해서는 먼저 각 아이템 유형을 나타내는 클래스를 정의해야 합니다. 예제에서는 ListItem, HeadingItem, MessageItem 세 가지 클래스를 정의합니다. ListItem은 추상 클래스이며, HeadingItem과 MessageItem은 이를 상속받아 구체적인 아이템 유형을 나타냅니다.

• ListItem: 추상 클래스, 공통 메서드 정의
• HeadingItem: 제목을 나타내는 클래스
• MessageItem: 메시지를 나타내는 클래스

abstract class ListItem {
  Widget buildTitle(BuildContext context);
  Widget buildSubtitle(BuildContext context);
}

class HeadingItem implements ListItem {
  final String heading;
  HeadingItem(this.heading);

  @override
  Widget buildTitle(BuildContext context) {
    return Text(
      heading,
      style: Theme.of(context).textTheme.headlineSmall,
    );
  }

  @override
  Widget buildSubtitle(BuildContext context) => const SizedBox.shrink();
}

class MessageItem implements ListItem {
  final String sender;
  final String body;
  MessageItem(this.sender, this.body);

  @override
  Widget buildTitle(BuildContext context) => Text(sender);

  @override
  Widget buildSubtitle(BuildContext context) => Text(body);
}

아이템 클래스 구현 코드 예제

위의 코드는 다양한 유형의 아이템을 정의하기 위한 클래스 예제입니다. 각 클래스는 ListItem 추상 클래스를 상속받아 `buildTitle`과 `buildSubtitle` 메서드를 구현합니다.

• HeadingItem: `heading`이라는 문자열을 받아 타이틀로 표시합니다. 서브타이틀은 빈 공간으로 설정됩니다.
• MessageItem: `sender`와 `body`라는 문자열을 받아 타이틀과 서브타이틀로 표시합니다.

이러한 클래스를 사용하면, 다음과 같이 다양한 유형의 아이템을 포함하는 리스트를 생성할 수 있습니다.

final items = List.generate(
  1000,
  (i) => i % 6 == 0
      ? HeadingItem('Heading $i')
      : MessageItem('Sender $i', 'Message body $i'),
);

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];
    return ListTile(
      title: item.buildTitle(context),
      subtitle: item.buildSubtitle(context),
    );
  },
);

 

03. 아이템 리스트 생성

데이터 소스에서 아이템 리스트 생성

Flutter에서 다양한 유형의 아이템을 포함하는 리스트를 생성하려면, 먼저 데이터 소스를 준비해야 합니다. 데이터 소스는 인터넷, 로컬 데이터베이스 또는 정적으로 정의된 데이터일 수 있습니다. 이번 예제에서는 정적으로 정의된 데이터를 사용하여 다양한 아이템 리스트를 생성합니다.

예제 코드와 설명

final items = List.generate(
  1000,
  (i) => i % 6 == 0
      ? HeadingItem('Heading $i')
      : MessageItem('Sender $i', 'Message body $i'),
);

이 코드는 1000개의 아이템을 생성합니다. 인덱스가 6의 배수인 경우 `HeadingItem`을 생성하고, 그렇지 않은 경우 `MessageItem`을 생성합니다. 이를 통해 다양한 유형의 아이템이 포함된 리스트를 쉽게 만들 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final items = List.generate(
      1000,
      (i) => i % 6 == 0
          ? HeadingItem('Heading $i')
          : MessageItem('Sender $i', 'Message body $i'),
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mixed List Example'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(
              title: item.buildTitle(context),
              subtitle: item.buildSubtitle(context),
            );
          },
        ),
      ),
    );
  }
}

 

04. 데이터 소스를 위젯 리스트로 변환

ListView.builder()를 사용한 위젯 변환

`ListView.builder()`는 데이터 소스에서 아이템을 동적으로 생성하고, 이를 위젯으로 변환하는 데 사용됩니다. 이 메서드는 리스트의 각 아이템을 필요한 시점에 생성하여, 성능을 최적화합니다. 데이터 소스에서 가져온 아이템을 적절한 위젯으로 변환하기 위해 빌더 함수를 사용합니다.

빌더 함수 구현 방법

빌더 함수는 리스트의 각 인덱스에 대해 호출되며, 해당 인덱스의 데이터를 기반으로 적절한 위젯을 반환합니다. 여기서는 앞서 생성한 `HeadingItem`과 `MessageItem`을 적절한 위젯으로 변환하는 빌더 함수를 구현합니다.

예제 코드와 설명

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];
    return ListTile(
      title: item.buildTitle(context),
      subtitle: item.buildSubtitle(context),
    );
  },
);

이 코드는 `ListView.builder()`를 사용하여 데이터 소스의 각 아이템을 적절한 위젯으로 변환합니다. `itemCount` 속성은 리스트의 아이템 수를 지정하고, `itemBuilder` 속성은 각 아이템을 위젯으로 변환하는 함수를 정의합니다.

실행 결과

위 예제 코드를 실행하면, 다음과 같은 결과를 얻을 수 있습니다:

• 리스트는 1000개의 아이템을 포함하며, 각 아이템은 `HeadingItem` 또는 `MessageItem`으로 표시됩니다.
• `HeadingItem`은 제목을 표시하고, `MessageItem`은 발신자와 메시지 본문을 표시합니다.
• 리스트는 스크롤 가능하며, 각 아이템은 `ListTile` 위젯을 사용하여 시각적으로 구분됩니다.

이 예제는 다양한 유형의 아이템을 포함하는 혼합형 리스트를 Flutter에서 쉽게 구현할 수 있는 방법을 보여줍니다. 데이터 소스를 위젯 리스트로 변환하여 사용자에게 다양한 정보를 효과적으로 제공할 수 있습니다.

 

05. 고급 설정 및 커스터마이징

다양한 스타일 적용 방법

혼합형 리스트의 각 아이템에 다양한 스타일을 적용하여 사용자 인터페이스를 더욱 매력적으로 만들 수 있습니다. `ListTile` 위젯을 커스터마이징하거나, 다른 위젯을 사용하여 스타일을 변경할 수 있습니다.

예제: 다양한 스타일 적용

다음 예제에서는 `HeadingItem`과 `MessageItem`에 각각 다른 스타일을 적용합니다. `HeadingItem`에는 배경색과 패딩을 추가하고, `MessageItem`에는 아이콘을 추가합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final items = List.generate(
      1000,
      (i) => i % 6 == 0
          ? HeadingItem('Heading $i')
          : MessageItem('Sender $i', 'Message body $i'),
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Styled Mixed List Example'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return item is HeadingItem
                ? Container(
                    color: Colors.lightBlueAccent,
                    padding: EdgeInsets.all(16.0),
                    child: ListTile(
                      title: item.buildTitle(context),
                    ),
                  )
                : ListTile(
                    leading: Icon(Icons.message),
                    title: item.buildTitle(context),
                    subtitle: item.buildSubtitle(context),
                  );
          },
        ),
      ),
    );
  }
}

이 코드는 `HeadingItem`에 배경색과 패딩을 추가하고, `MessageItem`에는 메시지 아이콘을 추가하여 스타일을 차별화합니다.

추가 기능 및 최적화 방법

혼합형 리스트에 추가 기능을 적용하거나 성능을 최적화할 수 있는 몇 가지 방법을 살펴보겠습니다.

Lazy Loading

리스트가 많은 아이템을 포함할 때, 모든 아이템을 한 번에 렌더링하면 성능에 영향을 미칠 수 있습니다. 이를 해결하기 위해 Lazy Loading을 사용하여 필요한 아이템만 동적으로 로드할 수 있습니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    final item = items[index];
    return ListTile(
      title: item.buildTitle(context),
      subtitle: item.buildSubtitle(context),
    );
  },
);

`ListView.builder()`는 필요한 시점에만 아이템을 로드하여 성능을 최적화합니다.

애니메이션 효과

애니메이션을 추가하여 리스트의 아이템이 나타날 때 부드러운 효과를 줄 수 있습니다. 예를 들어, `AnimatedList`를 사용하여 애니메이션 효과를 적용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final GlobalKey _listKey = GlobalKey();
  final List _items = List.generate(
    1000,
    (i) => i % 6 == 0
        ? HeadingItem('Heading $i')
        : MessageItem('Sender $i', 'Message body $i'),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Mixed List Example'),
        ),
        body: AnimatedList(
          key: _listKey,
          initialItemCount: _items.length,
          itemBuilder: (context, index, animation) {
            final item = _items[index];
            return SlideTransition(
              position: animation.drive(
                Tween(
                  begin: Offset(1, 0),
                  end: Offset(0, 0),
                ).chain(CurveTween(curve: Curves.easeInOut)),
              ),
              child: ListTile(
                title: item.buildTitle(context),
                subtitle: item.buildSubtitle(context),
              ),
            );
          },
        ),
      ),
    );
  }
}

이 예제는 `AnimatedList`를 사용하여 리스트 아이템이 나타날 때 슬라이드 애니메이션을 적용합니다.

 

06. 결론

다양한 아이템 리스트 사용의 장점

혼합형 리스트는 다양한 유형의 데이터를 효과적으로 표시할 수 있는 강력한 도구입니다. 이를 통해 사용자는 정보를 더 직관적으로 이해할 수 있으며, 앱의 시각적 매력을 높일 수 있습니다.

• 유연성: 다양한 유형의 아이템을 한 리스트에 포함하여 유연하게 데이터를 표시할 수 있습니다.
• 사용자 경험 향상: 시각적으로 매력적인 인터페이스를 제공하여 사용자 경험을 향상시킬 수 있습니다.
• 효율성: 필요한 시점에만 아이템을 로드하는 Lazy Loading을 통해 성능을 최적화할 수 있습니다.

추가 리소스 및 학습 자료

Flutter에서 혼합형 리스트를 만드는 방법에 대해 더 깊이 학습하고 싶다면 아래의 리소스를 참고하세요.

• Flutter 공식 문서 - ListView

이 리소스들을 활용하여 Flutter에서 혼합형 리스트를 더욱 효율적으로 구현하고, 다양한 사용자 인터페이스를 제작해보세요.

---

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

 

2024.07.31 - [Study] - 33. Flutter ListView를 사용한 수평 리스트 제작 방법 | Flutter

33. Flutter ListView를 사용한 수평 리스트 제작 방법 | Flutter

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

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

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

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

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)