data_table.dart 49.6 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
    this.mouseCursor,
48
  });
49 50 51 52 53 54 55

  /// 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.
  ///
56 57 58 59 60 61 62 63
  /// 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.
64
  ///
65 66 67 68 69 70 71 72
  /// 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.
73
  final String? tooltip;
74 75 76 77 78 79 80

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

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

  bool get _debugInteractive => onSort != null;
89 90 91 92 93 94 95 96 97 98 99 100 101 102

  /// The cursor for a mouse pointer when it enters or is hovering over the
  /// heading row.
  ///
  /// [MaterialStateProperty.resolve] is used for the following [MaterialState]s:
  ///
  ///  * [MaterialState.disabled].
  ///
  /// If this is null, then the value of [DataTableThemeData.headingCellCursor]
  /// is used. If that's null, then [MaterialStateMouseCursor.clickable] is used.
  ///
  /// See also:
  ///  * [MaterialStateMouseCursor], which can be used to create a [MouseCursor].
  final MaterialStateProperty<MouseCursor?>? mouseCursor;
103 104 105 106 107 108
}

/// 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
109
/// as the `rows` argument to the [DataTable.new] constructor.
110 111 112
///
/// The data for this row of the table is provided in the [cells]
/// property of the [DataRow] object.
113
@immutable
114 115 116 117 118 119
class DataRow {
  /// Creates the configuration for a row of a [DataTable].
  ///
  /// The [cells] argument must not be null.
  const DataRow({
    this.key,
120
    this.selected = false,
121
    this.onSelectChanged,
122
    this.onLongPress,
123
    this.color,
124
    this.mouseCursor,
125
    required this.cells,
126
  });
127

128 129 130 131 132
  /// 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({
133
    int? index,
134
    this.selected = false,
135
    this.onSelectChanged,
136
    this.onLongPress,
137
    this.color,
138
    this.mouseCursor,
139
    required this.cells,
140
  }) : key = ValueKey<int?>(index);
141

142 143 144 145 146 147
  /// 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.
148
  final LocalKey? key;
149

150
  /// Called when the user selects or unselects a selectable row.
151 152 153 154 155 156 157 158 159 160 161 162
  ///
  /// 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.
163 164 165 166
  ///
  /// 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.
167
  final ValueChanged<bool?>? onSelectChanged;
168

169 170 171 172 173 174 175 176
  /// 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;

177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192
  /// 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;

193 194 195 196 197 198 199 200 201 202 203 204 205
  /// 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(
206
  ///   color: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
207
  ///     if (states.contains(MaterialState.selected)) {
208
  ///       return Theme.of(context).colorScheme.primary.withOpacity(0.08);
209
  ///     }
210
  ///     return null;  // Use the default value.
211
  ///   }),
212 213 214
  ///   cells: const <DataCell>[
  ///     // ...
  ///   ],
215
  /// )
216 217 218 219 220 221 222
  /// ```
  ///
  /// 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>.
223
  final MaterialStateProperty<Color?>? color;
224

225 226 227 228 229 230 231 232 233 234 235 236 237 238
  /// The cursor for a mouse pointer when it enters or is hovering over the
  /// data row.
  ///
  /// [MaterialStateProperty.resolve] is used for the following [MaterialState]s:
  ///
  ///  * [MaterialState.selected].
  ///
  /// If this is null, then the value of [DataTableThemeData.dataRowCursor]
  /// is used. If that's null, then [MaterialStateMouseCursor.clickable] is used.
  ///
  /// See also:
  ///  * [MaterialStateMouseCursor], which can be used to create a [MouseCursor].
  final MaterialStateProperty<MouseCursor?>? mouseCursor;

239 240 241 242 243 244
  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]
245
/// in the [DataTable], in the new [DataRow] constructor's `cells`
246
/// argument.
247
@immutable
248 249 250 251
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
252
  /// a [Text] or [DropdownButton] widget; this becomes the [child]
253 254 255 256 257
  /// 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.
258 259
  const DataCell(
    this.child, {
260 261
    this.placeholder = false,
    this.showEditIcon = false,
262
    this.onTap,
263 264 265 266
    this.onLongPress,
    this.onTapDown,
    this.onDoubleTap,
    this.onTapCancel,
267
  });
268

269
  /// A cell that has no content and has zero width and height.
270
  static const DataCell empty = DataCell(SizedBox.shrink());
271

272 273
  /// The data for the row.
  ///
274
  /// Typically a [Text] widget or a [DropdownButton] widget.
275 276 277 278
  ///
  /// If the cell has no data, then a [Text] widget with placeholder
  /// text should be provided instead, and [placeholder] should be set
  /// to true.
279
  ///
280
  /// {@macro flutter.widgets.ProxyWidget.child}
281
  final Widget child;
282

283
  /// Whether the [child] is actually a placeholder.
