Colin's Blog
[flutter] 플러터 sticky 헤더를 가진 식당 예약 앱 구현하기

플러터(Flutter)를 사용하여 식당 예약 앱을 개발하려고 합니다. 이 앱은 휴대폰 사용자가 식당 예약을 할 수 있도록 하는 기능을 포함하며, 스크롤할 때 헤더가 화면 상단에 고정되는 sticky 헤더도 갖추고 있습니다.

시작하기

우선, Flutter 개발 환경을 설정해야 합니다. Flutter SDK를 다운로드하고 설치한 후, Dart 개발 도구인 Visual Studio Code나 Android Studio를 사용해 프로젝트를 생성합니다.

기본 앱 구조 설정

새로운 Flutter 프로젝트를 생성한 후, 주요 디렉터리 구조를 설정하겠습니다. 다음과 같은 폴더를 생성합니다:

- lib
    - models
    - screens
    - widgets

Sticky 헤더 구현하기

스크롤할 때 헤더를 화면 상단에 고정시키기 위해, flutter_sticky_header 패키지를 사용하겠습니다. 프로젝트에 flutter_sticky_header 패키지를 추가하기 위해 pubspec.yaml 파일을 열고 다음을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_sticky_header: ^0.6.0

이후 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 및 업데이트합니다.

Sticky 헤더 위젯 생성하기

screens 폴더에서 restaurant_screen.dart 파일을 생성하고, 다음 코드를 작성합니다:

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

class RestaurantScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('식당 예약'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverStickyHeader(
            header: Container(
              height: 60,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                '스티키 헤더',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('리스트 아이템 $index'),
                ),
                childCount: 100,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드는 RestaurantScreen 위젯을 생성하고, CustomScrollView를 사용하여 스크롤이 가능한 화면을 만들었습니다. SliverStickyHeader를 사용하여 헤더를 생성하고, SliverList를 사용하여 리스트 아이템들을 출력합니다.

이제 위젯을 메인 앱 파일에서 호출해야 합니다. main.dart 파일을 열고 다음 코드를 작성합니다:

import 'package:flutter/material.dart';
import 'package:your_app/screens/restaurant_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '식당 예약 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RestaurantScreen(),
    );
  }
}

이제 앱을 실행하면, sticky 헤더를 가진 식당 예약 앱이 정상적으로 동작하는 것을 볼 수 있습니다.

마무리

이 글에서는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 식당 예약 앱을 구현하는 방법을 알아보았습니다. Flutter의 다양한 패키지를 활용하면 다양한 기능을 가진 앱을 더욱 쉽게 개발할 수 있습니다.

© 2018 Colin. All rights reserved.