[flutter] 플러터에서 sticky 헤더를 사용한 읽지 않은 알림 목록 앱 만들기

30 Nov 2023

flutter

알림 목록 앱은 많은 사용자들이 휴대폰에서 받는 다양한 알림을 한 곳에서 편리하게 확인할 수 있도록 도와주는 앱입니다. 이번에는 Flutter를 사용하여 읽지 않은 알림 목록을 표시하고 sticky 헤더를 추가해보겠습니다.

필요한 패키지 가져오기

먼저,sticky 헤더를 구현하기 위해 flutter_sticky_header 패키지를 사용합니다. 이 패키지는 sticky header를 구현하기 위한 유용한 위젯들을 제공합니다.

dependencies:
  flutter_sticky_header: ^0.5.3

Sticky 헤더 위젯 만들기

다음으로, sticky 헤더 위젯을 만들어야 합니다. SliverStickyHeaderDelegate 클래스를 사용하여 상단에 고정되는 헤더를 구현할 수 있습니다. 이 위젯을 CustomScrollView의 slivers에 추가하여 화면에 표시합니다.

CustomScrollView(
  slivers: <Widget>[
    SliverStickyHeader(
      header: Container(
        height: 50.0,
        color: Colors.grey[300],
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          "읽지 않은 알림",
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
      ),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return ListTile(
            title: Text("알림 $index"),
          );
        }, childCount: 10),
      ),
    ),
  ],
)

위 코드에서 SliverStickyHeader의 header 속성에는 sticky 헤더에 표시될 위젯이 들어갑니다. 여기서는 간단한 컨테이너와 텍스트 위젯을 사용했습니다. 그리고 sliver 속성은 헤더 아래에 표시될 컨텐츠를 정의하는 SliverList 위젯을 포함합니다.

주요 스타일링 적용하기

위젯을 더 예쁘게 만들기 위해 주요 스타일링을 적용해보겠습니다. 아래는 header 위젯과 ListTile 위젯에 스타일을 적용한 예시입니다.

header: Container(
  height: 50.0,
  color: Colors.grey[300],
  padding: EdgeInsets.symmetric(horizontal: 16.0),
  alignment: Alignment.centerLeft,
  child: Text(
    "읽지 않은 알림",
    style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, color: Colors.black),
  ),
),

ListTile(
  title: Text("알림 $index", style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
  subtitle: Text("알림 내용", style: TextStyle(fontSize: 14.0)),
  trailing: Icon(Icons.notifications),
),

결론

이제 Flutter에서 sticky 헤더를 사용한 읽지 않은 알림 목록 앱을 만드는 방법을 알게 되었습니다. flutter_sticky_header 패키지를 사용하여 편리하게 sticky 헤더를 구현할 수 있습니다. 이를 응용하여 더 다양한 기능을 추가해보세요!