[flutter] 플러터 sticky 헤더를 가진 가계부 앱 만들기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 가계부 앱을 만드는 방법에 대해 알아보겠습니다.

1. 필수 패키지 설치

먼저, 플러터 앱에서 sticky 헤더를 사용하기 위해 flutter_sticky_header 패키지를 설치해야 합니다. 이 패키지는 헤더를 스크롤에 고정시키는 기능을 제공합니다.

터미널에서 다음 명령어를 실행하여 패키지를 설치합니다:

flutter pub add flutter_sticky_header

2. 앱 UI 설계

다음으로, 앱의 UI를 설계해야 합니다. 이번 예제에서는 가계부 앱을 만들기 때문에, 목록을 나타내는 ListView와 sticky 헤더를 포함한 ListView.builder를 사용합니다.

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

class ExpenseTrackerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('가계부 앱'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverStickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey[300],
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.all(10),
              child: Text('2021년 10월'),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  // 가계부 목록 표시
                  return ListTile(
                    title: Text('내역 $index'),
                    subtitle: Text('금액 $index 원'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

3. 앱 실행 및 확인

이제 앱을 실행하여 sticky 헤더가 작동하는지 확인해보세요. flutter run 명령어를 실행하여 앱을 빌드하고 실행합니다.

앱이 실행되면, 가계부 목록이 스크롤 가능한 리스트로 표시되며, 2021년 10월을 나타내는 sticky 헤더가 상단에 고정됩니다. 스크롤을 하면 헤더가 화면 위에 고정되어 유지됩니다.

결론

이제 플러터를 사용하여 sticky 헤더를 가진 가계부 앱을 만드는 방법을 알게 되었습니다. flutter_sticky_header 패키지를 사용하면 손쉽게 헤더를 스크롤에 고정시킬 수 있습니다. 추가적인 UI 디자인 및 기능 개선은 여러분의 창의성에 맡기겠습니다.

더 자세한 내용은 flutter_sticky_header 패키지 문서를 참고해주세요!