패키지, 저장소 및 앱 카테고리 검색

side_header_list_view 표지
패키지 상세v0.0.4

side_header_list_view

측면에 고정 헤더가 있는 ListView입니다. Android 연락처 앱과 캘린더 앱을 영감으로 하였습니다.

30일 다운로드
26
좋아요
42
Pub 점수
30

패키지 설치

flutter pub add side_header_list_view

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

안드로이드 연락처 및 캘린더 앱과 유사한 스티키 사이드 헤더를 갖춘 ListView를 구현하는 플러터 패키지입니다. 사용자가 리스트를 스크롤할 때 섹션 헤더를 측면에 계속 표시하여 탐색과 시각적 구성의 향상을 제공합니다. 사용자가 스크롤할 때 헤더는 고정되어 카테고리 또는 시간대별로 그룹화된 긴 목록의 사용성을 높입니다. 분류된 데이터 표시가 필요한 앱을 위한 깔끔하고 직관적인 인터페이스를 설계했습니다.

사용 사례

  • 알파벳 그룹화가 있는 연락처 목록
  • 날짜 헤더가 있는 캘린더 보기
  • 분류된 제품 목록
  • 레이블이 있는 사용자 프로필 섹션
  • 주제 헤더를 포함한 장문 콘텐츠

주요 기능

  • 스티키 사이드 헤더
  • 알파벳 순 또는 사용자 정의 헤더 그룹화
  • 헤더 정렬과 함께 부드러운 스크롤링
  • 사용자 지정 가능한 헤더 스타일
  • 대규모 데이터 세트를 위한 효율적인 렌더링

적합한 대상

  • 분류된 데이터를 가진 앱
  • 연락처 또는 디렉터리 앱
  • 시간 기반 데이터 표시
  • 명확한 섹션 구분이 필요한 UI
  • Android 스타일의 리스트 디자인을 원하는 개발자

고려 사항

  • 수직 목록에 제한됨
  • 헤더 위치 지정은 레이아웃 조정을 필요로 할 수 있습니다
  • 좁은에서 중간 크기의 화면 너비에 적합
  • 다크 모드를 위해 추가적인 스타일링이 필요할 수 있습니다
  • 수평 스크롤 시나리오에 적합하지 않음

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

side_header_list_view

pub package Donate

Listview with sticky headers like the Android contact page

alt text

Usage

  new SideHeaderListView(
    // Set how many items the list has
    itemCount: items.length,
    
    // Set the height of the item widgets. For now this has to be a fixed height
    itemExtend: 150.0,
    
    // Set the header builder, this needs to return the widget for the side header
    headerBuilder: (BuildContext context, int index){
      return new HeaderWidget(items[index].startDate);
    },
    
    // Set the item builder, this is everything in the row without the header
    itemBuilder: (BuildContext context, int index){
      return new ListItem(items[index]);
    },
    
    // HasSameHeader will be used to know whether the header has to be shown for a position 
    hasSameHeader: (int a, int b){
      return items[a].day == items[b].day;
    },
  );

카테고리

의존성

의존성 목록 1 개

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.