[flutter] 플러터에서 sticky 헤더를 사용한 포트폴리오 앱 디자인하기

30 Nov 2023

flutter

포트폴리오 앱을 개발할 때, 사용자 경험을 향상시키기 위해 sticky 헤더를 사용하는 것이 일반적입니다. sticky 헤더는 스크롤 시 항상 화면 상단에 고정되어 있는 헤더로, 앱 내에서 핵심 정보를 전달하는 데 유용합니다.

이번 포스트에서는 플러터를 사용하여 sticky 헤더를 구현하는 방법을 알아보겠습니다.

1. flutter_sticky_header 패키지 설치하기

플러터에서 sticky 헤더를 사용하기 위해서는 flutter_sticky_header 패키지를 설치해야 합니다. 이 패키지는 sticky 헤더를 구현하는 데 필요한 기능을 제공합니다.

pubspec.yaml 파일에 아래와 같이 flutter_sticky_header 패키지를 추가해주세요.

dependencies:
  flutter_sticky_header: ^0.4.0

2. Sticky 헤더 위젯 구현하기

이제 flutter_sticky_header 패키지를 사용하여 sticky 헤더 위젯을 구현해보겠습니다.

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

class PortfolioApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverStickyHeader(
            header: Container(
              height: 60.0,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Sticky Header',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드는 CustomScrollView와 SliverStickyHeader 위젯을 사용하여 sticky 헤더를 구현한 예시입니다. SliverStickyHeader의 header 프로퍼티에는 sticky 헤더에 표시할 위젯을 지정하고, sliver 프로퍼티에는 해당 sticky 헤더와 스크롤 가능한 컨텐츠를 감싸는 슬리버 위젯을 지정합니다.

3. 포트폴리오 앱에 적용하기

위에서 구현한 sticky 헤더를 포트폴리오 앱에 적용하려면, PortfolioApp 위젯을 앱의 메인 위젯으로 설정해주어야 합니다.

void main() {
  runApp(MaterialApp(
    home: PortfolioApp(),
  ));
}

위와 같이 main 함수에서 PortfolioApp을 MaterialApp의 home 프로퍼티에 지정해주면, 플러터 앱에 sticky 헤더가 적용됩니다.

마무리

위의 예시를 따라 sticky 헤더를 사용한 포트폴리오 앱을 디자인할 수 있습니다. flutter_sticky_header 패키지를 활용하면 편리하게 sticky 헤더를 구현할 수 있으므로, 다양한 앱에서 사용해보세요.