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

패키지 상세v1.0.0

flutter_section_list_view

iOS UITableView처럼 섹션을 지원하는 확장된 Flutter ListView

30일 다운로드
30
좋아요
6
Pub 점수
40

패키지 설치

flutter pub add flutter_section_list_view

패키지 개요

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

표준 ListView를 확장하여 iOS UITableView와 유사한 섹션 리스트를 지원하는 플러터 패키지입니다. 개발자가 리스트 항목을 헤더와 풋터가 있는 섹션으로 구성할 수 있게 해 주어 복잡한 데이터 세트의 가독성과 구조를 향상시킵니다. 기존 플러터 앱과 원활하게 통합되도록 설계되었으며, iOS 개발 경험을 가진 개발자에게 친숙한 인터페이스를 제공합니다. 동적 업데이트, 사용자 정의 섹션 스타일링 및 부드러운 스크롤 성능을 지원합니다.

사용 사례

  • 그룹화된 연락처 목록 만들기
  • 세그먼트 설정 메뉴 구현
  • 분류된 제품 카탈로그 표시
  • Flutter에서 iOS 스타일의 테이블 뷰 만들기
  • 날짜별로 채팅 메시지 정리하기
  • 계층적 데이터 구조 렌더링

주요 기능

  • 섹션 헤더 및 푸터
  • iOS UITableView와 유사한 동작
  • 사용자 정의 가능한 섹션 스타일
  • 동적 데이터 업데이트
  • 스무스 스크롤 성능
  • 중첩 목록 지원

적합한 대상

  • iOS에서 Flutter로 이전하는 개발자
  • 구조화된 데이터가 필요한 앱이 표시됩니다
  • 그룹화가 필요한 리스트 중심의 UI
  • 네이티브 iOS UX 패턴을 우선시하는 팀
  • 깨끗하고 정리된 목록 레이아웃이 필요한 프로젝트

고려 사항

  • iOS 스타일을 초과한 제한된 플랫폼 전용 최적화
  • 비-iOS 디자인을 위한 추가 스타일링이 필요할 수 있습니다
  • 페이지네이션 없이 매우 큰 데이터 세트에는 적합하지 않음
  • 드래그 앤 드롭 재정렬에 대한 내장 지원 없음
  • 업데이트를 위해 외부 GitHub 저장소에 의존합니다

원본 README

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

flutter_section_list_view

A flutter list view which supports sections like iOS UITableView with no overhead

Usage

To use this plugin, add flutter_section_list_view as a dependency in your pubspec.yaml file.

Getting Started

Import this class
import 'flutter_section_list_view/flutter_section_list_view.dart';
Add flutter_section_list_view Widget

After importing this plugin to your project, you can simply use it as a normal widget


FlutterSectionListView(
        numberOfSection: 4,
        numberOfRowsInSection: (section) {
          return section * 3 + 1;
        },
        sectionWidget: (section) {
          return Container(child: Padding(
            padding: const EdgeInsets.all(8),
            child: Text('Section $section'),
          ), color: Colors.grey,);
        },
        rowWidget: (section, row) {
          return Container(
            child: Padding(
              padding: EdgeInsets.all(8),
              child: Text('Row $section - $row'),
            ),
          );
        },
      )

To use Pull-To-Refresh feature, simply provide value to attribute 'refresh', a callback function

listView.refresh = () async {
      await new Future.delayed(new Duration(seconds: 3));
      print('List Refreshed');
    };

For Pagination feature, provide value to attribute 'loadMoreData', a callback function

listView.loadMoreData = () async {
      await new Future.delayed(new Duration(seconds: 2));
      print('More Data loaded and List refreshed');
      /// set 'isMoreAvailable' attribute to 'false' when there are no more pages to return 
      listView.isMoreAvailable = false;
    };

카테고리

소스 저장소

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

아직 데이터가 없습니다.