284 285 286 287 288 289 290 291 292 293 294 295 296 297 298
  ///
  /// 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;

299
  /// Called if the cell is tapped.
300
  ///
301
  /// If non-null, tapping the cell will call this callback. If
302 303
  /// null (including [onDoubleTap], [onLongPress], [onTapCancel] and [onTapDown]),
  /// tapping the cell will attempt to select the row (if
304
  /// [DataRow.onSelectChanged] is provided).
305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331
  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.
332
  ///
333
  /// If non-null, canceling the tap gesture will invoke this callback.
334 335 336 337
  /// If null (including [onTap], [onDoubleTap] and [onLongPress]),
  /// tapping the cell will attempt to select the
  /// row (if [DataRow.onSelectChanged] is provided).
  final GestureTapCancelCallback? onTapCancel;
338

339 340 341 342 343
  bool get _debugInteractive => onTap != null ||
      onDoubleTap != null ||
      onLongPress != null ||
      onTapDown != null ||
      onTapCancel != null;
344 345
}

346
/// A Material Design data table.
347
///
348 349
/// {@youtube 560 315 https://www.youtube.com/watch?v=ktTajqbhIcY}
///
350 351 352 353 354
/// 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.
///
355 356 357 358 359
/// 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.
360
///
361
/// {@tool dartpad}
362 363 364 365 366 367 368
/// 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)
///
369
/// ** See code in examples/api/lib/material/data_table/data_table.0.dart **
370
/// {@end-tool}
371
///
372
///
373
/// {@tool dartpad}
374 375 376
/// This sample shows how to display a [DataTable] with alternate colors per
/// row, and a custom color for when the row is selected.
///
377
/// ** See code in examples/api/lib/material/data_table/data_table.1.dart **
378 379
/// {@end-tool}
///
380 381 382 383 384
/// [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.
///
385 386
/// See also:
///
Adam Barth's avatar
Adam Barth committed
387 388 389 390 391
///  * [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.
392
///  * <https://material.io/design/components/data-tables.html>
393 394 395 396 397 398
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
399
  /// length greater than zero and must not be null.
400
  ///
401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418
  /// 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({
419
    super.key,
420
    required this.columns,
421
    this.sortColumnIndex,
422
    this.sortAscending = true,
423
    this.onSelectAll,
424
    this.decoration,
425
    this.dataRowColor,
426 427 428 429 430 431 432
    @Deprecated(
      'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
      'This feature was deprecated after v3.7.0-5.0.pre.',
    )
    double? dataRowHeight,
    double? dataRowMinHeight,
    double? dataRowMaxHeight,
433 434 435 436 437 438
    this.dataTextStyle,
    this.headingRowColor,
    this.headingRowHeight,
    this.headingTextStyle,
    this.horizontalMargin,
    this.columnSpacing,
439
    this.showCheckboxColumn = true,
440 441
    this.showBottomBorder = false,
    this.dividerThickness,
442
    required this.rows,
443
    this.checkboxHorizontalMargin,
444
    this.border,
445
    this.clipBehavior = Clip.none,
446
  }) : assert(columns.isNotEmpty),
447 448
       assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
       assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
449
       assert(dividerThickness == null || dividerThickness >= 0),
450 451 452 453 454
       assert(dataRowMinHeight == null || dataRowMaxHeight == null || dataRowMaxHeight >= dataRowMinHeight),
       assert(dataRowHeight == null || (dataRowMinHeight == null && dataRowMaxHeight == null),
         'dataRowHeight ($dataRowHeight) must not be set if dataRowMinHeight ($dataRowMinHeight) or dataRowMaxHeight ($dataRowMaxHeight) are set.'),
       dataRowMinHeight = dataRowHeight ?? dataRowMinHeight,
       dataRowMaxHeight = dataRowHeight ?? dataRowMaxHeight,
455
       _onlyTextColumn = _initOnlyTextColumn(columns);
456 457 458 459 460 461 462 463 464 465 466 467 468 469 470

  /// 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.
471
  final int? sortColumnIndex;
472 473 474 475 476 477 478 479 480 481 482 483 484

  /// 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;

485 486 487 488 489 490 491 492 493
  /// 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.
494
  final ValueSetter<bool?>? onSelectAll;
495

496 497 498 499 500 501 502 503
  /// {@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;

504 505 506 507 508 509 510 511 512 513 514
  /// {@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}
  ///
515 516 517 518
  /// 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].
519
  ///
520
  /// {@template flutter.material.DataTable.dataRowColor}
521 522
  /// ```dart
  /// DataTable(
523
  ///   dataRowColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
524
  ///     if (states.contains(MaterialState.selected)) {
525
  ///       return Theme.of(context).colorScheme.primary.withOpacity(0.08);
526
  ///     }
527 528
  ///     return null;  // Use the default value.
  ///   }),
529 530
  ///   columns: _columns,
  ///   rows: _rows,
