[flutter] 플러터 sticky 헤더를 사용한 음식 메뉴 앱 만들기

30 Nov 2023

flutter

개요

이번 튜토리얼에서는 플러터(Flutter)를 사용하여 Sticky 헤더를 포함한 음식 메뉴 앱을 만들어보겠습니다. Sticky 헤더는 스크롤되는 내용 위에 고정되어 표시될 수 있는 헤더를 말합니다. 이를 활용하여 음식 메뉴 목록을 구현하면 사용자가 스크롤하면서 언제든지 메뉴 카테고리를 확인할 수 있습니다.

프로젝트 설정

프로젝트를 생성하고 필요한 의존성을 추가합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter_sticky_header: ^0.4.0

의존성을 추가한 후, flutter packages get 명령어를 실행하여 필요한 패키지를 다운로드합니다.

Sticky 헤더 위젯 추가

메인 화면에 Sticky 헤더 위젯을 추가합니다. lib/main.dart 파일을 열고 다음과 같이 코드를 작성합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Header Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sticky Header Example'),
      ),
      body: CustomScrollView(
        slivers: [
          StickyHeader(
            header: Container(
              height: 60,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                'Menu Category',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            content: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return ListTile(
                    title: Text('Menu Item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 StickyHeader 위젯으로 Sticky 헤더를 구현하고 있습니다. 헤더 부분에는 “Menu Category”라는 텍스트가 있으며, 본문 부분에는 음식 메뉴 아이템을 나열하고 있습니다. 이 코드를 실행하면 Sticky 헤더가 포함된 음식 메뉴 앱이 나타납니다.

음식 메뉴 목록 구현

이제 음식 메뉴 목록을 구현해보겠습니다. MyHomePage 위젯의 content 속성 부분을 다음과 같이 변경해주세요:

content: SliverStickyHeader(
  overlapsContent: true,
  header: Container(
    height: 60,
    color: Colors.blue,
    alignment: Alignment.center,
    child: Text(
      'Menu Category',
      style: TextStyle(
        fontSize: 20,
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  sliver: SliverPadding(
    padding: EdgeInsets.all(10),
    sliver: SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Container(
            color: Colors.grey,
            child: Center(
              child: ListTile(
                title: Text('Menu Item $index'),
              ),
            ),
          );
        },
        childCount: 20,
      ),
    ),
  ),
),

위 코드에서 SliverStickyHeader 위젯을 사용하여 Sticky 헤더를 구현하고 있습니다. 그 아래에는 SliverGrid 위젯을 사용하여 그리드 형태로 음식 메뉴를 나열하고 있습니다. 각 메뉴는 Container 위젯을 사용하여 스타일을 적용하고 있습니다.

이렇게 수정한 후 코드를 실행하면 음식 메뉴가 그리드 형태로 나타나며, 사용자가 스크롤을 해도 Sticky 헤더가 화면 상단에 고정된 상태로 유지됩니다.

결론

이번 튜토리얼에서는 플러터의 Sticky 헤더를 사용하여 음식 메뉴 앱을 만드는 방법을 알아보았습니다. Sticky 헤더를 사용하면 유용한 UI 요소를 구현할 수 있으며, 사용자 경험을 향상시킬 수 있습니다. 참고하여 여러분만의 멋진 앱을 만들어보세요.

목차

개요

프로젝트 설정

Sticky 헤더 위젯 추가

음식 메뉴 목록 구현

결론