[flutter] 플러터 sticky 헤더를 가진 투표 앱 구현하기

30 Nov 2023

flutter

이번 포스트에서는 플러터를 사용하여 sticky 헤더를 가진 투표 앱을 구현하는 방법에 대해 알아보겠습니다. sticky 헤더란, 스크롤이 되어도 항상 화면 상단에 고정되는 헤더입니다. 이를 통해 사용자에게 편리한 경험을 제공할 수 있습니다.

필요한 패키지 설치

프로젝트를 시작하기 전에 sticky_headers 패키지를 설치해야 합니다. 이 패키지는 sticky 헤더를 구현할 수 있는 기능을 제공합니다. 다음 명령어를 사용하여 패키지를 설치하세요.

flutter pub add sticky_headers

투표 앱 디자인

투표 앱의 화면은 다음과 같이 구성됩니다.

상단에 sticky 헤더가 있습니다.
스크롤 가능한 투표 목록이 표시됩니다.

디자인을 구현하기 위해 다음과 같은 위젯을 사용하겠습니다.

CustomScrollView: 스크롤 가능한 위젯을 만들기 위해 사용됩니다.
SliverAppBar: sticky 헤더를 구현하기 위해 사용됩니다.
SliverList: 스크롤 가능한 리스트를 만들기 위해 사용됩니다.

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

class PollApp extends StatefulWidget {
  const PollApp({Key? key}) : super(key: key);

  @override
  _PollAppState createState() => _PollAppState();
}

class _PollAppState extends State<PollApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true, // sticky 헤더를 고정합니다.
            title: Text('투표 앱'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                // 투표 목록을 반환합니다.
              },
              childCount: 10, // 투표 항목 개수
            ),
          ),
        ],
      ),
    );
  }
}

투표 항목 생성

투표 항목을 생성하기 위해 SliverChildBuilderDelegate를 사용합니다. SliverChildBuilderDelegate는 builder 함수를 통해 각 항목을 생성하며, childCount로 항목의 개수를 정의합니다. 아래 코드는 투표 항목을 생성하는 예시입니다.

SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return StickyHeader(
        header: Container(
          height: 50,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('투표 항목 $index', style: TextStyle(color: Colors.white)),
        ),
        content: Container(
          height: 100,
          color: Colors.white,
          alignment: Alignment.center,
          child: Text('투표 항목 내용 $index'),
        ),
      );
    },
    childCount: 10,
  ),
),

위 코드는 StickyHeader를 사용하여 각 투표 항목을 구성합니다. header 위젯은 투표 항목의 제목을, content 위젯은 투표 항목의 내용을 보여줍니다.

이제 투표 앱을 실행하면 sticky 헤더를 가진 투표 앱을 확인할 수 있습니다.

결론

이번 포스트에서는 플러터를 사용하여 sticky 헤더를 가진 투표 앱을 구현하는 방법을 알아보았습니다. sticky_headers 패키지를 사용하여 편리하고 유저 친화적인 투표 앱을 만들 수 있습니다. 플러터를 사용하여 앱을 개발할 때 유용한 패키지들을 적극적으로 활용해보세요.