[flutter] 플러터에서 sticky 헤더를 사용한 마켓 검색 앱 구현하기

30 Nov 2023

flutter

안녕하세요! 이번 포스트에서는 플러터(Flutter)에서 Sticky 헤더를 사용하여 마켓 검색 앱을 구현하는 방법에 대해 알려드리겠습니다.

먼저, Sticky Header를 구현하기 위해 flutter_sticky_header 패키지를 사용해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  flutter_sticky_header: ^0.4.0

설치가 완료되면, 패키지를 import 해주세요.

import 'package:flutter_sticky_header/flutter_sticky_header.dart';

이제 Sticky Header를 사용하여 ListView를 생성해보겠습니다. 아래의 코드를 참고해주세요.

class MarketSearchApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Market Search'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          if (index.isEven) {
            return StickyHeader(
              header: Container(
                height: 50.0,
                color: Colors.blueGrey,
                alignment: Alignment.center,
                child: Text(
                  'Category ${index ~/ 2}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              content: Container(
                height: 200.0,
                color: Colors.grey,
              ),
            );
          }

          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

위의 코드에서는 ListView.builder를 사용하여 아이템들을 렌더링하고, 짝수 인덱스일 경우 Sticky Header를 생성하도록 구현하였습니다. 실제 앱에 맞게 ListView의 itemCount, header, content, ListTile의 내용을 수정해주세요.

3. 실행하기

이제 마켓 검색 앱을 실행해볼 차례입니다. 아래의 코드를 main.dart 파일에 복사하여 실행해주세요.

import 'package:flutter/material.dart';

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

class MarketSearchApp extends StatelessWidget {
  // 위에서 작성한 코드를 여기에 붙여넣으세요.
}

4. 결론

위의 코드를 통해 플러터(Flutter)에서 Sticky 헤더를 사용하여 마켓 검색 앱을 구현하는 방법을 알아보았습니다. Sticky Header 패키지를 통해 편리하게 Sticky 헤더를 생성할 수 있으며, 위의 예제를 참고하여 앱을 적절하게 수정하여 사용해보세요.

1. Sticky Header 패키지 추가하기

2. Sticky Header ListView 생성하기

3. 실행하기

4. 결론