531 532 533 534 535 536 537 538 539
  /// )
  /// ```
  ///
  /// 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}
540
  final MaterialStateProperty<Color?>? dataRowColor;
541 542

  /// {@template flutter.material.dataTable.dataRowHeight}
543
  /// The height of each row (excluding the row that contains column headings).
544
  /// {@endtemplate}
545
  ///
546 547 548
  /// If null, [DataTableThemeData.dataRowHeight] is used. This value defaults
  /// to [kMinInteractiveDimension] to adhere to the Material Design
  /// specifications.
549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571
  @Deprecated(
    'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
    'This feature was deprecated after v3.7.0-5.0.pre.',
  )
  double? get dataRowHeight => dataRowMinHeight == dataRowMaxHeight ? dataRowMinHeight : null;

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

  /// {@template flutter.material.dataTable.dataRowMaxHeight}
  /// The maximum height of each row (excluding the row that contains column headings).
  /// {@endtemplate}
  ///
  /// If null, [DataTableThemeData.dataRowMaxHeight] is used. This value defaults
  /// to [kMinInteractiveDimension] to adhere to the Material Design
  /// specifications.
  final double? dataRowMaxHeight;
572

573 574 575 576
  /// {@template flutter.material.dataTable.dataTextStyle}
  /// The text style for data rows.
  /// {@endtemplate}
  ///
577
  /// If null, [DataTableThemeData.dataTextStyle] is used. By default, the text
578
  /// style is [TextTheme.bodyMedium].
579
  final TextStyle? dataTextStyle;
580 581 582 583 584 585 586 587 588

  /// {@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.
589
  /// {@endtemplate}
590
  ///
591 592
  /// If null, [DataTableThemeData.headingRowColor] is used.
  ///
593
  /// {@template flutter.material.DataTable.headingRowColor}
594 595
  /// ```dart
  /// DataTable(
596 597
  ///   columns: _columns,
  ///   rows: _rows,
598
  ///   headingRowColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
599
  ///     if (states.contains(MaterialState.hovered)) {
600
  ///       return Theme.of(context).colorScheme.primary.withOpacity(0.08);
601
  ///     }
602 603 604 605 606 607 608 609 610 611 612
  ///     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}
613
  final MaterialStateProperty<Color?>? headingRowColor;
614 615

  /// {@template flutter.material.dataTable.headingRowHeight}
616
  /// The height of the heading row.
617
  /// {@endtemplate}
618
  ///
619 620
  /// If null, [DataTableThemeData.headingRowHeight] is used. This value
  /// defaults to 56.0 to adhere to the Material Design specifications.
621
  final double? headingRowHeight;
622

623 624 625 626
  /// {@template flutter.material.dataTable.headingTextStyle}
  /// The text style for the heading row.
  /// {@endtemplate}
  ///
627
  /// If null, [DataTableThemeData.headingTextStyle] is used. By default, the
628
  /// text style is [TextTheme.titleSmall].
629
  final TextStyle? headingTextStyle;
630 631

  /// {@template flutter.material.dataTable.horizontalMargin}
632 633 634 635 636
  /// 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.
637
  /// {@endtemplate}
638
  ///
639 640
  /// If null, [DataTableThemeData.horizontalMargin] is used. This value
  /// defaults to 24.0 to adhere to the Material Design specifications.
641 642 643 644
  ///
  /// 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.
645
  final double? horizontalMargin;
646

647
  /// {@template flutter.material.dataTable.columnSpacing}
648
  /// The horizontal margin between the contents of each data column.
649
  /// {@endtemplate}
650
  ///
651 652
  /// If null, [DataTableThemeData.columnSpacing] is used. This value defaults
  /// to 56.0 to adhere to the Material Design specifications.
653
  final double? columnSpacing;
654

655 656 657
  /// {@template flutter.material.dataTable.showCheckboxColumn}
  /// Whether the widget should display checkboxes for selectable rows.
  ///
658
  /// If true, a [Checkbox] will be placed at the beginning of each row that is
659 660 661
  /// selectable. However, if [DataRow.onSelectChanged] is not set for any row,
  /// checkboxes will not be placed, even if this value is true.
  ///
662
  /// If false, all rows will not display a [Checkbox].
663 664 665
  /// {@endtemplate}
  final bool showCheckboxColumn;

666
  /// The data to show in each row (excluding the row that contains
667 668 669
  /// the column headings).
  ///
  /// Must be non-null, but may be empty.
670 671
  final List<DataRow> rows;

672 673 674 675 676
  /// {@template flutter.material.dataTable.dividerThickness}
  /// The width of the divider that appears between [TableRow]s.
  ///
  /// Must be greater than or equal to zero.
  /// {@endtemplate}
677 678 679
  ///
  /// If null, [DataTableThemeData.dividerThickness] is used. This value
  /// defaults to 1.0.
680
  final double? dividerThickness;
681 682 683 684

  /// 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
