data_table.dart 45.5 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:math' as math;

7
import 'package:flutter/foundation.dart';
8 9 10 11
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

import 'checkbox.dart';
12
import 'constants.dart';
13
import 'data_table_theme.dart';
14
import 'debug.dart';
15
import 'divider.dart';
16
import 'dropdown.dart';
17 18 19
import 'icons.dart';
import 'ink_well.dart';
import 'material.dart';
20
import 'material_state.dart';
21 22 23
import 'theme.dart';
import 'tooltip.dart';

24 25 26 27 28
// Examples can assume:
// late BuildContext context;
// late List<DataColumn> _columns;
// late List<DataRow> _rows;

29
/// Signature for [DataColumn.onSort] callback.
30
typedef DataColumnSortCallback = void Function(int columnIndex, bool ascending);
31 32 33 34 35

/// Column configuration for a [DataTable].
///
/// One column configuration must be provided for each column to
/// display in the table. The list of [DataColumn] objects is passed
36
/// as the `columns` argument to the [DataTable.new] constructor.
37
@immutable
38 39 40 41 42
class DataColumn {
  /// Creates the configuration for a column of a [DataTable].
  ///
  /// The [label] argument must not be null.
  const DataColumn({
43
    required this.label,
44
    this.tooltip,
45
    this.numeric = false,
46
    this.onSort,
47
  });
48 49 50 51 52 53 54

  /// The column heading.
  ///
  /// Typically, this will be a [Text] widget. It could also be an
  /// [Icon] (typically using size 18), or a [Row] with an icon and
  /// some text.
  ///
55 56 57 58 59 60 61 62
  /// The [label] is placed within a [Row] along with the
  /// sort indicator (if applicable). By default, [label] only occupy minimal
  /// space. It is recommended to place the label content in an [Expanded] or
  /// [Flexible] as [label] to control how the content flexes. Otherwise,
  /// an exception will occur when the available space is insufficient.
  ///
  /// By default, [DefaultTextStyle.softWrap] of this subtree will be set to false.
  /// Use [DefaultTextStyle.merge] to override it if needed.
63
  ///
64 65 66 67 68 69 70 71
  /// The label should not include the sort indicator.
  final Widget label;

  /// The column heading's tooltip.
  ///
  /// This is a longer description of the column heading, for cases
  /// where the heading might have been abbreviated to keep the column
  /// width to a reasonable size.
72
  final String? tooltip;
73 74 75 76 77 78 79

  /// Whether this column represents numeric data or not.
  ///
  /// The contents of cells of columns containing numeric data are
  /// right-aligned.
  final bool numeric;

80
  /// Called when the user asks to sort the table using this column.
81 82 83 84
  ///
  /// If null, the column will not be considered sortable.
  ///
  /// See [DataTable.sortColumnIndex] and [DataTable.sortAscending].
85
  final DataColumnSortCallback? onSort;
86 87 88 89 90 91 92 93

  bool get _debugInteractive => onSort != null;
}

/// Row configuration and cell data for a [DataTable].
///
/// One row configuration must be provided for each row to
/// display in the table. The list of [DataRow] objects is passed
94
/// as the `rows` argument to the [DataTable.new] constructor.
95 96 97
///
/// The data for this row of the table is provided in the [cells]
/// property of the [DataRow] object.
98
@immutable
99 100 101 102 103 104
class DataRow {
  /// Creates the configuration for a row of a [DataTable].
  ///
  /// The [cells] argument must not be null.
  const DataRow({
    this.key,
105
    this.selected = false,
106
    this.onSelectChanged,
107
    this.onLongPress,
108
    this.color,
109
    required this.cells,
110
  });
111

112 113 114 115 116
  /// Creates the configuration for a row of a [DataTable], deriving
  /// the key from a row index.
  ///
  /// The [cells] argument must not be null.
  DataRow.byIndex({
117
    int? index,
118
    this.selected = false,
119
    this.onSelectChanged,
120
    this.onLongPress,
121
    this.color,
122
    required this.cells,
123
  }) : key = ValueKey<int?>(index);
124

125 126 127 128 129 130
  /// A [Key] that uniquely identifies this row. This is used to
  /// ensure that if a row is added or removed, any stateful widgets
  /// related to this row (e.g. an in-progress checkbox animation)
  /// remain on the right row visually.
  ///
  /// If the table never changes once created, no key is necessary.
131
  final LocalKey? key;
132

133
  /// Called when the user selects or unselects a selectable row.
134 135 136 137 138 139 140 141 142 143 144 145
  ///
  /// If this is not null, then the row is selectable. The current
  /// selection state of the row is given by [selected].
  ///
  /// If any row is selectable, then the table's heading row will have
  /// a checkbox that can be checked to select all selectable rows
  /// (and which is checked if all the rows are selected), and each
  /// subsequent row will have a checkbox to toggle just that row.
  ///
  /// A row whose [onSelectChanged] callback is null is ignored for
  /// the purposes of determining the state of the "all" checkbox,
  /// and its checkbox is disabled.
146 147 148 149
  ///
  /// If a [DataCell] in the row has its [DataCell.onTap] callback defined,
  /// that callback behavior overrides the gesture behavior of the row for
  /// that particular cell.
150
  final ValueChanged<bool?>? onSelectChanged;
151

152 153 154 155 156 157 158 159
  /// Called if the row is long-pressed.
  ///
  /// If a [DataCell] in the row has its [DataCell.onTap], [DataCell.onDoubleTap],
  /// [DataCell.onLongPress], [DataCell.onTapCancel] or [DataCell.onTapDown] callback defined,
  /// that callback behavior overrides the gesture behavior of the row for
  /// that particular cell.
  final GestureLongPressCallback? onLongPress;

160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
  /// Whether the row is selected.
  ///
  /// If [onSelectChanged] is non-null for any row in the table, then
  /// a checkbox is shown at the start of each row. If the row is
  /// selected (true), the checkbox will be checked and the row will
  /// be highlighted.
  ///
  /// Otherwise, the checkbox, if present, will not be checked.
  final bool selected;

