[flutter] ListView에 아이템 그룹핑하기

08 Dec 2023

flutter

Flutter 앱을 개발할 때, ListView 위젯을 사용하면 화면에 스크롤 가능한 목록을 표시할 수 있습니다. ListView는 대량의 데이터를 효율적으로 표시하는 데 유용한데, 이번에는 ListView에 다양한 항목들을 그룹핑하여 표시하는 방법에 대해 알아보겠습니다.

ListView.builder로 그룹핑된 아이템 표시하기

ListView.builder를 사용하여 그룹화된 아이템을 표시하는 것은 매우 간단합니다. 아래는 간단한 예제 코드입니다.

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('그룹핑된 아이템')),
        body: ListView.builder(
          itemCount: _groupedItems.length,
          itemBuilder: (BuildContext context, int index) {
            return _buildGroupedItem(_groupedItems[index]);
          },
        ),
      ),
    );
  }
}

List<String> _groupedItems = [
  '그룹 1 - 아이템 1',
  '그룹 1 - 아이템 2',
  '그룹 2 - 아이템 1',
  '그룹 2 - 아이템 2',
];

Widget _buildGroupedItem(String item) {
  return ListTile(
    title: Text(item),
  );
}

위 예제에서 ListView.builder가 _groupedItems 목록의 각 항목을 받아와서 _buildGroupedItem 함수로 전달하여 각 그룹에 있는 아이템들을 표시합니다.

ListView를 사용하여 그룹핑하기

만약 ListView.builder를 사용하는 것보다 더 많은 제어를 원한다면, ListView를 직접 사용하여 그룹핑된 목록을 만들 수 있습니다.

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('그룹핑된 아이템')),
        body: ListView(
          children: _groupedItems
              .map((group) => Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          group.title,
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      Column(
                        children: group.items
                            .map((item) => ListTile(title: Text(item)))
                            .toList(),
                      ),
                    ],
                  ))
              .toList(),
        ),
      ),
    );
  }
}

class Group {
  final String title;
  final List<String> items;

  Group(this.title, this.items);
}

List<Group> _groupedItems = [
  Group('그룹 1', ['아이템 1', '아이템 2']),
  Group('그룹 2', ['아이템 3', '아이템 4']),
];

위 예제에서 ListView는 _groupedItems 목록을 반복하면서 각 그룹의 제목과 항목들을 표시합니다.

이러한 방법을 사용하여 ListView를 그룹핑하여 편리하게 다양한 목록 데이터를 표시할 수 있습니다.

요약

ListView를 사용하여 그룹핑된 아이템들을 표시하는 방법을 살펴보았습니다. ListView.builder나 ListView를 사용하여 효율적으로 그룹핑된 목록을 만들 수 있습니다. 이러한 방법을 사용하면 다양한 구조의 데이터를 가진 앱을 개발할 때 효과적으로 화면에 표시할 수 있습니다.

참고: Flutter ListView 문서