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

flex_grid 표지
패키지 상세v5.1.0

flex_grid

FlexGrid는 표 형식으로 데이터를 표시합니다. 고정 열/행, 더 많은 로딩, 높은 성능 및 TabBarView/PageView에서의 향상된 경험을 포함합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
157
좋아요
51
Pub 점수
130

패키지 설치

flutter pub add flex_grid

패키지 개요

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

FlexGrid는 Flutter용 고성능 테이블 위젯으로, 데이터를 표 형식으로 표시하며 동결된 열과 행, 무한 스크롤링 및 추가 로딩, 그리고 TabBarView나 PageView와 같은 동적 환경에서 최적화된 렌더링을 지원합니다. 대규모 데이터셋을 위한 설계로, 모바일, 웹, 데스크톱 등 모든 플랫폼에서 반응형 사용자 경험을 보장합니다. 효율적인 레이아웃 관리와 시각적 명확성이 필요한 데이터 중심 애플리케이션에 이상적입니다.

사용 사례

  • 표 형식으로 대규모 데이터셋 표시
  • 고정 헤더를 가진 스크롤 가능한 테이블 만들기
  • 탭 내에서 페이징 또는 무한 목록 구현
  • 고정 열을 사용하여 데이터 대시보드 만들기
  • 중첩된 탐색 뷰에서 성능 최적화

주요 기능

  • 보다 나은 탐색을 위한 고정 열과 행
  • '더 불러오기' 기능과 함께하는 무한 로딩
  • 대규모 데이터셋을 위한 고성능 렌더링
  • TabBarView/PageView와의 원활한 통합
  • 크로스 플랫폼 호환성 (Android, iOS, Web, macOS, Windows, Linux)

적합한 대상

  • 데이터 집약형 앱
  • 관리 패널 및 대시보드
  • 복잡한 테이블을 갖춘 모바일 및 웹 애플리케이션
  • 효율적인 테이블 렌더링이 필요한 개발자
  • 탭바뷰 또는 페이지뷰를 탐색에 사용하는 프로젝트

고려 사항

  • 메모리 문제를 피하기 위해 대규모 데이터 세트를 신중하게 처리해야 합니다
  • 복잡한 셀 레이아웃을 위해 사용자 정의 스타일이 필요할 수 있습니다
  • 성능은 데이터 크기와 복잡성에 따라 달라집니다
  • 제한된 내장 편집 기능
  • 읽기 전용 또는 간단한 상호작용 시나리오에 가장 적합

원본 README

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

flex_grid

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies QQ 群

Language: English| 中文简体

The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

parameter description default
frozenedColumnsCount The count of forzened columns 0
frozenedRowsCount The count of forzened rows 0
cellBuilder The builder to create cell required
cellBuilder The builder to create header required
columnsCount The count of columns, it should big than 0 required
source The data source of [FlexGrid] required
rowWrapper decorate row widget in this call back null
rebuildCustomScrollView rebuild when source is changed, It's from [LoadingMoreCustomScrollView] false
controller The [ScrollController] on vertical direction null
horizontalController The [SyncControllerMixin] for horizontal direction null
outerHorizontalSyncController The Outer [SyncControllerMixin], for example [ExtendedTabBarView] or [ExtendedPageView]. It make better experience when scroll on horizontal direction null
physics The physics on both horizontal and vertical direction null
verticalHighPerformance/horizontalHighPerformance If true, forces the children to have the given extent(Cell height/width) in the scroll direction. false
headerStyle An immutable style describing how to create header CellStyle.header()
cellStyle An immutable style describing how to create cell CellStyle.cell()
indicatorBuilder Widget builder for different loading state, it's from [LoadingMoreCustomScrollView] null
extendedListDelegate A delegate that provides extensions, it's from [LoadingMoreCustomScrollView] null
headersBuilder The builder to custom the headers of [FlexGrid] null
link if link is true, scroll parent [ExtendedTabView] when [FlexGrid] is over scroll false

source

[FlexGrid.source] is form loading_more_list, LoadingMoreBase is data collection for loading more. override loadData method to load your data. set hasMore to false when it has no more data.

class FlexGridSource extends LoadingMoreBase<GridRow> {
  int _pageIndex = 1;

  void _load() {
    for (int i = 0; i < 15; i++) {
      add(GridRow(name: 'index:$_pageIndex-$i'));
    }
  }

  @override
  bool get hasMore => _pageIndex < 4;

  @override
  Future<bool> loadData([bool isloadMoreAction = false]) async {
    await Future<void>.delayed(const Duration(seconds: 2));
    _load();
    _pageIndex++;
    return true;
  }

  @override
  Future<bool> refresh([bool notifyStateChanged = false]) async {
    _pageIndex = 1;
    return super.refresh(notifyStateChanged);
  }
}

rowWrapper

decorate row widget in this call back.

    FlexGrid(
      rowWrapper: (
        BuildContext context,
        T data,
        int row,
        Widget child,
      ) {
        return Column(
          children: <Widget>[
            child,
            const Divider(),
          ],
        );
      },
    );

headersBuilder

you can add anyother headers in this call back.

    FlexGrid(
      headersBuilder: (BuildContext b, Widget header) {
        return <Widget>[
          header,
          SliverToBoxAdapter(
            child: PullToRefreshContainer(
                (PullToRefreshScrollNotificationInfo info) {
              return PullToRefreshHeader(
                info,
                source.lastRefreshTime,
              );
            }),
          ),
        ];
      },
    );

카테고리

의존성

의존성 목록 4 개

소스 저장소

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

아직 데이터가 없습니다.