搜索插件、代码仓与 APP 分类

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)

适合对象

  • 数据密集型应用
  • 管理面板和仪表板
  • 具有复杂表格的移动和网页应用
  • 需要高效表格渲染的开发人员
  • 使用 TabBarView 或 PageView 进行导航的项目

使用建议

  • 需要仔细处理大型数据集,以避免内存问题
  • 可能需要自定义样式来处理复杂的单元格布局
  • 性能取决于数据大小和复杂性
  • 有限的内置编辑功能
  • 最适合只读或简单交互场景

原始 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 项

源码仓库

使用此插件的项目

暂无相关数据。