[flutter] 플러터에서 sticky 헤더를 사용한 일일 명언 앱 만들기

30 Nov 2023

flutter

이번 튜토리얼에서는 플러터(Flutter)를 사용하여 sticky 헤더를 가진 일일 명언 앱을 만들어 보겠습니다. sticky 헤더는 스크롤 내용을 스크롤 할 때마다 화면 위쪽에 고정되어 표시되는 기능입니다. 많은 앱에서 이 기능을 사용하여 사용자 경험을 향상시키는데 도움이 됩니다.

명언 데이터 준비하기

먼저, 우리는 일일 명언 데이터를 가져와야 합니다. 이번 예제에서는 ‘quotes’라는 변수에 하드코딩된 명언 데이터를 사용하겠습니다.

List<String> quotes = [
  "오늘은 새로운 시작이다.",
  "어제보다 나은 내일을 꿈꾸며.",
  "포기하지 말고 계속 나아가자.",
  "노력하는 사람에게는 행운이 따른다.",
  "강한 사람이 되기 위해 노력하자."
];

Sticky 헤더 위젯 만들기

이제, sticky 헤더를 위한 위젯을 생성해 보겠습니다. sticky 헤더는 SliverPersistentHeaderDelegate를 상속받은 커스텀 위젯으로 구현할 수 있습니다.

class StickyHeader extends SliverPersistentHeaderDelegate {
  final double height;
  final String title;

  StickyHeader({
    required this.height,
    required this.title,
  });

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      height: height,
      color: Colors.blue,
      alignment: Alignment.center,
      child: Text(
        title,
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

위 코드에서 StickyHeader 위젯은 SliverPersistentHeaderDelegate를 상속받고, build, get maxExtent, get minExtent 메서드를 오버라이딩하여 sticky 헤더의 모양과 크기를 정의합니다.

스크롤 가능한 명언 목록 만들기

이제, 스크롤 가능한 명언 목록을 만들어보겠습니다. CustomScrollView와 SliverList를 사용하여 스크롤이 가능한 목록을 만들 수 있습니다.

class QuotesList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          delegate: StickyHeader(
            height: 120,
            title: "일일 명언",
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(
                title: Text(
                  quotes[index],
                ),
              );
            },
            childCount: quotes.length,
          ),
        ),
      ],
    );
  }
}

위 코드에서 QuotesList 위젯은 CustomScrollView와 SliverList를 사용하여 명언 목록을 만들고, sticky 헤더를 추가합니다.

앱 레이아웃 구성하기

이제 위에서 만든 QuotesList를 앱의 레이아웃에 추가하여 완전한 앱을 구성해보겠습니다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("일일 명언 앱"),
      ),
      body: QuotesList(),
    ),
  ));
}

위 코드에서는 MaterialApp과 Scaffold를 사용하여 앱의 레이아웃을 구성하고, QuotesList를 body로 설정하여 sticky 헤더를 가진 명언 목록이 표시되도록 합니다.

결론

이렇게 플러터에서 sticky 헤더를 사용한 일일 명언 앱을 만들어보았습니다. sticky 헤더는 유저의 스크롤 경험을 향상시켜주는 강력한 기능입니다. 플러터를 사용하여 다양한 앱을 개발할 때, sticky 헤더를 적절하게 활용하면 유저들의 만족도를 높일 수 있을 것입니다.

참고 자료

Flutter 공식 문서