[flutter] 플러터 sticky 헤더를 가진 온라인 쇼핑몰 앱 구현하기

30 Nov 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 빠르고 쉽게 개발할 수 있습니다. 이번 블로그 포스트에서는 플러터를 사용하여 sticky 헤더를 가진 온라인 쇼핑몰 앱을 구현하는 방법을 알아보겠습니다.

1. 플러터 프로젝트 생성하기

먼저, 플러터 프로젝트를 생성해야 합니다. 터미널에서 다음 명령을 실행하여 기본 템플릿을 가지는 플러터 프로젝트를 생성합니다.

flutter create shopping_app

프로젝트가 생성되면 해당 디렉토리로 이동합니다.

cd shopping_app

2. Sticky 헤더 위젯 라이브러리 추가하기

Sticky 헤더를 구현하기 위해 sticky_headers 라이브러리를 사용합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.1.8

의존성을 추가한 후, 터미널에서 다음 명령을 실행하여 패키지를 가져옵니다.

flutter pub get

3. Sticky 헤더 구현하기

메인 화면 위젯에서 Sticky 헤더를 구현해보겠습니다. 먼저, sticky_headers 패키지를 임포트합니다.

import 'package:sticky_headers/sticky_headers.dart';

다음으로, Sticky 헤더를 담을 리스트를 생성합니다.

List<Widget> _buildListItems() {
  List<Widget> items = [];
  items.add(StickyHeader(
    header: Container(
      height: 50.0,
      color: Colors.grey[200],
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      child: Text(
        'Header 1',
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    content: Container(
      height: 100.0,
      color: Colors.white,
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      child: Text('Content 1'),
    ),
  ));
  // 다른 헤더들과 컨텐츠들도 추가합니다.
  return items;
}

위의 예시처럼 StickyHeader 위젯을 사용하여 Sticky 헤더와 그에 해당하는 컨텐츠를 만들 수 있습니다. 이때, header에는 헤더를 위한 위젯을, content에는 해당 헤더에 대한 내용을 위한 위젯을 넣어줍니다.

마지막으로, ListView.builder를 사용하여 리스트를 구성합니다.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Shopping App'),
    ),
    body: ListView.builder(
      itemCount: _buildListItems().length,
      itemBuilder: (context, index) {
        return _buildListItems()[index];
      },
    ),
  );
}

4. 결과 확인하기

위 코드를 작성한 후, 앱을 실행하여 Sticky 헤더가 있는 온라인 쇼핑몰 앱이 정상적으로 동작하는지 확인해보세요.

이제 플러터로 Sticky 헤더를 가진 온라인 쇼핑몰 앱을 구현하는 방법을 알게 되었습니다. 이러한 기능을 추가하여 사용자 친화적인 애플리케이션을 개발할 수 있습니다. Happy coding!