[flutter] 헤더가 있는 플러터 그룹화된 리스트뷰 만들기

30 Nov 2023

flutter

플러터(Flutter)에서 헤더가 있는 그룹화된 리스트뷰를 만들고 싶으셨나요? 이 기능을 구현하기 위해서는 ListView.builder와 ListView.separated를 사용하여 리스트를 그룹화하고, 헤더를 추가해야 합니다. 이번 가이드에서는 이러한 기능을 구현하는 방법을 알려드리겠습니다.

1. 리스트뷰 구성하기

먼저, 리스트뷰를 구성하는 방법을 알아보겠습니다. ListView.builder와 ListView.separated는 List을 받아서 리스트를 생성합니다. 따라서, 그룹별로 리스트 아이템을 생성하는 함수를 먼저 작성해야 합니다.

Widget itemBuilder(BuildContext context, int index) {
  // 리스트 아이템 생성 로직 작성
}

Widget separatorBuilder(BuildContext context, int index) {
  // 구분선 생성 로직 작성
}

ListView.builder(
  itemCount: itemCount,
  itemBuilder: itemBuilder,
  separatorBuilder: separatorBuilder,
)

itemBuilder 함수는 이전에 만든 그룹화된 데이터를 통해 해당 그룹의 아이템을 생성하는 로직을 작성해야 합니다. separatorBuilder 함수는 아이템과 아이템 사이에 구분선을 추가하는 로직을 작성해야 합니다.

2. 헤더 추가하기

이제 헤더를 추가해보겠습니다. 헤더를 위한 위젯을 작성하고, itemBuilder 함수를 수정하여 헤더와 아이템을 함께 반환하도록 합니다.

Widget groupHeaderBuilder(BuildContext context, int index) {
  // 그룹 헤더 위젯 생성 로직 작성
}

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
    if (index.isEven) {
      // 짝수 번째 인덱스일 경우, 헤더를 생성
      return groupHeaderBuilder(context, index);
    } else {
      // 홀수 번째 인덱스일 경우, 아이템을 생성
      int itemIndex = index ~/ 2; // 아이템 인덱스 계산
      return itemBuilder(context, itemIndex);
    }
  },
  separatorBuilder: separatorBuilder,
)

위 코드에서는 짝수 번째 인덱스일 경우에는 헤더를 생성하고, 홀수 번째 인덱스일 경우에는 아이템을 생성하도록 하였습니다.

3. 완성된 예제

아래 예제는 제품 카테고리별로 그룹화된 리스트뷰를 구현하는 예제입니다.

import 'package:flutter/material.dart';

class Product {
  final String category;
  final String name;

  Product(this.category, this.name);
}

List<Product> products = [
  Product('Electronics', 'Smartphone'),
  Product('Electronics', 'Tablet'),
  Product('Clothing', 'Shirt'),
  Product('Clothing', 'Pants'),
  Product('Furniture', 'Chair'),
  Product('Furniture', 'Table'),
];

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Grouped ListView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductsPage(),
    );
  }
}

class ProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grouped ListView Example'),
      ),
      body: ListView.separated(
        itemCount: products.length,
        itemBuilder: (BuildContext context, int index) {
          if (index.isEven) {
            return Container(
              color: Colors.grey[200],
              padding: EdgeInsets.all(16.0),
              child: Text(
                products[index].category,
                style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              ),
            );
          } else {
            int itemIndex = index ~/ 2;
            return ListTile(
              title: Text(products[itemIndex].name),
            );
          }
        },
        separatorBuilder: (BuildContext context, int index) {
          return Divider();
        },
      ),
    );
  }
}

이 예제에서는 제품 카테고리별로 그룹화된 리스트뷰를 보여주고 있습니다. 짝수 번째 인덱스에는 카테고리 헤더를 생성하고, 홀수 번째 인덱스에는 해당 카테고리의 제품을 생성합니다.

이제, 헤더가 있는 그룹화된 리스트뷰를 구현하는 방법을 알게 되었습니다. 이제 여러분의 앱에 이 기능을 적용해서 사용자에게 더 나은 경험을 제공해보세요!

참고 자료: