[flutter] 플러터 sticky 헤더를 가진 사진 필터링 앱 구현하기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 사진 필터링 앱을 구현하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

먼저, sticky_headers 패키지를 사용하여 sticky 헤더를 구현할 것이므로, pubspec.yaml 파일에 다음과 같이 의존성을 추가해줍니다:

dependencies:
  sticky_headers: ^0.2.0

의존성을 추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

UI 디자인

사진을 표시하고 필터링할 수 있는 앱을 만들 것이므로, 다음과 같은 UI 디자인으로 시작해봅시다:

import 'package:flutter/material.dart';

class PhotoFilteringApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Filtering App'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Photo $index'),
            leading: CircleAvatar(
              backgroundImage: NetworkImage('https://example.com/photo.jpg'),
            ),
          );
        },
      ),
    );
  }
}

간단한 리스트뷰를 생성하여 사진을 표시하고, 사진 아래에 이름을 표시하는 것으로 시작합니다.

Sticky 헤더 추가하기

이제 sticky 헤더를 추가해보겠습니다. StickyHeaderBuilder 위젯을 사용하여 헤더를 생성하고, 리스트 아이템을 표시할 때 StickyHeader 위젯으로 감싸야 합니다.

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

class PhotoFilteringApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Photo Filtering App'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return StickyHeaderBuilder(
            builder: (BuildContext context, double stuckAmount) {
              return Container(
                height: 50.0,
                color: Colors.blueGrey[700].withOpacity(0.8 + stuckAmount * 0.2),
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: Text(
                  'Header ${index ~/ 2 + 1}',
                  style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                ),
              );
            },
            content: ListTile(
              title: Text('Photo $index'),
              leading: CircleAvatar(
                backgroundImage: NetworkImage('https://example.com/photo.jpg'),
              ),
            ),
          );
        },
      ),
    );
  }
}

헤더를 표시하기 위해 StickyHeaderBuilder를 사용하고, builder 콜백에서 헤더 위젯을 반환합니다. StickyHeader 위젯으로 리스트 아이템을 감싸고, content 속성에는 각 아이템을 표시하는 위젯을 설정합니다.

실행 및 테스트

이제 앱을 실행하여 sticky 헤더를 가진 사진 필터링 앱이 제대로 동작하는지 확인해보세요. 리스트를 스크롤하면 헤더가 상단에 고정되고, 해당 헤더에 속한 아이템들이 표시되는 것을 볼 수 있습니다.

결론

이렇게 플러터를 사용하여 sticky 헤더를 가진 사진 필터링 앱을 만드는 방법을 알아보았습니다. sticky_headers 패키지를 사용하여 간편하게 헤더를 추가할 수 있으므로, 필요에 따라 다양한 앱을 개발해보세요.

더 자세한 내용은 sticky_headers 패키지의 문서를 참고하시기 바랍니다.