  /// The data for this row.
  ///
  /// There must be exactly as many cells as there are columns in the
  /// table.
  final List<DataCell> cells;

176 177 178 179 180 181 182 183 184 185 186 187 188
  /// The color for the row.
  ///
  /// By default, the color is transparent unless selected. Selected rows has
  /// a grey translucent color.
  ///
  /// The effective color can depend on the [MaterialState] state, if the
  /// row is selected, pressed, hovered, focused, disabled or enabled. The
  /// color is painted as an overlay to the row. To make sure that the row's
  /// [InkWell] is visible (when pressed, hovered and focused), it is
  /// recommended to use a translucent color.
  ///
  /// ```dart
  /// DataRow(
189
  ///   color: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
190
  ///     if (states.contains(MaterialState.selected)) {
191
  ///       return Theme.of(context).colorScheme.primary.withOpacity(0.08);
192
  ///     }
193
  ///     return null;  // Use the default value.
194
  ///   }),
195 196 197
  ///   cells: const <DataCell>[
  ///     // ...
  ///   ],
198
  /// )
199 200 201 202 203 204 205
  /// ```
  ///
  /// See also:
  ///
  ///  * The Material Design specification for overlay colors and how they
  ///    match a component's state:
  ///    <https://material.io/design/interaction/states.html#anatomy>.
206
  final MaterialStateProperty<Color?>? color;
207

208 209 210 211 212 213
  bool get _debugInteractive => onSelectChanged != null || cells.any((DataCell cell) => cell._debugInteractive);
}

/// The data for a cell of a [DataTable].
///
/// One list of [DataCell] objects must be provided for each [DataRow]
214
/// in the [DataTable], in the new [DataRow] constructor's `cells`
215
/// argument.
216
@immutable
217 218 219 220
class DataCell {
  /// Creates an object to hold the data for a cell in a [DataTable].
  ///
  /// The first argument is the widget to show for the cell, typically
221
  /// a [Text] or [DropdownButton] widget; this becomes the [child]
222 223 224 225 226
  /// property and must not be null.
  ///
  /// If the cell has no data, then a [Text] widget with placeholder
  /// text should be provided instead, and then the [placeholder]
  /// argument should be set to true.
227 228
  const DataCell(
    this.child, {
229 230
    this.placeholder = false,
    this.showEditIcon = false,
231
    this.onTap,
232 233 234 235
    this.onLongPress,
    this.onTapDown,
    this.onDoubleTap,
    this.onTapCancel,
236
  });
237

238
  /// A cell that has no content and has zero width and height.
239
  static const DataCell empty = DataCell(SizedBox.shrink());
240

241 242
  /// The data for the row.
  ///
243
  /// Typically a [Text] widget or a [DropdownButton] widget.
244 245 246 247
  ///
  /// If the cell has no data, then a [Text] widget with placeholder
  /// text should be provided instead, and [placeholder] should be set
  /// to true.
248
  ///
249
  /// {@macro flutter.widgets.ProxyWidget.child}
250
  final Widget child;
251

252
  /// Whether the [child] is actually a placeholder.
253 254 255 256 257 258 259 260 261 262 263 264 265 266 267
  ///
  /// If this is true, the default text style for the cell is changed
  /// to be appropriate for placeholder text.
  final bool placeholder;

  /// Whether to show an edit icon at the end of the cell.
  ///
  /// This does not make the cell actually editable; the caller must
  /// implement editing behavior if desired (initiated from the
  /// [onTap] callback).
  ///
  /// If this is set, [onTap] should also be set, otherwise tapping
  /// the icon will have no effect.
  final bool showEditIcon;

268
  /// Called if the cell is tapped.
269
  ///
270
  /// If non-null, tapping the cell will call this callback. If
271 272
  /// null (including [onDoubleTap], [onLongPress], [onTapCancel] and [onTapDown]),
  /// tapping the cell will attempt to select the row (if
273
  /// [DataRow.onSelectChanged] is provided).
274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300
  final GestureTapCallback? onTap;

  /// Called when the cell is double tapped.
  ///
  /// If non-null, tapping the cell will call this callback. If
  /// null (including [onTap], [onLongPress], [onTapCancel] and [onTapDown]),
  /// tapping the cell will attempt to select the row (if
  /// [DataRow.onSelectChanged] is provided).
  final GestureTapCallback? onDoubleTap;

  /// Called if the cell is long-pressed.
  ///
  /// If non-null, tapping the cell will invoke this callback. If
  /// null (including [onDoubleTap], [onTap], [onTapCancel] and [onTapDown]),
  /// tapping the cell will attempt to select the row (if
  /// [DataRow.onSelectChanged] is provided).
  final GestureLongPressCallback? onLongPress;

  /// Called if the cell is tapped down.
  ///
  /// If non-null, tapping the cell will call this callback. If
  /// null (including [onTap] [onDoubleTap], [onLongPress] and [onTapCancel]),
  /// tapping the cell will attempt to select the row (if
  /// [DataRow.onSelectChanged] is provided).
  final GestureTapDownCallback? onTapDown;

  /// Called if the user cancels a tap was started on cell.
301
  ///
302
  /// If non-null, canceling the tap gesture will invoke this callback.
303 304 305 306
  /// If null (including [onTap], [onDoubleTap] and [onLongPress]),
  /// tapping the cell will attempt to select the
  /// row (if [DataRow.onSelectChanged] is provided).
  final GestureTapCancelCallback? onTapCancel;
307

308 309 310 311 312
  bool get _debugInteractive => onTap != null ||
      onDoubleTap != null ||
      onLongPress != null ||
      onTapDown != null ||
      onTapCancel != null;
313 314
}

