[flutter] 플러터 앱에서 sticky 헤더를 사용한 캠페인 모집 앱 만들기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터(Flutter) 앱에서 sticky 헤더를 사용하여 캠페인 모집 앱을 만드는 방법에 대해 알아보겠습니다.

개요

캠페인 모집 앱은 다양한 캠페인에 참여할 수 있는 기능을 제공하는 앱입니다. 이 앱을 개발할 때, 사용자 경험(UX)을 향상시키기 위해 sticky 헤더를 활용할 수 있습니다. sticky 헤더는 사용자가 앱을 스크롤 할 때 항상 화면 상단에 고정되어 있는 헤더를 말합니다.

플러터 패키지 설치

첫째로, sticky 헤더를 구현하기 위해 sticky_headers 패키지를 설치해야 합니다. 이 패키지는 플러터 앱에서 sticky 헤더를 쉽게 구현할 수 있도록 도와줍니다. 다음 명령을 사용하여 sticky_headers 패키지를 설치합니다.

flutter pub add sticky_headers

헤더 위젯 만들기

sticky 헤더를 구현하기 위해 헤더 위젯을 만들어야 합니다. 이 위젯은 sticky_headers 패키지의 StickyHeader 위젯을 사용하여 구현할 수 있습니다.

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

class CampaignHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StickyHeader(
      header: Container(
        height: 60,
        color: Colors.blue,
        child: Center(
          child: Text(
            '캠페인 목록',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
      ),
      content: Container(
        height: 200,
        color: Colors.grey[300],
        child: Center(
          child: Text(
            '여기에 캠페인 목록이 표시됩니다.',
            style: TextStyle(
              fontSize: 16,
            ),
          ),
        ),
      ),
    );
  }
}

위 코드는 StickyHeader 위젯을 사용하여 헤더와 내용을 감싸는 구조를 만든 뒤, 해당 위젯을 반환하는 CampaignHeader 위젯을 정의한 것입니다. 헤더는 파란색 배경과 흰색 텍스트로 구성되어 있고, 내용은 회색 배경과 텍스트로 구성되어 있습니다.

캠페인 목록 페이지 구현

이제 캠페인 목록 페이지를 구현해보겠습니다. 플러터 앱에서 페이지는 Scaffold 위젯을 사용하여 구현할 수 있습니다. Scaffold 위젯 안에 CustomScrollView 위젯을 사용하고, CustomScrollView의 slivers 속성에 StickyHeaderSliverList 위젯을 사용하면 캠페인 목록 페이지를 구현할 수 있습니다.

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

class CampaignListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('캠페인 모집'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: true,
            title: Text('캠페인 목록'),
          ),
          CampaignHeader(),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return ListTile(
                  title: Text('캠페인 $index'),
                );
              },
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 CampaignListPage는 Scaffold 위젯을 사용하여 앱 화면을 구성합니다. AppBar를 통해 상단에 앱의 타이틀을 표시하고, CustomScrollView를 사용하여 앱의 스크롤 가능한 내용을 정의합니다. SliverAppBar를 설정하여 상단에 고정된 타이틀을 만들고, CampaignHeader를 통해 sticky 헤더를 표시합니다. 마지막으로, SliverList를 사용하여 캠페인 목록을 표시합니다.

결론

위에서는 플러터 앱에서 sticky 헤더를 사용하여 캠페인 모집 앱을 만드는 방법에 대해 알아보았습니다. sticky_headers 패키지를 사용하면 쉽게 sticky 헤더를 구현할 수 있으며, 이를 활용하여 사용자 경험을 향상시킬 수 있습니다. 다양한 앱 개발 시 sticky 헤더를 활용해보세요!

참고 문서: sticky_headers 패키지