TableView class

A widget that displays a table, which can scroll in horizontal and vertical directions.

A table consists of rows and columns. Rows fill the horizontal space of the table, while columns fill it vertically. If there is not enough space available to display all the rows at the same time, the table will scroll vertically. If there is not enough space for all the columns, it will scroll horizontally.

Each child TableViewCell can belong to either exactly one row and one column as represented by its TableVicinity, or it can span multiple rows and columns through merging. The table supports lazy rendering and will only instantiate those cells that are currently visible in the table's viewport and those that extend into the cacheExtent. Therefore, when merging cells in a TableView, the same child with the same merge information must be returned from every vicinity the merged cell contains. The build method will only be called once for a merged cell, but since the table's children are lazily laid out, returning the same child and merge information ensures the merged cell can be built no matter which part of it is visible.

For example, if a cell is configured to span 3 columns, starting at column 1, the cellBuilder must return a TableViewCell with the same child, columnMergeStart as 1, and columnMergeSpan as 3 for all three TableVicinitys (column 1, 2, and 3). If the merge information is only provided for the first vicinity (column 1), and that vicinity is scrolled out of the viewport and cacheExtent, the table will not know the following vicinities (column 2 and 3) are part of a merge and will "unmerge" them.

The layout of the table (e.g. how many rows/columns there are and their extents) as well as the content of the individual cells is defined by the provided delegate, a subclass of TwoDimensionalChildDelegate with the TableCellDelegateMixin. The TableView.builder and TableView.list constructors create their own delegate.

A table with infinite rows and columns can be made by using a TableCellBuilderDelegate, or the TableView.builder constructor, and omitting the row or column count. Returning null from the columnBuilder or rowBuilder in this case will terminate the row or column at that index, representing the end of the table in that axis. In this scenario, until the potential end of the table in either dimension is reached by returning null, the ScrollPosition.maxScrollExtent will reflect double.infinity. This is because as the table is built lazily, it will not know the end has been reached until the ScrollPosition arrives there. This is similar to returning null from ListView.builder to signify the end of the list.

This example shows a TableView of 100 children, all sized 100 by 100 pixels with a few TableSpanDecorations like background colors and borders. The builder constructor is called on demand for the cells that are visible in the TableView.

TableView.builder(
  cellBuilder: (BuildContext context, TableVicinity vicinity) {
    return TableViewCell(
      child: Center(
        child: Text('Cell ${vicinity.column} : ${vicinity.row}'),
      ),
    );
  },
  columnCount: 10,
  columnBuilder: (int column) {
    return TableSpan(
      extent: FixedTableSpanExtent(100),
      foregroundDecoration: TableSpanDecoration(
        border: TableSpanBorder(
          trailing: BorderSide(
           color: Colors.black,
           width: 2,
           style: BorderStyle.solid,
          ),
        ),
      ),
    );
  },
  rowCount: 10,
  rowBuilder: (int row) {
    return TableSpan(
      extent: FixedTableSpanExtent(100),
      backgroundDecoration: TableSpanDecoration(
        color: row.isEven? Colors.blueAccent[100] : Colors.white,
      ),
    );
  },
);

See also:

  • TableSpan, describes the configuration for a row or column in the TableView.
  • TwoDimensionalScrollView, a scroll view that can scroll in two dimensions.
  • GridView, another scrolling widget that can be used to create tables that scroll in one dimension.
Inheritance
Available extensions

Constructors