315
/// A Material Design data table.
316
///
317 318
/// {@youtube 560 315 https://www.youtube.com/watch?v=ktTajqbhIcY}
///
319 320 321 322 323
/// Displaying data in a table is expensive, because to lay out the
/// table all the data must be measured twice, once to negotiate the
/// dimensions to use for each column, and once to actually lay out
/// the table given the results of the negotiation.
///
324 325 326 327 328
/// For this reason, if you have a lot of data (say, more than a dozen
/// rows with a dozen columns, though the precise limits depend on the
/// target device), it is suggested that you use a
/// [PaginatedDataTable] which automatically splits the data into
/// multiple pages.
329
///
330
/// {@tool dartpad}
331 332 333 334 335 336 337
/// This sample shows how to display a [DataTable] with three columns: name, age, and
/// role. The columns are defined by three [DataColumn] objects. The table
/// contains three rows of data for three example users, the data for which
/// is defined by three [DataRow] objects.
///
/// ![](https://flutter.github.io/assets-for-api-docs/assets/material/data_table.png)
///
338
/// ** See code in examples/api/lib/material/data_table/data_table.0.dart **
339
/// {@end-tool}
340
///
341
///
342
/// {@tool dartpad}
343 344 345
/// This sample shows how to display a [DataTable] with alternate colors per
/// row, and a custom color for when the row is selected.
///
346
/// ** See code in examples/api/lib/material/data_table/data_table.1.dart **
347 348
/// {@end-tool}
///
349 350 351 352 353
/// [DataTable] can be sorted on the basis of any column in [columns] in
/// ascending or descending order. If [sortColumnIndex] is non-null, then the
/// table will be sorted by the values in the specified column. The boolean
/// [sortAscending] flag controls the sort order.
///
354 355
/// See also:
///
Adam Barth's avatar
Adam Barth committed
356 357 358 359 360
///  * [DataColumn], which describes a column in the data table.
///  * [DataRow], which contains the data for a row in the data table.
///  * [DataCell], which contains the data for a single cell in the data table.
///  * [PaginatedDataTable], which shows part of the data in a data table and
///    provides controls for paging through the remainder of the data.
361
///  * <https://material.io/design/components/data-tables.html>
362 363 364 365 366 367
class DataTable extends StatelessWidget {
  /// Creates a widget describing a data table.
  ///
  /// The [columns] argument must be a list of as many [DataColumn]
  /// objects as the table is to have columns, ignoring the leading
  /// checkbox column if any. The [columns] argument must have a
368
  /// length greater than zero and must not be null.
369
  ///
370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387
  /// The [rows] argument must be a list of as many [DataRow] objects
  /// as the table is to have rows, ignoring the leading heading row
  /// that contains the column headings (derived from the [columns]
  /// argument). There may be zero rows, but the rows argument must
  /// not be null.
  ///
  /// Each [DataRow] object in [rows] must have as many [DataCell]
  /// objects in the [DataRow.cells] list as the table has columns.
  ///
  /// If the table is sorted, the column that provides the current
  /// primary key should be specified by index in [sortColumnIndex], 0
  /// meaning the first column in [columns], 1 being the next one, and
  /// so forth.
  ///
  /// The actual sort order can be specified using [sortAscending]; if
  /// the sort order is ascending, this should be true (the default),
  /// otherwise it should be false.
  DataTable({
388
    super.key,
389
    required this.columns,
390
    this.sortColumnIndex,
391
    this.sortAscending = true,
392
    this.onSelectAll,
393
    this.decoration,
394 395 396 397 398 399 400 401
    this.dataRowColor,
    this.dataRowHeight,
    this.dataTextStyle,
    this.headingRowColor,
    this.headingRowHeight,
    this.headingTextStyle,
    this.horizontalMargin,
    this.columnSpacing,
402
    this.showCheckboxColumn = true,
403 404
    this.showBottomBorder = false,
    this.dividerThickness,
405
    required this.rows,
406
    this.checkboxHorizontalMargin,
407
    this.border,
408
    this.clipBehavior = Clip.none,
409
  }) : assert(columns.isNotEmpty),
410 411
       assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
       assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
412
       assert(dividerThickness == null || dividerThickness >= 0),
413
       _onlyTextColumn = _initOnlyTextColumn(columns);
414 415 416 417 418 419 420 421 422 423 424 425 426 427 428

  /// The configuration and labels for the columns in the table.
  final List<DataColumn> columns;

  /// The current primary sort key's column.
  ///
  /// If non-null, indicates that the indicated column is the column
  /// by which the data is sorted. The number must correspond to the
  /// index of the relevant column in [columns].
  ///
  /// Setting this will cause the relevant column to have a sort
  /// indicator displayed.
  ///
  /// When this is null, it implies that the table's sort order does
  /// not correspond to any of the columns.
429
  final int? sortColumnIndex;
430 431 432 433 434 435 436 437 438 439 440 441 442

  /// Whether the column mentioned in [sortColumnIndex], if any, is sorted
  /// in ascending order.
  ///
  /// If true, the order is ascending (meaning the rows with the
  /// smallest values for the current sort column are first in the
  /// table).
  ///
  /// If false, the order is descending (meaning the rows with the
  /// smallest values for the current sort column are last in the
  /// table).
  final bool sortAscending;

443 444 445 446 447 448 449 450 451
  /// Invoked when the user selects or unselects every row, using the
  /// checkbox in the heading row.
  ///
  /// If this is null, then the [DataRow.onSelectChanged] callback of
  /// every row in the table is invoked appropriately instead.
  ///
  /// To control whether a particular row is selectable or not, see
  /// [DataRow.onSelectChanged]. This callback is only relevant if any
  /// row is selectable.
452
  final ValueSetter<bool?>? onSelectAll;
453

454 455 456 457 458 459 460 461
  /// {@template flutter.material.dataTable.decoration}
  /// The background and border decoration for the table.
  /// {@endtemplate}
  ///
  /// If null, [DataTableThemeData.decoration] is used. By default there is no
  /// decoration.
  final Decoration? decoration;

462 463 464 465 466 467 468 469 470 471 472
  /// {@template flutter.material.dataTable.dataRowColor}
  /// The background color for the data rows.
  ///
  /// The effective background color can be made to depend on the
  /// [MaterialState] state, i.e. if the row is selected, pressed, hovered,
  /// focused, disabled or enabled. The color is painted as an overlay to the
  /// row. To make sure that the row's [InkWell] is visible (when pressed,
  /// hovered and focused), it is recommended to use a translucent background
  /// color.
  /// {@endtemplate}
  ///
473 474 475 476
  /// If null, [DataTableThemeData.dataRowColor] is used. By default, the
  /// background color is transparent unless selected. Selected rows have a grey
  /// translucent color. To set a different color for individual rows, see
  /// [DataRow.color].
477
  ///
478
  /// {@template flutter.material.DataTable.dataRowColor}
479 480
  /// ```dart
  /// DataTable(
481
  ///   dataRowColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
482
  ///     if (states.contains(MaterialState.selected)) {
483
  ///       return Theme.of(context).colorScheme.primary.withOpacity(0.08);
484
  ///     }
485 486
  ///     return null;  // Use the default value.
  ///   }),
487 488
  ///   columns: _columns,
  ///   rows: _rows,
489 490 491 492 493 494 495 496 497
  /// )
  /// ```
  ///
  /// See also:
  ///
  ///  * The Material Design specification for overlay colors and how they
  ///    match a component's state:
  ///    <https://material.io/design/interaction/states.html#anatomy>.
  /// {@endtemplate}
498
  final MaterialStateProperty<Color?>? dataRowColor;
499 500

