[flutter] 플러터에서 sticky 헤더를 사용한 식단 일지 앱 만들기

30 Nov 2023

flutter

이번 포스트에서는 플러터(Flutter)를 사용하여 식단 일지 앱을 만들어 보겠습니다. 이 앱에는 sticky 헤더 기능이 적용될 것이며, 사용자가 식단을 기록하고 볼 수 있게 될 것입니다.

1. 프로젝트 세팅

먼저, 플러터 프로젝트를 생성하고 필요한 종속성을 추가해야 합니다. 터미널에서 다음 명령어를 실행하여 프로젝트를 생성합니다:

flutter create meal_diary_app

그리고 해당 프로젝트의 pubspec.yaml 파일에 아래의 종속성을 추가합니다:

dependencies:
  sticky_headers: ^0.2.0

그 후, flutter pub get 명령어를 사용하여 종속성을 설치합니다.

2. 메인 화면 디자인

먼저, 앱의 메인 화면을 디자인해 보겠습니다. lib 폴더 안에 main_page.dart 파일을 생성하고 아래의 코드를 추가합니다:

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식단 일지'),
      ),
      body: ListView.builder(
        itemCount: 7, // 7일간의 식단을 표시
        itemBuilder: (context, index) {
          return StickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey[300],
              alignment: Alignment.centerLeft,
              child: Text('Day ${index + 1}'),
            ),
            content: Container(
              height: 200,
              child: ListView.builder(
                itemCount: 3, // 아침, 점심, 저녁 식사를 표시
                itemBuilder: (context, subIndex) {
                  return ListTile(
                    title: Text('식사 $subIndex'),
                  );
                },
              ),
            ),
          );
        },
      ),
    );
  }
}

위 코드에서는 sticky_headers 패키지의 StickyHeader 위젯을 사용하여 sticky 헤더를 생성합니다. ListView.builder를 사용하여 전체적인 화면을 구성하고, itemBuilder 콜백 함수에서 각각의 헤더와 내용을 생성합니다.

3. 메인 앱 클래스 업데이트

메인 앱 클래스를 업데이트하여 위에서 생성한 메인 화면을 표시하도록 해야 합니다.

import 'package:flutter/material.dart';

import 'main_page.dart';

void main() => runApp(MealDiaryApp());

class MealDiaryApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '식단 일지 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

4. 실행

이제 앱을 실행해보면, 식단 일지 앱이 표시될 것입니다. 각 날짜별로 sticky 헤더가 생성되며, 해당 날짜에 해당하는 식사 목록이 표시됩니다.

마무리

이번 포스트에서는 플러터를 사용하여 식단 일지 앱을 만들었습니다. sticky 헤더 기능을 사용하여 날짜별로 식사 목록을 표시하는 기능을 구현했습니다. 이 코드를 기반으로 적절한 데이터와 기능을 추가하여 식단 일지 앱을 완성해보세요!

참고 자료:

플러터 공식 문서: https://flutter.dev/
sticky_headers 패키지: https://pub.dev/packages/sticky_headers