Colin's Blog
[flutter] 플러터 sticky 헤더를 가진 식비 예산 앱 만들기

소개

이번 튜토리얼에서는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 식비 예산 앱을 만들어보겠습니다. sticky 헤더는 사용자가 스크롤을 내릴 때 항상 화면 상단에 고정되는 헤더를 의미합니다. 이를 활용하여 식비 예산 앱을 만들어 보겠습니다.

준비물

이 튜토리얼을 진행하기 위해 다음과 같은 준비물이 필요합니다:

단계별 지침

1. 프로젝트 생성

먼저 플러터 프로젝트를 생성해야 합니다. 다음 명령어를 사용하여 새로운 플러터 앱을 생성합니다:

flutter create sticky_header_budget_app

프로젝트 생성이 완료되면 생성된 디렉토리로 이동합니다:

cd sticky_header_budget_app

2. 의존성 추가

sticky 헤더를 구현하기 위해 sticky_headers 패키지를 사용합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.1.8

의존성을 추가한 후, 다음 명령어로 패키지를 가져옵니다:

flutter pub get

3. 식비 예산 앱 구현

이제 main.dart 파일을 열고 식비 예산 앱을 구현합니다. 먼저 필요한 라이브러리를 가져옵니다:

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

다음으로, main() 함수를 다음과 같이 수정합니다:

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

class BudgetApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Header Budget App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BudgetHomePage(),
    );
  }
}

BudgetHomePage 클래스를 생성하고, 홈 페이지를 구현합니다:

class BudgetHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky Header Budget App'),
      ),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return StickyHeader(
            header: Container(
              height: 50.0,
              color: Colors.blueGrey[700],
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: Text(
                'Month ${index + 1}',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            content: ListView.builder(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int subIndex) {
                return ListTile(
                  title: Text('Expense ${subIndex + 1}'),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

위 코드에서는 ListView.builder를 사용하여 sticky 헤더와 내용을 표시합니다. 각 sticky 헤더는 StickyHeader 위젯을 사용하며, header 속성에 헤더 컨텐츠를, content 속성에 내용 컨텐츠를 작성합니다.

4. 앱 실행

이제 앱을 실행해보세요! 다음 명령어로 앱을 실행합니다:

flutter run

실행되면 식비 예산 앱이 화면에 표시되고, 스크롤을 내려도 sticky 헤더가 항상 상단에 고정되는 것을 확인할 수 있습니다.

마무리

이번 튜토리얼에서는 플러터를 사용하여 sticky 헤더를 가진 식비 예산 앱을 만들어보았습니다. sticky_headers 패키지를 활용하여 헤더와 내용을 쉽게 구현할 수 있습니다. 추가로 식비 예산 앱의 기능을 확장하거나 UI를 개선할 수 있는 여지가 있습니다. 플러터를 사용하여 다양한 앱을 개발해보세요!

참고 자료:

© 2018 Colin. All rights reserved.