  /// {@template flutter.material.dataTable.dataRowHeight}
501
  /// The height of each row (excluding the row that contains column headings).
502
  /// {@endtemplate}
503
  ///
504 505 506
  /// If null, [DataTableThemeData.dataRowHeight] is used. This value defaults
  /// to [kMinInteractiveDimension] to adhere to the Material Design
  /// specifications.
507
  final double? dataRowHeight;
508

509 510 511 512
  /// {@template flutter.material.dataTable.dataTextStyle}
  /// The text style for data rows.
  /// {@endtemplate}
  ///
513
  /// If null, [DataTableThemeData.dataTextStyle] is used. By default, the text
514
  /// style is [TextTheme.bodyMedium].
515
  final TextStyle? dataTextStyle;
516 517 518 519 520 521 522 523 524

  /// {@template flutter.material.dataTable.headingRowColor}
  /// The background color for the heading row.
  ///
  /// The effective background color can be made to depend on the
  /// [MaterialState] state, i.e. if the row is pressed, hovered, focused when
  /// sorted. The color is painted as an overlay to the row. To make sure that
  /// the row's [InkWell] is visible (when pressed, hovered and focused), it is
  /// recommended to use a translucent color.
525
  /// {@endtemplate}
526
  ///
527 528
  /// If null, [DataTableThemeData.headingRowColor] is used.
  ///
529
  /// {@template flutter.material.DataTable.headingRowColor}
530 531
  /// ```dart
  /// DataTable(
532 533
  ///   columns: _columns,
  ///   rows: _rows,
534
  ///   headingRowColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
535
  ///     if (states.contains(MaterialState.hovered)) {
536
  ///       return Theme.of(context).colorScheme.primary.withOpacity(0.08);
537
  ///     }
538 539 540 541 542 543 544 545 546 547 548
  ///     return null;  // Use the default value.
  ///   }),
  /// )
  /// ```
  ///
  /// See also:
  ///
  ///  * The Material Design specification for overlay colors and how they
  ///    match a component's state:
  ///    <https://material.io/design/interaction/states.html#anatomy>.
  /// {@endtemplate}
549
  final MaterialStateProperty<Color?>? headingRowColor;
550 551

  /// {@template flutter.material.dataTable.headingRowHeight}
552
  /// The height of the heading row.
553
  /// {@endtemplate}
554
  ///
555 556
  /// If null, [DataTableThemeData.headingRowHeight] is used. This value
  /// defaults to 56.0 to adhere to the Material Design specifications.
557
  final double? headingRowHeight;
558

559 560 561 562
  /// {@template flutter.material.dataTable.headingTextStyle}
  /// The text style for the heading row.
  /// {@endtemplate}
  ///
563
  /// If null, [DataTableThemeData.headingTextStyle] is used. By default, the
564
  /// text style is [TextTheme.titleSmall].
565
  final TextStyle? headingTextStyle;
566 567

  /// {@template flutter.material.dataTable.horizontalMargin}
568 569 570 571 572
  /// The horizontal margin between the edges of the table and the content
  /// in the first and last cells of each row.
  ///
  /// When a checkbox is displayed, it is also the margin between the checkbox
  /// the content in the first data column.
573
  /// {@endtemplate}
574
  ///
575 576
  /// If null, [DataTableThemeData.horizontalMargin] is used. This value
  /// defaults to 24.0 to adhere to the Material Design specifications.
577 578 579 580
  ///
  /// If [checkboxHorizontalMargin] is null, then [horizontalMargin] is also the
  /// margin between the edge of the table and the checkbox, as well as the
  /// margin between the checkbox and the content in the first data column.
581
  final double? horizontalMargin;
582

583
  /// {@template flutter.material.dataTable.columnSpacing}
584
  /// The horizontal margin between the contents of each data column.
585
  /// {@endtemplate}
586
  ///
587 588
  /// If null, [DataTableThemeData.columnSpacing] is used. This value defaults
  /// to 56.0 to adhere to the Material Design specifications.
589
  final double? columnSpacing;
590

591 592 593
  /// {@template flutter.material.dataTable.showCheckboxColumn}
  /// Whether the widget should display checkboxes for selectable rows.
  ///
594
  /// If true, a [Checkbox] will be placed at the beginning of each row that is
595 596 597
  /// selectable. However, if [DataRow.onSelectChanged] is not set for any row,
  /// checkboxes will not be placed, even if this value is true.
  ///
598
  /// If false, all rows will not display a [Checkbox].
599 600 601
  /// {@endtemplate}
  final bool showCheckboxColumn;

602
  /// The data to show in each row (excluding the row that contains
603 604 605
  /// the column headings).
  ///
  /// Must be non-null, but may be empty.
606 607
  final List<DataRow> rows;

608 609 610 611 612
  /// {@template flutter.material.dataTable.dividerThickness}
  /// The width of the divider that appears between [TableRow]s.
  ///
  /// Must be greater than or equal to zero.
  /// {@endtemplate}
613 614 615
  ///
  /// If null, [DataTableThemeData.dividerThickness] is used. This value
  /// defaults to 1.0.
616
  final double? dividerThickness;
617 618 619 620

  /// Whether a border at the bottom of the table is displayed.
  ///
  /// By default, a border is not shown at the bottom to allow for a border
621
  /// around the table defined by [decoration].
622 623
  final bool showBottomBorder;

624 625 626 627 628 629 630 631 632 633
  /// {@template flutter.material.dataTable.checkboxHorizontalMargin}
  /// Horizontal margin around the checkbox, if it is displayed.
  /// {@endtemplate}
  ///
  /// If null, [DataTableThemeData.checkboxHorizontalMargin] is used. If that is
  /// also null, then [horizontalMargin] is used as the margin between the edge
  /// of the table and the checkbox, as well as the margin between the checkbox
  /// and the content in the first data column. This value defaults to 24.0.
  final double? checkboxHorizontalMargin;

634 635 636
  /// The style to use when painting the boundary and interior divisions of the table.
  final TableBorder? border;

637 638 639 640 641 642 643
  /// {@macro flutter.material.Material.clipBehavior}
  ///
  /// This can be used to clip the content within the border of the [DataTable].
  ///
  /// Defaults to [Clip.none], and must not be null.
  final Clip clipBehavior;

644 645
  // Set by the constructor to the index of the only Column that is
  // non-numeric, if there is exactly one, otherwise null.
646 647 648
  final int? _onlyTextColumn;
  static int? _initOnlyTextColumn(List<DataColumn> columns) {
    int? result;
649
    for (int index = 0; index < columns.length; index += 1) {
650
      final DataColumn column = columns[index];
651
      if (!column.numeric) {
652
        if (result != null) {
653
          return null;
654
        }
655 656 657 658 659 660 661 662 663 664 665
        result = index;
      }
    }
    return result;
  }

