Search packages, repositories and app categories

flex_grid cover
Package detailsv5.1.0

flex_grid

The FlexGrid display data in a tabular format. It is including frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
157
Likes
51
Pub points
130

Install package

flutter pub add flex_grid

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

FlexGrid is a high-performance table widget for Flutter that displays data in a tabular format with support for frozen columns and rows, infinite scrolling with loading more, and optimized rendering for smooth performance in dynamic environments like TabBarView or PageView. Designed for large datasets, it ensures responsive user experiences across all platforms including mobile, web, and desktop. The package is ideal for data-heavy applications requiring efficient layout management and visual clarity.

Use cases

  • Displaying large datasets in tabular form
  • Creating scrollable tables with fixed headers
  • Implementing paginated or infinite lists within tabs
  • Building data dashboards with frozen columns
  • Optimizing performance in nested navigational views

Key features

  • Frozen columns and rows for better navigation
  • Infinite loading with 'load more' functionality
  • High-performance rendering for large datasets
  • Smooth integration with TabBarView/PageView
  • Cross-platform compatibility (Android, iOS, Web, macOS, Windows, Linux)

Suitable for

  • Data-intensive apps
  • Admin panels and dashboards
  • Mobile and web applications with complex tables
  • Developers needing efficient table rendering
  • Projects using TabBarView or PageView for navigation

Considerations

  • Requires careful handling of large data sets to avoid memory issues
  • May need custom styling for complex cell layouts
  • Performance depends on data size and complexity
  • Limited built-in editing features
  • Best suited for read-only or simple interaction scenarios

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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,
              );
            }),
          ),
        ];
      },
    );

Categories

Dependencies

Dependency list 4 items

Source repository

Projects using this package

No data available yet.