[flutter] 플러터 sticky 헤더를 가진 배달 음식 주문 앱 구현하기

30 Nov 2023

flutter

개요

이번에는 플러터(Flutter)로 배달 음식 주문 앱을 구현해보려고 합니다. 앱의 핵심적인 기능은 주문할 음식의 목록을 보여주는 화면에 Sticky 헤더를 구현하는 것입니다. Sticky 헤더란 스크롤을 내릴 때 화면의 상단에 고정되어 있는 헤더를 의미합니다. 이렇게 하면 사용자가 음식 목록을 스크롤할 때도 헤더가 항상 보이게 되어 편리합니다.

구현 방법

먼저, flutter_sticky_header 패키지를 프로젝트에 추가해야 합니다. 이 패키지는 Sticky 헤더를 쉽게 구현할 수 있는 도구를 제공합니다. pubspec.yaml 파일에 패키지를 추가해주세요.

dependencies:
  flutter_sticky_header: ^0.5.3

다음으로, StickyHeaderBuilder 위젯을 사용하여 Sticky 헤더를 구현합니다. 이 위젯은 스크롤 가능한 목록 위에 고정되는 위젯을 생성합니다. 헤더 그리드와 해당 그리드에 연결된 아이템 목록을 생성하는 예제 코드를 작성해보겠습니다.

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

class StickyHeaderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, sectionIndex) {
        return StickyHeaderBuilder(
          builder: (BuildContext context, double stuckAmount) {
            return Container(
              height: 50.0,
              color: Colors.grey[700].withOpacity(0.8 + stuckAmount),
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              alignment: Alignment.centerLeft,
              child: Text(
                '헤더',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 20.0,
                ),
              ),
            );
          },
          content: Container(
            height: 200.0,
            color: Colors.grey[200],
            child: GridView.builder(
              itemCount: 6,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1 / 1,
              ),
              itemBuilder: (context, index) => Container(
                color: Colors.blue,
                margin: EdgeInsets.all(8.0),
                child: Center(
                  child: Text(
                    '이미지 $index',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18.0,
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

마지막으로, 앱의 메인 화면에서 위에서 만든 StickyHeaderWidget을 사용해 Sticky 헤더가 포함된 화면을 구현합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('배달 음식 주문 앱'),
      ),
      body: StickyHeaderWidget(),
    ),
  ));
}

결론

위와 같이 플러터(Flutter)로 Sticky 헤더를 가진 배달 음식 주문 앱을 구현할 수 있습니다. flutter_sticky_header 패키지를 사용하여 UIScrollView를 활용하는 방법을 익힐 수 있었습니다. Sticky 헤더는 앱 사용자에게 좋은 사용 경험을 제공하는 중요한 요소 중 하나이므로, 플러터를 사용하면 간단하게 구현할 수 있습니다.

목차

개요

구현 방법

결론