685
  /// around the table defined by [decoration].
686 687
  final bool showBottomBorder;

688 689 690 691 692 693 694 695 696 697
  /// {@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;

698 699 700
  /// The style to use when painting the boundary and interior divisions of the table.
  final TableBorder? border;

701 702 703 704 705 706 707
  /// {@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;

708 709
  // Set by the constructor to the index of the only Column that is
  // non-numeric, if there is exactly one, otherwise null.
710 711 712
  final int? _onlyTextColumn;
  static int? _initOnlyTextColumn(List<DataColumn> columns) {
    int? result;
713
    for (int index = 0; index < columns.length; index += 1) {
714
      final DataColumn column = columns[index];
715
      if (!column.numeric) {
716
        if (result != null) {
717
          return null;
718
        }
719 720 721 722 723 724 725 726 727 728 729
        result = index;
      }
    }
    return result;
  }

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

730
  static final LocalKey _headingRowKey = UniqueKey();
731

732 733 734 735
  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);
736
    if (onSelectAll != null) {
737
      onSelectAll!(effectiveChecked);
738
    } else {
739
      for (final DataRow row in rows) {
740
        if (row.onSelectChanged != null && row.selected != effectiveChecked) {
741
          row.onSelectChanged!(effectiveChecked);
742
        }
743
      }
744 745 746
    }
  }

747 748 749 750 751 752 753 754 755 756 757
  /// 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.
758
  static const double _sortArrowPadding = 2.0;
759 760 761 762

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

763
  static const Duration _sortArrowAnimationDuration = Duration(milliseconds: 150);