  bool get _debugInteractive {
    return columns.any((DataColumn column) => column._debugInteractive)
        || rows.any((DataRow row) => row._debugInteractive);
  }

666
  static final LocalKey _headingRowKey = UniqueKey();
667

668 669 670 671
  void _handleSelectAll(bool? checked, bool someChecked) {
    // If some checkboxes are checked, all checkboxes are selected. Otherwise,
    // use the new checked value but default to false if it's null.
    final bool effectiveChecked = someChecked || (checked ?? false);
672
    if (onSelectAll != null) {
673
      onSelectAll!(effectiveChecked);
674
    } else {
675
      for (final DataRow row in rows) {
676
        if (row.onSelectChanged != null && row.selected != effectiveChecked) {
677
          row.onSelectChanged!(effectiveChecked);
678
        }
679
      }
680 681 682
    }
  }

683 684 685 686 687 688 689 690 691 692 693
  /// The default height of the heading row.
  static const double _headingRowHeight = 56.0;

  /// The default horizontal margin between the edges of the table and the content
  /// in the first and last cells of each row.
  static const double _horizontalMargin = 24.0;

  /// The default horizontal margin between the contents of each data column.
  static const double _columnSpacing = 56.0;

  /// The default padding between the heading content and sort arrow.
694
  static const double _sortArrowPadding = 2.0;
695 696 697 698

  /// The default divider thickness.
  static const double _dividerThickness = 1.0;

699
  static const Duration _sortArrowAnimationDuration = Duration(milliseconds: 150);
700 701

  Widget _buildCheckbox({
702
    required BuildContext context,
703
    required bool? checked,
704 705 706
    required VoidCallback? onRowTap,
    required ValueChanged<bool?>? onCheckboxChanged,
    required MaterialStateProperty<Color?>? overlayColor,
707
    required bool tristate,
708
  }) {
709
    final ThemeData themeData = Theme.of(context);
710 711 712
    final double effectiveHorizontalMargin = horizontalMargin
      ?? themeData.dataTableTheme.horizontalMargin
      ?? _horizontalMargin;
713 714 715 716 717 718
    final double effectiveCheckboxHorizontalMarginStart = checkboxHorizontalMargin
      ?? themeData.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin;
    final double effectiveCheckboxHorizontalMarginEnd = checkboxHorizontalMargin
      ?? themeData.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin / 2.0;
719
    Widget contents = Semantics(
720
      container: true,
721
      child: Padding(
722
        padding: EdgeInsetsDirectional.only(
723 724
          start: effectiveCheckboxHorizontalMarginStart,
          end: effectiveCheckboxHorizontalMarginEnd,
725
        ),
726 727
        child: Center(
          child: Checkbox(
728 729
            value: checked,
            onChanged: onCheckboxChanged,
730
            tristate: tristate,
731
          ),
732 733
        ),
      ),
734 735
    );
    if (onRowTap != null) {
736
      contents = TableRowInkWell(
737
        onTap: onRowTap,
738
        overlayColor: overlayColor,
739
        child: contents,
740 741
      );
    }
742
    return TableCell(
743
      verticalAlignment: TableCellVerticalAlignment.fill,
744
      child: contents,
745 746 747 748
    );
  }

  Widget _buildHeadingCell({
749 750 751 752 753 754 755 756 757
    required BuildContext context,
    required EdgeInsetsGeometry padding,
    required Widget label,
    required String? tooltip,
    required bool numeric,
    required VoidCallback? onSort,
    required bool sorted,
    required bool ascending,
    required MaterialStateProperty<Color?>? overlayColor,
758
  }) {
759
    final ThemeData themeData = Theme.of(context);
760
    final DataTableThemeData dataTableTheme = DataTableTheme.of(context);
761 762 763 764
    label = Row(
      textDirection: numeric ? TextDirection.rtl : null,
      children: <Widget>[
        label,
765 766 767 768 769 770 771 772 773
        if (onSort != null)
          ...<Widget>[
            _SortArrow(
              visible: sorted,
              up: sorted ? ascending : null,
              duration: _sortArrowAnimationDuration,
            ),
            const SizedBox(width: _sortArrowPadding),
          ],
774 775
      ],
    );
776 777

    final TextStyle effectiveHeadingTextStyle = headingTextStyle
778
      ?? dataTableTheme.headingTextStyle
779
      ?? themeData.dataTableTheme.headingTextStyle
780
      ?? themeData.textTheme.titleSmall!;
781
    final double effectiveHeadingRowHeight = headingRowHeight
782
      ?? dataTableTheme.headingRowHeight
783 784
      ?? themeData.dataTableTheme.headingRowHeight
      ?? _headingRowHeight;
785
    label = Container(
786
      padding: padding,
787
      height: effectiveHeadingRowHeight,
788
      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
789
      child: AnimatedDefaultTextStyle(
790
        style: effectiveHeadingTextStyle,
791
        softWrap: false,
792
        duration: _sortArrowAnimationDuration,
793 794
        child: label,
      ),
795 796
    );
    if (tooltip != null) {
797
      label = Tooltip(
798
        message: tooltip,
799
        child: label,
800 801
      );
    }
802

803 804 805 806
    // TODO(dkwingsmt): Only wrap Inkwell if onSort != null. Blocked by
    // https://github.com/flutter/flutter/issues/51152
    label = InkWell(
      onTap: onSort,
807
      overlayColor: overlayColor,
808 809
      child: label,
    );
810 811 812 813
    return label;
  }

