[flutter] 플러터에서 sticky 헤더를 추가한 확장 가능한 리스트뷰 만들기

30 Nov 2023

flutter

이번 튜토리얼에서는 플러터를 사용하여 확장 가능한 리스트뷰를 만들고, 각 섹션에 Sticky 헤더를 추가하는 방법에 대해 알아보겠습니다.

개요

확장 가능한 리스트뷰는 사용자가 섹션을 펼치거나 접을 수 있는 리스트뷰로, 대부분의 앱에서 채팅 목록, 일정 관리 등에 사용됩니다. 이 튜토리얼에서는 플러터 패키지 중 하나인 expansion_tile을 사용하여 확장 가능한 리스트뷰를 생성합니다. 또한, Sticky 헤더를 추가하여 사용자가 스크롤할 때 헤더가 화면 위쪽에 고정되도록 구현합니다.

필요한 패키지 설치

플러터 프로젝트에는 확장 가능한 리스트뷰와 Sticky 헤더를 구현하기 위해 다음 패키지들이 필요합니다:

dependencies:
  flutter:
    sdk: flutter
  expansion_tile: ^3.1.0
  sticky_headers: ^0.2.0

프로젝트의 pubspec.yaml 파일에 위의 코드를 추가하고, 터미널에서 flutter packages get을 실행하여 패키지를 설치합니다.

확장 가능한 리스트뷰 생성

먼저, expansion_tile 패키지를 이용하여 확장 가능한 리스트뷰를 생성합니다. 다음과 같이 코드를 작성하여 리스트뷰를 생성합니다:

import 'package:flutter/material.dart';
import 'package:expansion_tile/expansion_tile.dart';

class ExpandableListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 5,
      itemBuilder: (context, index) => ExpansionTile(
        title: Text('Section ${index+1}'),
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 3'),
          ),
        ],
      ),
    );
  }
}

위 코드에서, ListView.builder를 사용하여 리스트뷰를 생성하고, ExpansionTile 위젯을 각 섹션에 대해 추가합니다. ExpansionTile 위젯의 title 매개변수에서 섹션의 제목을 설정하고, children 매개변수에서 섹션 내용을 설정합니다.

스티키 헤더 추가

이제, Sticky 헤더를 추가하여 확장 가능한 리스트뷰에서 헤더를 화면 위에 고정시킬 수 있습니다. sticky_headers 패키지를 사용하여 Sticky 헤더를 생성합니다:

import 'package:flutter/material.dart';
import 'package:expansion_tile/expansion_tile.dart';
import 'package:sticky_headers/sticky_headers.dart';

class ExpandableListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 5,
      itemBuilder: (context, index) => StickyHeader(
        header: Container(
          height: 50,
          color: Colors.blueGrey[700],
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: Text(
            'Section ${index+1}',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.0,
            ),
          ),
        ),
        content: Column(
          children: [
            ListTile(
              title: Text('Item 1'),
            ),
            ListTile(
              title: Text('Item 2'),
            ),
            ListTile(
              title: Text('Item 3'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서는 StickyHeader 위젯을 ExpansionTile 위젯 대신 사용하고, header 매개변수에 Sticky 헤더의 내용을 작성할 컨테이너를 추가합니다. content 매개변수에는 각 섹션의 내용을 작성합니다.

결론

이제 확장 가능한 리스트뷰를 생성하고, Sticky 헤더를 추가하는 방법을 알았습니다. expansion_tile 패키지를 사용하여 확장 가능한 리스트뷰를 생성하고, sticky_headers 패키지를 사용하여 Sticky 헤더를 추가합니다. 이를 통해 사용자 친화적인 UI를 구현할 수 있으며, 다양한 앱에서 활용할 수 있습니다.

참고 링크:

목차

개요

필요한 패키지 설치

확장 가능한 리스트뷰 생성

스티키 헤더 추가

결론