Flex Grid View in Flutter

You are currently viewing Flex Grid View in Flutter
Flex Grid View

Flex Grid View in Flutter

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.

Flex Grid View
Flex Grid View
Flex Grid View
Flex Grid View
parameterdescriptiondefault
frozenedColumnsCountThe count of forzened columns
frozenedRowsCountThe count of forzened rows
cellBuilderThe builder to create cellrequired
cellBuilderThe builder to create headerrequired
columnsCountThe count of columns, it should big than 0required
sourceThe data source of [FlexGrid]required
rowWrapperdecorate row widget in this call backnull
rebuildCustomScrollViewrebuild when source is changed, It’s from [LoadingMoreCustomScrollView]false
controllerThe [ScrollController] on vertical directionnull
horizontalControllerThe [SyncControllerMixin] for horizontal directionnull
outerHorizontalSyncControllerThe Outer [SyncControllerMixin], for example [ExtendedTabBarView] or [ExtendedPageView]. It make better experience when scroll on horizontal directionnull
physicsThe physics on both horizontal and vertical directionnull
highPerformanceIf true, forces the children to have the given extent(Cell height/width) in the scroll direction.false
headerStyleAn immutable style describing how to create headerCellStyle.header()
cellStyleAn immutable style describing how to create cellCellStyle.cell()
indicatorBuilderWidget builder for different loading state, it’s from [LoadingMoreCustomScrollView]null
extendedListDelegateA delegate that provides extensions, it’s from [LoadingMoreCustomScrollView]null
headersBuilderThe builder to custom the headers of [FlexGrid]null

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

Credit

This is developed by fluttercandies
Download this project from the below link.
https://github.com/fluttercandies/flex_grid/archive/refs/heads/main.zip
You can visit original source page from the below link:
https://github.com/fluttercandies/flex_grid

Spread the love
See also  Daily Task like Github-Contributions GridView in Flutter

Leave a Reply