[flutter] 플러터 앱에서 sticky 헤더를 사용한 뉴스 헤드라인 보여주기

30 Nov 2023

flutter

이 튜토리얼에서는 플러터(Flutter) 앱에서 sticky 헤더를 사용하여 뉴스 헤드라인을 보여주는 방법에 대해 알아보겠습니다.

개요

플러터 앱에서 sticky 헤더를 사용하면 리스트 뷰와 같은 스크롤 가능한 컨텐츠에서 특정 위젯을 화면의 상단에 고정시킬 수 있습니다. 이를 이용하면 사용자가 스크롤 하는 동안 헤더를 항상 볼 수 있으므로 중요한 정보를 강조할 때 유용합니다.

이 튜토리얼에서는 sticky 헤더를 사용하여 뉴스 헤드라인을 스크롤 가능한 리스트에 추가하여 구현해보겠습니다.

스텝별 구현

Sticky 헤더 위젯 추가

첫 번째 단계로, 스크롤 가능한 리스트에 sticky 헤더를 추가하는 과정입니다. sticky 헤더를 만들기 위해서는 SliverPersistentHeader 위젯을 사용할 수 있습니다.

SliverPersistentHeader(
  pinned: true,
  delegate: MyStickyHeaderDelegate(
    minHeight: 60.0,
    maxHeight: 120.0,
    child: Container(
      color: Colors.blue,
      alignment: Alignment.center,
      child: Text(
        '뉴스 헤드라인',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
)

SliverPersistentHeader 위젯을 생성하고 pinned 속성을 true로 설정하여 헤더를 스크롤 가능한 컨텐츠 상단에 고정시킵니다. MyStickyHeaderDelegate는 헤더의 최소 높이와 최대 높이를 지정하는 것 외에도 헤더에 표시할 내용을 정의합니다.

뉴스 헤드라인 위젯 추가

두 번째 단계로, 스티키 헤더 아래에 뉴스 헤드라인을 표시하는 위젯을 추가합니다. 이 예제에서는 ListView.builder를 사용하여 동적으로 뉴스 헤드라인을 생성합니다.

ListView.builder(
  itemCount: newsHeadlines.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(newsHeadlines[index]),
    );
  },
)

ListView.builder를 사용하여 newsHeadlines 리스트의 각 항목을 ListTile로 생성합니다. 이렇게 생성된 뉴스 헤드라인은 스크롤 가능한 리스트 뷰 내에서 표시됩니다.

스크롤 가능한 리스트 추가

세 번째 단계로, 스크롤 가능한 리스트를 생성하여 뉴스 헤드라인을 스크롤할 수 있도록 만듭니다.

CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      // Sticky 헤더 추가
      pinned: true,
      delegate: MyStickyHeaderDelegate(
        minHeight: 60.0,
        maxHeight: 120.0,
        child: Container(
          ...
        ),
      ),
    ),
    SliverList(
      // 뉴스 헤드라인 추가
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text(newsHeadlines[index]),
          );
        },
        childCount: newsHeadlines.length,
      ),
    ),
  ],
)

CustomScrollView에서 SliverPersistentHeader 위젯과 SliverList 위젯을 함께 사용하여 sticky 헤더와 스크롤 가능한 리스트를 생성합니다. SliverList는 SliverChildBuilderDelegate를 사용하여 동적으로 뉴스 헤드라인을 생성합니다.

결론

이 튜토리얼에서는 플러터 앱에서 sticky 헤더를 사용하여 뉴스 헤드라인을 보여주는 방법에 대해 알아보았습니다. 코드를 참고하여 직접 구현해보세요. 더 자세한 정보는 Flutter 공식 문서를 참조하십시오.

목차

개요

스텝별 구현

Sticky 헤더 위젯 추가

뉴스 헤드라인 위젯 추가

스크롤 가능한 리스트 추가

결론