764 765

  Widget _buildCheckbox({
766
    required BuildContext context,
767
    required bool? checked,
768 769 770
    required VoidCallback? onRowTap,
    required ValueChanged<bool?>? onCheckboxChanged,
    required MaterialStateProperty<Color?>? overlayColor,
771
    required bool tristate,
772
    MouseCursor? rowMouseCursor,
773
  }) {
774
    final ThemeData themeData = Theme.of(context);
775 776 777
    final double effectiveHorizontalMargin = horizontalMargin
      ?? themeData.dataTableTheme.horizontalMargin
      ?? _horizontalMargin;
778 779 780 781 782 783
    final double effectiveCheckboxHorizontalMarginStart = checkboxHorizontalMargin
      ?? themeData.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin;
    final double effectiveCheckboxHorizontalMarginEnd = checkboxHorizontalMargin
      ?? themeData.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin / 2.0;
784
    Widget contents = Semantics(
785
      container: true,
786
      child: Padding(
787
        padding: EdgeInsetsDirectional.only(
788 789
          start: effectiveCheckboxHorizontalMarginStart,
          end: effectiveCheckboxHorizontalMarginEnd,
790
        ),
791 792
        child: Center(
          child: Checkbox(
793 794
            value: checked,
            onChanged: onCheckboxChanged,
795
            tristate: tristate,
796
          ),
797 798
        ),
      ),
799 800
    );
    if (onRowTap != null) {
801
      contents = TableRowInkWell(
802
        onTap: onRowTap,
803
        overlayColor: overlayColor,
804
        mouseCursor: rowMouseCursor,
805
        child: contents,
806 807
      );
    }
808
    return TableCell(
809
      verticalAlignment: TableCellVerticalAlignment.fill,
810
      child: contents,
811 812 813 814
    );
  }

  Widget _buildHeadingCell({
815 816 817 818 819 820 821 822 823
    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,
824
    required MouseCursor? mouseCursor,
825
  }) {
826
    final ThemeData themeData = Theme.of(context);
827
    final DataTableThemeData dataTableTheme = DataTableTheme.of(context);
828 829 830 831
    label = Row(
      textDirection: numeric ? TextDirection.rtl : null,
      children: <Widget>[
        label,
832 833 834 835 836 837 838 839 840
        if (onSort != null)
          ...<Widget>[
            _SortArrow(
              visible: sorted,
              up: sorted ? ascending : null,
              duration: _sortArrowAnimationDuration,
            ),
            const SizedBox(width: _sortArrowPadding),
          ],
841 842
      ],
    );
843 844

    final TextStyle effectiveHeadingTextStyle = headingTextStyle
845
      ?? dataTableTheme.headingTextStyle
846
      ?? themeData.dataTableTheme.headingTextStyle
847
      ?? themeData.textTheme.titleSmall!;
848
    final double effectiveHeadingRowHeight = headingRowHeight
849
      ?? dataTableTheme.headingRowHeight
850 851
      ?? themeData.dataTableTheme.headingRowHeight
      ?? _headingRowHeight;
852
    label = Container(
853
      padding: padding,
854
      height: effectiveHeadingRowHeight,
855
      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
856
      child: AnimatedDefaultTextStyle(
857
        style: effectiveHeadingTextStyle,
858
        softWrap: false,
859
        duration: _sortArrowAnimationDuration,
860 861
        child: label,
      ),
862 863
    );
    if (tooltip != null) {
864
      label = Tooltip(
865
        message: tooltip,
866
        child: label,
867 868
      );
    }
869

870 871 872 873
    // TODO(dkwingsmt): Only wrap Inkwell if onSort != null. Blocked by
    // https://github.com/flutter/flutter/issues/51152
    label = InkWell(
      onTap: onSort,
874
      overlayColor: overlayColor,
875
      mouseCursor: mouseCursor,
876 877
      child: label,
    );
878 879 880 881
    return label;
  }

  Widget _buildDataCell({
882 883 884 885 886 887
    required BuildContext context,
    required EdgeInsetsGeometry padding,
    required Widget label,
    required bool numeric,
    required bool placeholder,
    required bool showEditIcon,
888
    required GestureTapCallback? onTap,
889
    required VoidCallback? onSelectChanged,
890 891 892 893
    required GestureTapCallback? onDoubleTap,
    required GestureLongPressCallback? onLongPress,
    required GestureTapDownCallback? onTapDown,
    required GestureTapCancelCallback? onTapCancel,
894
    required MaterialStateProperty<Color?>? overlayColor,
895
    required GestureLongPressCallback? onRowLongPress,
896
    required MouseCursor? mouseCursor,
897
  }) {
898
    final ThemeData themeData = Theme.of(context);
899
    final DataTableThemeData dataTableTheme = DataTableTheme.of(context);
900
    if (showEditIcon) {
901
      const Widget icon = Icon(Icons.edit, size: 18.0);
902 903
      label = Expanded(child: label);
      label = Row(
904 905 906
        textDirection: numeric ? TextDirection.rtl : null,
        children: <Widget>[ label, icon ],
      );
907
    }
908 909

    final TextStyle effectiveDataTextStyle = dataTextStyle
910
      ?? dataTableTheme.dataTextStyle
911
      ?? themeData.dataTableTheme.dataTextStyle
912
      ?? themeData.textTheme.bodyMedium!;
913 914 915 916 917 918 919
    final double effectiveDataRowMinHeight = dataRowMinHeight
      ?? dataTableTheme.dataRowMinHeight
      ?? themeData.dataTableTheme.dataRowMinHeight
      ?? kMinInteractiveDimension;
    final double effectiveDataRowMaxHeight = dataRowMaxHeight
      ?? dataTableTheme.dataRowMaxHeight
      ?? themeData.dataTableTheme.dataRowMaxHeight
920
      ?? kMinInteractiveDimension;
921
    label = Container(
922
      padding: padding,
923
      constraints: BoxConstraints(minHeight: effectiveDataRowMinHeight, maxHeight: effectiveDataRowMaxHeight),
924
      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
925
      child: DefaultTextStyle(
926
        style: effectiveDataTextStyle.copyWith(
927
          color: placeholder ? effectiveDataTextStyle.color!.withOpacity(0.6) : null,
928
        ),
929
        child: DropdownButtonHideUnderline(child: label),
930
      ),
931
    );
932 933 934 935 936
    if (onTap != null ||
        onDoubleTap != null ||
        onLongPress != null ||
        onTapDown != null ||
        onTapCancel != null) {
937
      label = InkWell(
938
        onTap: onTap,
939 940 941 942
        onDoubleTap: onDoubleTap,
        onLongPress: onLongPress,
        onTapCancel: onTapCancel,
        onTapDown: onTapDown,
943
        overlayColor: overlayColor,
944
        child: label,
945
      );
946
    } else if (onSelectChanged != null || onRowLongPress != null) {
947
      label = TableRowInkWell(
948
        onTap: onSelectChanged,
949
        onLongPress: onRowLongPress,
950
        overlayColor: overlayColor,
951
        mouseCursor: mouseCursor,
952
        child: label,
953 954 955 956 957 958 959 960 961
      );
    }
    return label;
  }

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

962
    final ThemeData theme = Theme.of(context);
963
    final DataTableThemeData dataTableTheme = DataTableTheme.of(context);
964
    final MaterialStateProperty<Color?>? effectiveHeadingRowColor = headingRowColor
965
      ?? dataTableTheme.headingRowColor
966
      ?? theme.dataTableTheme.headingRowColor;
967
    final MaterialStateProperty<Color?>? effectiveDataRowColor = dataRowColor
968
      ?? dataTableTheme.dataRowColor
969
      ?? theme.dataTableTheme.dataRowColor;
970
    final MaterialStateProperty<Color?> defaultRowColor = MaterialStateProperty.resolveWith(
971
      (Set<MaterialState> states) {
972
        if (states.contains(MaterialState.selected)) {
973
          return theme.colorScheme.primary.withOpacity(0.08);
974
        }
975 976
        return null;
      },
977
    );
