[flutter] 스크롤 시 sticky 헤더가 있는 플러터 앱 디자인하기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)를 사용하여 스크롤 시 sticky 헤더가 있는 앱을 디자인하는 방법에 대해 알아보겠습니다.

1. 패키지 가져오기

플러터에서 sticky 헤더를 구현하기 위해 sticky_headers 패키지를 사용할 것입니다. 따라서, 먼저 pubspec.yaml 파일에 해당 패키지를 추가해야 합니다. 아래와 같이 dependencies 항목에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.0

변경된 pubspec.yaml 파일을 저장한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 가져옵니다.

2. 스크롤 리스트 생성하기

이제 스크롤 리스트를 생성해보겠습니다. ListView.builder 위젯을 사용하여 동적인 리스트를 생성할 수 있습니다. 아래의 예시 코드에서는 100개의 아이템을 가진 스크롤 리스트를 생성합니다.

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('아이템 $index'),
    );
  },
),

3. sticky 헤더 추가하기

이제 스크롤 시 sticky 헤더를 추가해보겠습니다. StickyHeader 위젯을 사용하여 헤더를 추가할 수 있습니다. 아래의 예시 코드에서는 스크롤 리스트의 맨 위에 헤더를 생성하고, 해당 헤더를 스크롤할 때에도 상단에 고정시킵니다.

StickyHeader(
  header: Container(
    height: 50,
    color: Colors.blue,
    alignment: Alignment.center,
    child: Text('Sticky Header', style: TextStyle(color: Colors.white)),
  ),
  content: ListView.builder(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    itemCount: 100,
    itemBuilder: (context, index) {
      return ListTile(
        title: Text('아이템 $index'),
      );
    },
  ),
),

4. 완성된 앱 확인하기

위의 작업을 모두 완료한 후에는 전체적인 앱 디자인을 확인할 수 있습니다. 아래의 예시 코드는 헤더와 스크롤 리스트를 함께 사용한 전체적인 앱 디자인입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sticky Header App'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return StickyHeader(
              header: Container(
                height: 50,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text('Sticky Header', style: TextStyle(color: Colors.white)),
              ),
              content: ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 10,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('아이템 $index'),
                  );
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

이제 위의 코드를 실행하면 스크롤 시 sticky 헤더가 있는 플러터 앱을 확인할 수 있습니다.

결론

이번에는 플러터를 사용하여 스크롤 시 sticky 헤더가 있는 앱을 디자인하는 방법에 대해 알아보았습니다. sticky_headers 패키지를 활용하여 헤더와 스크롤 리스트를 함께 사용하여 다양한 디자인을 구현할 수 있습니다. 자세한 내용은 공식 문서를 참고해주세요.