TableView({Key? key, bool? primary, Axis mainAxis = Axis.vertical, ScrollableDetails verticalDetails = const ScrollableDetails.vertical(), ScrollableDetails horizontalDetails = const ScrollableDetails.horizontal(), @Deprecated('Use scrollCacheExtent instead. ' 'This feature was deprecated after v3.41.0-0.0.pre.') double? cacheExtent, required TableCellDelegateMixin delegate, DiagonalDragBehavior diagonalDragBehavior = DiagonalDragBehavior.none, DragStartBehavior dragStartBehavior = DragStartBehavior.start, ScrollViewKeyboardDismissBehavior? keyboardDismissBehavior, Clip clipBehavior = Clip.hardEdge, AlignmentGeometry alignment = Alignment.topLeft})
Creates a TableView that scrolls in both dimensions.
const
TableView.builder({Key? key, bool? primary, Axis mainAxis = Axis.vertical, ScrollableDetails verticalDetails = const ScrollableDetails.vertical(), ScrollableDetails horizontalDetails = const ScrollableDetails.horizontal(), @Deprecated('Use scrollCacheExtent instead. ' 'This feature was deprecated after v3.41.0-0.0.pre.') double? cacheExtent, DiagonalDragBehavior diagonalDragBehavior = DiagonalDragBehavior.none, DragStartBehavior dragStartBehavior = DragStartBehavior.start, ScrollViewKeyboardDismissBehavior? keyboardDismissBehavior, Clip clipBehavior = Clip.hardEdge, int pinnedRowCount = 0, int pinnedColumnCount = 0, int trailingPinnedRowCount = 0, int trailingPinnedColumnCount = 0, int? columnCount, int? rowCount, required TableSpanBuilder columnBuilder, required TableSpanBuilder rowBuilder, required TableViewCellBuilder cellBuilder, AlignmentGeometry alignment = Alignment.topLeft})
Creates a TableView of widgets that are created on demand.
TableView.list({Key? key, bool? primary, Axis mainAxis = Axis.vertical, ScrollableDetails verticalDetails = const ScrollableDetails.vertical(), ScrollableDetails horizontalDetails = const ScrollableDetails.horizontal(), @Deprecated('Use scrollCacheExtent instead. ' 'This feature was deprecated after v3.41.0-0.0.pre.') double? cacheExtent, DiagonalDragBehavior diagonalDragBehavior = DiagonalDragBehavior.none, DragStartBehavior dragStartBehavior = DragStartBehavior.start, ScrollViewKeyboardDismissBehavior? keyboardDismissBehavior, Clip clipBehavior = Clip.hardEdge, int pinnedRowCount = 0, int pinnedColumnCount = 0, int trailingPinnedRowCount = 0, int trailingPinnedColumnCount = 0, required TableSpanBuilder columnBuilder, required TableSpanBuilder rowBuilder, List<List<TableViewCell>> cells = const <List<TableViewCell>>[], AlignmentGeometry alignment = Alignment.topLeft})
Creates a TableView from an explicit two dimensional array of children.

Properties

alignment AlignmentGeometry
The alignment of the table within the viewport when there is extra space.
final
cacheExtent double?
Deprecated. Use scrollCacheExtent instead.
final
clipBehavior Clip
The content will be clipped (or not) according to this option.
final
delegate TableCellDelegateMixin
A delegate that provides the children for the TwoDimensionalScrollView.
final
diagonalDragBehavior DiagonalDragBehavior
Whether scrolling gestures should lock to one axes, allow free movement in both axes, or be evaluated on a weighted scale.
final
dragStartBehavior DragStartBehavior
Determines the way that drag start behavior is handled.
final
hashCode int
The hash code for this object.
no setterinherited
horizontalDetails ScrollableDetails
The configuration of the horizontal Scrollable.
final
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
keyboardDismissBehavior ScrollViewKeyboardDismissBehavior?
The ScrollViewKeyboardDismissBehavior defines how this ScrollView will dismiss the keyboard automatically.
final
mainAxis Axis
The main axis of the two.
final
primary bool?
Whether this is the primary scroll view associated with the parent PrimaryScrollController.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
verticalDetails ScrollableDetails
The configuration of the vertical Scrollable.
final

Methods

animate({Key? key, List<Effect>? effects, AnimateCallback? onInit, AnimateCallback? onPlay, AnimateCallback? onComplete, bool? autoPlay, Duration? delay, AnimationController? controller, Adapter? adapter, double? target, double? value}) Animate

Available on Widget, provided by the AnimateWidgetExtensions extension

Wraps the target Widget in an Animate instance, and returns the instance for chaining calls. Ex. myWidget.animate() is equivalent to Animate(child: myWidget).
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() State<TableView>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
positionedWith(ShadPosition position) Widget

Available on Widget, provided by the PositionedExt extension

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) bool
The equality operator.
inherited