978 979
    final bool anyRowSelectable = rows.any((DataRow row) => row.onSelectChanged != null);
    final bool displayCheckboxColumn = showCheckboxColumn && anyRowSelectable;
980 981 982 983
    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;
984 985
    final bool anyChecked = displayCheckboxColumn && rowsChecked.isNotEmpty;
    final bool someChecked = anyChecked && !allChecked;
986
    final double effectiveHorizontalMargin = horizontalMargin
987
      ?? dataTableTheme.horizontalMargin
988 989
      ?? theme.dataTableTheme.horizontalMargin
      ?? _horizontalMargin;
990
    final double effectiveCheckboxHorizontalMarginStart = checkboxHorizontalMargin
991
      ?? dataTableTheme.checkboxHorizontalMargin
992 993 994
      ?? theme.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin;
    final double effectiveCheckboxHorizontalMarginEnd = checkboxHorizontalMargin
995
      ?? dataTableTheme.checkboxHorizontalMargin
996 997
      ?? theme.dataTableTheme.checkboxHorizontalMargin
      ?? effectiveHorizontalMargin / 2.0;
998
    final double effectiveColumnSpacing = columnSpacing
999
      ?? dataTableTheme.columnSpacing
1000 1001
      ?? theme.dataTableTheme.columnSpacing
      ?? _columnSpacing;
1002

1003
    final List<TableColumnWidth> tableColumns = List<TableColumnWidth>.filled(columns.length + (displayCheckboxColumn ? 1 : 0), const _NullTableColumnWidth());
1004
    final List<TableRow> tableRows = List<TableRow>.generate(
1005 1006
      rows.length + 1, // the +1 is for the header row
      (int index) {
1007 1008 1009 1010 1011 1012 1013 1014
        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,
        };
1015 1016 1017
        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;
1018 1019 1020
        final BorderSide borderSide = Divider.createBorderSide(
          context,
          width: dividerThickness
1021
            ?? dataTableTheme.dividerThickness
1022 1023 1024
            ?? theme.dataTableTheme.dividerThickness
            ?? _dividerThickness,
        );
1025
        final Border? border = showBottomBorder
1026 1027
          ? Border(bottom: borderSide)
          : index == 0 ? null : Border(top: borderSide);
1028
        return TableRow(
1029
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
1030
          decoration: BoxDecoration(
1031
            border: border,
1032 1033
            color: rowColor ?? defaultRowColor.resolve(states),
          ),
1034
          children: List<Widget>.filled(tableColumns.length, const _NullWidget()),
1035
        );
1036
      },
1037 1038 1039 1040 1041
    );

    int rowIndex;

    int displayColumnIndex = 0;
1042
    if (displayCheckboxColumn) {
1043
      tableColumns[0] = FixedColumnWidth(effectiveCheckboxHorizontalMarginStart + Checkbox.width + effectiveCheckboxHorizontalMarginEnd);
1044
      tableRows[0].children[0] = _buildCheckbox(
1045
        context: context,
1046
        checked: someChecked ? null : allChecked,
1047
        onRowTap: null,
1048
        onCheckboxChanged: (bool? checked) => _handleSelectAll(checked, someChecked),
1049
        overlayColor: null,
1050
        tristate: true,
1051 1052
      );
      rowIndex = 1;
1053
      for (final DataRow row in rows) {
1054 1055 1056 1057
        final Set<MaterialState> states = <MaterialState>{
          if (row.selected)
            MaterialState.selected,
        };
1058
        tableRows[rowIndex].children[0] = _buildCheckbox(
1059
          context: context,
1060
          checked: row.selected,
1061
          onRowTap: row.onSelectChanged == null ? null : () => row.onSelectChanged?.call(!row.selected),
1062
          onCheckboxChanged: row.onSelectChanged,
1063
          overlayColor: row.color ?? effectiveDataRowColor,
1064
          rowMouseCursor: row.mouseCursor?.resolve(states) ?? dataTableTheme.dataRowCursor?.resolve(states),
1065
          tristate: false,
1066 1067 1068 1069 1070 1071 1072
        );
        rowIndex += 1;
      }
      displayColumnIndex += 1;
    }

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

1075
      final double paddingStart;
1076 1077 1078
      if (dataColumnIndex == 0 && displayCheckboxColumn && checkboxHorizontalMargin != null) {
        paddingStart = effectiveHorizontalMargin;
      } else if (dataColumnIndex == 0 && displayCheckboxColumn) {
1079
        paddingStart = effectiveHorizontalMargin / 2.0;
1080
      } else if (dataColumnIndex == 0 && !displayCheckboxColumn) {
1081
        paddingStart = effectiveHorizontalMargin;
1082
      } else {
1083
        paddingStart = effectiveColumnSpacing / 2.0;
1084 1085
      }

1086
      final double paddingEnd;
1087
      if (dataColumnIndex == columns.length - 1) {
1088
        paddingEnd = effectiveHorizontalMargin;
1089
      } else {
1090
        paddingEnd = effectiveColumnSpacing / 2.0;
1091 1092
      }