  Widget _buildDataCell({
814 815 816 817 818 819
    required BuildContext context,
    required EdgeInsetsGeometry padding,
    required Widget label,
    required bool numeric,
    required bool placeholder,
    required bool showEditIcon,
820
    required GestureTapCallback? onTap,
821
    required VoidCallback? onSelectChanged,
822 823 824 825
    required GestureTapCallback? onDoubleTap,
    required GestureLongPressCallback? onLongPress,
    required GestureTapDownCallback? onTapDown,
    required GestureTapCancelCallback? onTapCancel,
826
    required MaterialStateProperty<Color?>? overlayColor,
827
    required GestureLongPressCallback? onRowLongPress,
828
  }) {
829
    final ThemeData themeData = Theme.of(context);
830
    final DataTableThemeData dataTableTheme = DataTableTheme.of(context);
831
    if (showEditIcon) {
832
      const Widget icon = Icon(Icons.edit, size: 18.0);
833 834
      label = Expanded(child: label);
      label = Row(
835 836 837
        textDirection: numeric ? TextDirection.rtl : null,
        children: <Widget>[ label, icon ],
      );
838
    }
839 840

    final TextStyle effectiveDataTextStyle = dataTextStyle
841
      ?? dataTableTheme.dataTextStyle
842
      ?? themeData.dataTableTheme.dataTextStyle
843
      ?? themeData.textTheme.bodyMedium!;
844
    final double effectiveDataRowHeight = dataRowHeight
845
      ?? dataTableTheme.dataRowHeight
846 847
      ?? themeData.dataTableTheme.dataRowHeight
      ?? kMinInteractiveDimension;
848
    label = Container(
849
      padding: padding,
850
      height: effectiveDataRowHeight,
851
      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
852
      child: DefaultTextStyle(
853
        style: effectiveDataTextStyle.copyWith(
854
          color: placeholder ? effectiveDataTextStyle.color!.withOpacity(0.6) : null,
855
        ),
856
        child: DropdownButtonHideUnderline(child: label),
857
      ),
858
    );
859 860 861 862 863
    if (onTap != null ||
        onDoubleTap != null ||
        onLongPress != null ||
        onTapDown != null ||
        onTapCancel != null) {
864
      label = InkWell(
865
        onTap: onTap,
866 867 868 869
        onDoubleTap: onDoubleTap,
        onLongPress: onLongPress,
        onTapCancel: onTapCancel,
        onTapDown: onTapDown,
870
        overlayColor: overlayColor,
871
        child: label,
872
      );
873
    } else if (onSelectChanged != null || onRowLongPress != null) {
874
      label = TableRowInkWell(
875
        onTap: onSelectChanged,
876
        onLongPress: onRowLongPress,
877
        overlayColor: overlayColor,
878
        child: label,
879 880 881 882 883 884 885 886 887
      );
    }
    return label;
  }