1093
      final EdgeInsetsDirectional padding = EdgeInsetsDirectional.only(
1094 1095
        start: paddingStart,
        end: paddingEnd,
1096 1097 1098 1099 1100 1101
      );
      if (dataColumnIndex == _onlyTextColumn) {
        tableColumns[displayColumnIndex] = const IntrinsicColumnWidth(flex: 1.0);
      } else {
        tableColumns[displayColumnIndex] = const IntrinsicColumnWidth();
      }
1102 1103 1104 1105
      final Set<MaterialState> headerStates = <MaterialState>{
        if (column.onSort == null)
          MaterialState.disabled,
      };
1106
      tableRows[0].children[displayColumnIndex] = _buildHeadingCell(
1107
        context: context,
1108 1109 1110 1111
        padding: padding,
        label: column.label,
        tooltip: column.tooltip,
        numeric: column.numeric,
1112
        onSort: column.onSort != null ? () => column.onSort!(dataColumnIndex, sortColumnIndex != dataColumnIndex || !sortAscending) : null,
1113
        sorted: dataColumnIndex == sortColumnIndex,
1114
        ascending: sortAscending,
1115
        overlayColor: effectiveHeadingRowColor,
1116
        mouseCursor: column.mouseCursor?.resolve(headerStates) ?? dataTableTheme.headingCellCursor?.resolve(headerStates),
1117 1118
      );
      rowIndex = 1;
1119
      for (final DataRow row in rows) {
1120 1121 1122 1123
        final Set<MaterialState> states = <MaterialState>{
          if (row.selected)
            MaterialState.selected,
        };
1124
        final DataCell cell = row.cells[dataColumnIndex];
1125
        tableRows[rowIndex].children[displayColumnIndex] = _buildDataCell(
Ian Hickson's avatar
Ian Hickson committed
1126
          context: context,
1127
          padding: padding,
1128
          label: cell.child,
1129 1130 1131 1132
          numeric: column.numeric,
          placeholder: cell.placeholder,
          showEditIcon: cell.showEditIcon,
          onTap: cell.onTap,
1133 1134 1135 1136
          onDoubleTap: cell.onDoubleTap,
          onLongPress: cell.onLongPress,
          onTapCancel: cell.onTapCancel,
          onTapDown: cell.onTapDown,
1137
          onSelectChanged: row.onSelectChanged == null ? null : () => row.onSelectChanged?.call(!row.selected),
1138
          overlayColor: row.color ?? effectiveDataRowColor,
1139
          onRowLongPress: row.onLongPress,
1140
          mouseCursor: row.mouseCursor?.resolve(states) ?? dataTableTheme.dataRowCursor?.resolve(states),
1141 1142 1143 1144 1145 1146
        );
        rowIndex += 1;
      }
      displayColumnIndex += 1;
    }

1147
    return Container(
1148
      decoration: decoration ?? dataTableTheme.decoration ?? theme.dataTableTheme.decoration,
1149 1150
      child: Material(
        type: MaterialType.transparency,
1151 1152
        borderRadius: border?.borderRadius,
        clipBehavior: clipBehavior,
1153 1154
        child: Table(
          columnWidths: tableColumns.asMap(),
1155
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
1156
          children: tableRows,
1157
          border: border,
1158 1159
        ),
      ),
1160 1161 1162 1163 1164 1165 1166 1167 1168 1169
    );
  }
}

/// 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.
///
1170
/// The [TableRowInkWell] must be in the same coordinate space (modulo
1171 1172 1173 1174
/// 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
1175
/// achieve: just put the [TableRowInkWell] as the direct child of the
1176
/// [Table], and put the other contents of the cell inside it.)
1177 1178 1179 1180 1181 1182
///
/// See also:
///
///  * [DataTable], which makes use of [TableRowInkWell] when
///    [DataRow.onSelectChanged] is defined and [DataCell.onTap]
///    is not.
1183
class TableRowInkWell extends InkResponse {
1184
  /// Creates an ink well for a table row.
1185
  const TableRowInkWell({
1186 1187 1188 1189 1190 1191
    super.key,
    super.child,
    super.onTap,
    super.onDoubleTap,
    super.onLongPress,
    super.onHighlightChanged,
1192 1193
    super.onSecondaryTap,
    super.onSecondaryTapDown,
1194
    super.overlayColor,
1195
    super.mouseCursor,
1196 1197
  }) : super(
    containedInkWell: true,
1198
    highlightShape: BoxShape.rectangle,
1199 1200 1201 1202 1203 1204
  );