  @override
  Widget build(BuildContext context) {
    assert(!_debugInteractive || debugCheckHasMaterial(context));

888
    final ThemeData theme = Theme.of(context);
889
    final DataTableThemeData dataTableTheme = DataTableTheme.of(context);
890
    final MaterialStateProperty<Color?>? effectiveHeadingRowColor = headingRowColor
891
      ?? dataTableTheme.headingRowColor
892
      ?? theme.dataTableTheme.headingRowColor;
893
    final MaterialStateProperty<Color?>? effectiveDataRowColor = dataRowColor
894
      ?? dataTableTheme.dataRowColor
895
      ?? theme.dataTableTheme.dataRowColor;
896
    final MaterialStateProperty<Color?> defaultRowColor = MaterialStateProperty.resolveWith(
897
      (Set<MaterialState> states) {
898
        if (states.contains(MaterialState.selected)) {
899
          return theme.colorScheme.primary.withOpacity(0.08);
900
        }
901 902
        return null;
      },
903
    );
904 905
    final bool anyRowSelectable = rows.any((DataRow row) => row.onSelectChanged != null);
    final bool displayCheckboxColumn = showCheckboxColumn && anyRowSelectable;
906 907 908 909
    final Iterable<DataRow> rowsWithCheckbox = displayCheckboxColumn ?
      rows.where((DataRow row) => row.onSelectChanged != null) : <DataRow>[];
    final Iterable<DataRow> rowsChecked = rowsWithCheckbox.where((DataRow row) => row.selected);
    final bool allChecked = displayCheckboxColumn && rowsChecked.length == rowsWithCheckbox.length;
910 911
    final bool anyChecked = displayCheckboxColumn && rowsChecked.isNotEmpty;
    final bool someChecked = anyChecked && !allChecked;
912
    final double effectiveHorizontalMargin = horizontalMargin
913
      ?? dataTableTheme.horizontalMargin
914 915
      ?? theme.dataTableTheme.horizontalMargin
      ?? _horizontalMargin;
916
    final double effectiveCheckboxHorizontalMarginStart = checkboxHorizontalMargin
917
      ?? dataTableTheme.checkboxHorizontalMargin
918 919 920
      ?? theme.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin;
    final double effectiveCheckboxHorizontalMarginEnd = checkboxHorizontalMargin
921
      ?? dataTableTheme.checkboxHorizontalMargin
922 923
      ?? theme.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin / 2.0;
924
    final double effectiveColumnSpacing = columnSpacing
925
      ?? dataTableTheme.columnSpacing
926 927
      ?? theme.dataTableTheme.columnSpacing
      ?? _columnSpacing;
928

929
    final List<TableColumnWidth> tableColumns = List<TableColumnWidth>.filled(columns.length + (displayCheckboxColumn ? 1 : 0), const _NullTableColumnWidth());
930
    final List<TableRow> tableRows = List<TableRow>.generate(
931 932
      rows.length + 1, // the +1 is for the header row
      (int index) {
933 934 935 936 937 938 939 940
        final bool isSelected = index > 0 && rows[index - 1].selected;
        final bool isDisabled = index > 0 && anyRowSelectable && rows[index - 1].onSelectChanged == null;
        final Set<MaterialState> states = <MaterialState>{
          if (isSelected)
            MaterialState.selected,
          if (isDisabled)
            MaterialState.disabled,
        };
941 942 943
        final Color? resolvedDataRowColor = index > 0 ? (rows[index - 1].color ?? effectiveDataRowColor)?.resolve(states) : null;
        final Color? resolvedHeadingRowColor = effectiveHeadingRowColor?.resolve(<MaterialState>{});
        final Color? rowColor = index > 0 ? resolvedDataRowColor : resolvedHeadingRowColor;
944 945 946
        final BorderSide borderSide = Divider.createBorderSide(
          context,
          width: dividerThickness
947
            ?? dataTableTheme.dividerThickness
948 949 950
            ?? theme.dataTableTheme.dividerThickness
            ?? _dividerThickness,
        );
951
        final Border? border = showBottomBorder
952 953
          ? Border(bottom: borderSide)
          : index == 0 ? null : Border(top: borderSide);
954
        return TableRow(
955
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
956
          decoration: BoxDecoration(
957
            border: border,
958 959
            color: rowColor ?? defaultRowColor.resolve(states),
          ),
960
          children: List<Widget>.filled(tableColumns.length, const _NullWidget()),
961
        );
962
      },
963 964 965 966 967
    );

    int rowIndex;

    int displayColumnIndex = 0;
968
    if (displayCheckboxColumn) {
969
      tableColumns[0] = FixedColumnWidth(effectiveCheckboxHorizontalMarginStart + Checkbox.width + effectiveCheckboxHorizontalMarginEnd);
970
      tableRows[0].children[0] = _buildCheckbox(
971
        context: context,
972
        checked: someChecked ? null : allChecked,
973
        onRowTap: null,
974
        onCheckboxChanged: (bool? checked) => _handleSelectAll(checked, someChecked),
975
        overlayColor: null,
976
        tristate: true,
977 978
      );
      rowIndex = 1;
979
      for (final DataRow row in rows) {
980
        tableRows[rowIndex].children[0] = _buildCheckbox(
981
          context: context,
982
          checked: row.selected,
983
          onRowTap: row.onSelectChanged == null ? null : () => row.onSelectChanged?.call(!row.selected),
984
          onCheckboxChanged: row.onSelectChanged,
985
          overlayColor: row.color ?? effectiveDataRowColor,
986
          tristate: false,
987 988 989 990 991 992 993
        );
        rowIndex += 1;
      }
      displayColumnIndex += 1;
    }

    for (int dataColumnIndex = 0; dataColumnIndex < columns.length; dataColumnIndex += 1) {
994
      final DataColumn column = columns[dataColumnIndex];
995

996
      final double paddingStart;
997 998 999
      if (dataColumnIndex == 0 && displayCheckboxColumn && checkboxHorizontalMargin != null) {
        paddingStart = effectiveHorizontalMargin;
      } else if (dataColumnIndex == 0 && displayCheckboxColumn) {
1000
        paddingStart = effectiveHorizontalMargin / 2.0;
1001
      } else if (dataColumnIndex == 0 && !displayCheckboxColumn) {
1002
        paddingStart = effectiveHorizontalMargin;
1003
      } else {
1004
        paddingStart = effectiveColumnSpacing / 2.0;
1005 1006
      }

1007
      final double paddingEnd;
1008
      if (dataColumnIndex == columns.length - 1) {
1009
        paddingEnd = effectiveHorizontalMargin;
1010
      } else {
1011
        paddingEnd = effectiveColumnSpacing / 2.0;
1012 1013
      }

1014
      final EdgeInsetsDirectional padding = EdgeInsetsDirectional.only(
1015 1016
        start: paddingStart,
        end: paddingEnd,
1017 1018 1019 1020 1021 1022
      );
      if (dataColumnIndex == _onlyTextColumn) {
        tableColumns[displayColumnIndex] = const IntrinsicColumnWidth(flex: 1.0);
      } else {
        tableColumns[displayColumnIndex] = const IntrinsicColumnWidth();
      }
1023
      tableRows[0].children[displayColumnIndex] = _buildHeadingCell(
1024
        context: context,
1025 1026 1027 1028
        padding: padding,
        label: column.label,
        tooltip: column.tooltip,
        numeric: column.numeric,
1029
        onSort: column.onSort != null ? () => column.onSort!(dataColumnIndex, sortColumnIndex != dataColumnIndex || !sortAscending) : null,
1030
        sorted: dataColumnIndex == sortColumnIndex,
1031
        ascending: sortAscending,
1032
        overlayColor: effectiveHeadingRowColor,
1033 1034
      );
      rowIndex = 1;
1035
      for (final DataRow row in rows) {
1036
        final DataCell cell = row.cells[dataColumnIndex];
1037
        tableRows[rowIndex].children[displayColumnIndex] = _buildDataCell(
Ian Hickson's avatar
Ian Hickson committed
1038
          context: context,
1039
          padding: padding,
1040
          label: cell.child,
1041 1042 1043 1044
          numeric: column.numeric,
          placeholder: cell.placeholder,
          showEditIcon: cell.showEditIcon,
          onTap: cell.onTap,
1045 1046 1047 1048
          onDoubleTap: cell.onDoubleTap,
          onLongPress: cell.onLongPress,
          onTapCancel: cell.onTapCancel,
          onTapDown: cell.onTapDown,
1049
          onSelectChanged: row.onSelectChanged == null ? null : () => row.onSelectChanged?.call(!row.selected),
1050
          overlayColor: row.color ?? effectiveDataRowColor,
1051
          onRowLongPress: row.onLongPress,
1052 1053 1054 1055 1056 1057
        );
        rowIndex += 1;
      }
      displayColumnIndex += 1;
    }

1058
    return Container(
1059
      decoration: decoration ?? dataTableTheme.decoration ?? theme.dataTableTheme.decoration,
1060 1061
      child: Material(
        type: MaterialType.transparency,
1062 1063
        borderRadius: border?.borderRadius,
        clipBehavior: clipBehavior,
1064 1065 1066
        child: Table(
          columnWidths: tableColumns.asMap(),
          children: tableRows,
1067
          border: border,
1068 1069
        ),
      ),
1070 1071 1072 1073 1074 1075 1076 1077 1078 1079
    );
  }
}

/// A rectangular area of a Material that responds to touch but clips
/// its ink splashes to the current table row of the nearest table.
///
/// Must have an ancestor [Material] widget in which to cause ink
/// reactions and an ancestor [Table] widget to establish a row.
///
1080
/// The [TableRowInkWell] must be in the same coordinate space (modulo
1081 1082 1083 1084
/// translations) as the [Table]. If it's rotated or scaled or
/// otherwise transformed, it will not be able to describe the
/// rectangle of the row in its own coordinate system as a [Rect], and
/// thus the splash will not occur. (In general, this is easy to
1085
/// achieve: just put the [TableRowInkWell] as the direct child of the
1086
/// [Table], and put the other contents of the cell inside it.)
1087 1088 1089 1090 1091 1092
///
/// See also:
///
///  * [DataTable], which makes use of [TableRowInkWell] when
///    [DataRow.onSelectChanged] is defined and [DataCell.onTap]
///    is not.
1093
class TableRowInkWell extends InkResponse {
1094
  /// Creates an ink well for a table row.
1095
  const TableRowInkWell({
1096 1097 1098 1099 1100 1101 1102
    super.key,
    super.child,
    super.onTap,
    super.onDoubleTap,
    super.onLongPress,
    super.onHighlightChanged,
    super.overlayColor,
1103 1104
  }) : super(
    containedInkWell: true,
1105
    highlightShape: BoxShape.rectangle,
1106 1107 1108 1109 1110 1111
  );

  @override
  RectCallback getRectCallback(RenderBox referenceBox) {
    return () {
      RenderObject cell = referenceBox;
1112
      AbstractNode? table = cell.parent;
1113
      final Matrix4 transform = Matrix4.identity();
1114
      while (table is RenderObject && table is! RenderTable) {
1115
        table.applyPaintTransform(cell, transform);
1116
        assert(table == cell.parent);
1117
        cell = table;
1118 1119 1120
        table = table.parent;
      }
      if (table is RenderTable) {
1121
        final TableCellParentData cellParentData = cell.parentData! as TableCellParentData;
1122
        assert(cellParentData.y != null);
1123
        final Rect rect = table.getRowBox(cellParentData.y!);
1124
        // The rect is in the table's coordinate space. We need to change it to the
1125
        // TableRowInkWell's coordinate space.
1126
        table.applyPaintTransform(cell, transform);
1127
        final Offset? offset = MatrixUtils.getAsTranslation(transform);
1128
        if (offset != null) {
1129
          return rect.shift(-offset);
1130
        }
1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143
      }
      return Rect.zero;
    };
  }

  @override
  bool debugCheckContext(BuildContext context) {
    assert(debugCheckHasTable(context));
    return super.debugCheckContext(context);
  }
}

class _SortArrow extends StatefulWidget {
1144
  const _SortArrow({
1145 1146 1147
    required this.visible,
    required this.up,
    required this.duration,
1148
  });
1149 1150 1151

  final bool visible;

1152
  final bool? up;
1153 1154 1155 1156

  final Duration duration;

  @override
1157
  _SortArrowState createState() => _SortArrowState();
1158 1159
}

1160
class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
1161 1162
  late AnimationController _opacityController;
  late Animation<double> _opacityAnimation;
1163

1164 1165
  late AnimationController _orientationController;
  late Animation<double> _orientationAnimation;
1166 1167
  double _orientationOffset = 0.0;

1168
  bool? _up;
1169

1170 1171 1172
  static final Animatable<double> _turnTween = Tween<double>(begin: 0.0, end: math.pi)
    .chain(CurveTween(curve: Curves.easeIn));

1173 1174 1175
  @override
  void initState() {
    super.initState();
1176
    _up = widget.up;
1177 1178
    _opacityAnimation = CurvedAnimation(
      parent: _opacityController = AnimationController(
1179
        duration: widget.duration,
1180
        vsync: this,
1181
      ),
1182
      curve: Curves.fastOutSlowIn,
1183 1184
    )
    ..addListener(_rebuild);
1185
    _opacityController.value = widget.visible ? 1.0 : 0.0;
1186 1187 1188 1189 1190 1191 1192
    _orientationController = AnimationController(
      duration: widget.duration,
      vsync: this,
    );
    _orientationAnimation = _orientationController.drive(_turnTween)
      ..addListener(_rebuild)
      ..addStatusListener(_resetOrientationAnimation);
1193
    if (widget.visible) {
1194
      _orientationOffset = widget.up! ? 0.0 : math.pi;
1195
    }
1196 1197 1198 1199 1200 1201 1202 1203 1204 1205
  }

  void _rebuild() {
    setState(() {
      // The animations changed, so we need to rebuild.
    });
  }

  void _resetOrientationAnimation(AnimationStatus status) {
    if (status == AnimationStatus.completed) {
1206 1207
      assert(_orientationAnimation.value == math.pi);
      _orientationOffset += math.pi;
1208 1209 1210 1211 1212
      _orientationController.value = 0.0; // TODO(ianh): This triggers a pointless rebuild.
    }
  }

  @override
1213 1214
  void didUpdateWidget(_SortArrow oldWidget) {
    super.didUpdateWidget(oldWidget);
1215
    bool skipArrow = false;
1216
    final bool? newUp = widget.up ?? _up;
1217 1218
    if (oldWidget.visible != widget.visible) {
      if (widget.visible && (_opacityController.status == AnimationStatus.dismissed)) {
1219 1220
        _orientationController.stop();
        _orientationController.value = 0.0;
1221
        _orientationOffset = newUp! ? 0.0 : math.pi;
1222 1223
        skipArrow = true;
      }
1224
      if (widget.visible) {
1225 1226
        _opacityController.forward();
      } else {
1227
        _opacityController.reverse();
1228 1229
      }
    }
1230
    if ((_up != newUp) && !skipArrow) {
1231 1232 1233 1234 1235 1236
      if (_orientationController.status == AnimationStatus.dismissed) {
        _orientationController.forward();
      } else {
        _orientationController.reverse();
      }
    }
1237
    _up = newUp;
1238 1239 1240 1241 1242 1243 1244 1245 1246
  }

  @override
  void dispose() {
    _opacityController.dispose();
    _orientationController.dispose();
    super.dispose();
  }

1247 1248
  static const double _arrowIconBaselineOffset = -1.5;
  static const double _arrowIconSize = 16.0;
1249 1250 1251

  @override
  Widget build(BuildContext context) {
1252 1253
    return FadeTransition(
      opacity: _opacityAnimation,
1254 1255
      child: Transform(
        transform: Matrix4.rotationZ(_orientationOffset + _orientationAnimation.value)
1256
                             ..setTranslationRaw(0.0, _arrowIconBaselineOffset, 0.0),
1257
        alignment: Alignment.center,
1258
        child: const Icon(
1259
          Icons.arrow_upward,
1260
          size: _arrowIconSize,
1261 1262
        ),
      ),
1263 1264
    );
  }
1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278
}

class _NullTableColumnWidth extends TableColumnWidth {
  const _NullTableColumnWidth();

  @override
  double maxIntrinsicWidth(Iterable<RenderBox> cells, double containerWidth) => throw UnimplementedError();

  @override
  double minIntrinsicWidth(Iterable<RenderBox> cells, double containerWidth) => throw UnimplementedError();
}

class _NullWidget extends Widget {
  const _NullWidget();
1279

1280 1281
  @override
  Element createElement() => throw UnimplementedError();
1282
}