  @override
  RectCallback getRectCallback(RenderBox referenceBox) {
    return () {
      RenderObject cell = referenceBox;
1205
      AbstractNode? table = cell.parent;
1206
      final Matrix4 transform = Matrix4.identity();
1207
      while (table is RenderObject && table is! RenderTable) {
1208
        table.applyPaintTransform(cell, transform);
1209
        assert(table == cell.parent);
1210
        cell = table;
1211 1212 1213
        table = table.parent;
      }
      if (table is RenderTable) {
1214
        final TableCellParentData cellParentData = cell.parentData! as TableCellParentData;
1215
        assert(cellParentData.y != null);
1216
        final Rect rect = table.getRowBox(cellParentData.y!);
1217
        // The rect is in the table's coordinate space. We need to change it to the
1218
        // TableRowInkWell's coordinate space.
1219
        table.applyPaintTransform(cell, transform);
1220
        final Offset? offset = MatrixUtils.getAsTranslation(transform);
1221
        if (offset != null) {
1222
          return rect.shift(-offset);
1223
        }
1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236
      }
      return Rect.zero;
    };
  }

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

class _SortArrow extends StatefulWidget {
1237
  const _SortArrow({
1238 1239 1240
    required this.visible,
    required this.up,
    required this.duration,
1241
  });
1242 1243 1244

  final bool visible;

1245
  final bool? up;
1246 1247 1248 1249

  final Duration duration;

  @override
1250
  _SortArrowState createState() => _SortArrowState();
1251 1252
}

1253
class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
1254 1255
  late AnimationController _opacityController;
  late Animation<double> _opacityAnimation;
1256

1257 1258
  late AnimationController _orientationController;
  late Animation<double> _orientationAnimation;
1259 1260
  double _orientationOffset = 0.0;

1261
  bool? _up;
1262

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

1266 1267 1268
  @override
  void initState() {
    super.initState();
1269
    _up = widget.up;
1270 1271
    _opacityAnimation = CurvedAnimation(
      parent: _opacityController = AnimationController(
1272
        duration: widget.duration,
1273
        vsync: this,
1274
      ),
1275
      curve: Curves.fastOutSlowIn,
1276 1277
    )
    ..addListener(_rebuild);
1278
    _opacityController.value = widget.visible ? 1.0 : 0.0;
1279 1280 1281 1282 1283 1284 1285
    _orientationController = AnimationController(
      duration: widget.duration,
      vsync: this,
    );
    _orientationAnimation = _orientationController.drive(_turnTween)
      ..addListener(_rebuild)
      ..addStatusListener(_resetOrientationAnimation);
1286
    if (widget.visible) {
1287
      _orientationOffset = widget.up! ? 0.0 : math.pi;
1288
    }
1289 1290 1291 1292 1293 1294 1295 1296 1297 1298
  }

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

  void _resetOrientationAnimation(AnimationStatus status) {
    if (status == AnimationStatus.completed) {
1299 1300
      assert(_orientationAnimation.value == math.pi);
      _orientationOffset += math.pi;
1301 1302 1303 1304 1305
      _orientationController.value = 0.0; // TODO(ianh): This triggers a pointless rebuild.
    }
  }

  @override
1306 1307
  void didUpdateWidget(_SortArrow oldWidget) {
    super.didUpdateWidget(oldWidget);
1308
    bool skipArrow = false;
1309
    final bool? newUp = widget.up ?? _up;
1310 1311
    if (oldWidget.visible != widget.visible) {
      if (widget.visible && (_opacityController.status == AnimationStatus.dismissed)) {
1312 1313
        _orientationController.stop();
        _orientationController.value = 0.0;
1314
        _orientationOffset = newUp! ? 0.0 : math.pi;
1315 1316
        skipArrow = true;
      }
1317
      if (widget.visible) {
1318 1319
        _opacityController.forward();
      } else {
1320
        _opacityController.reverse();
1321 1322
      }
    }
1323
    if ((_up != newUp) && !skipArrow) {
1324 1325 1326 1327 1328 1329
      if (_orientationController.status == AnimationStatus.dismissed) {
        _orientationController.forward();
      } else {
        _orientationController.reverse();
      }
    }
1330
    _up = newUp;
1331 1332 1333 1334 1335 1336 1337 1338 1339
  }

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

1340 1341
  static const double _arrowIconBaselineOffset = -1.5;
  static const double _arrowIconSize = 16.0;
1342 1343 1344

  @override
  Widget build(BuildContext context) {
1345 1346
    return FadeTransition(
      opacity: _opacityAnimation,
1347 1348
      child: Transform(
        transform: Matrix4.rotationZ(_orientationOffset + _orientationAnimation.value)
1349
                             ..setTranslationRaw(0.0, _arrowIconBaselineOffset, 0.0),
1350
        alignment: Alignment.center,
1351
        child: const Icon(
1352
          Icons.arrow_upward,
1353
          size: _arrowIconSize,
1354 1355
        ),
      ),
1356 1357
    );
  }
1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371
}

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();
1372

1373 1374
  @override
  Element createElement() => throw UnimplementedError();
1375
}