data_table.dart 26.4 KB
Newer Older
1 2 3 4 5 6
// Copyright 2016 The Chromium Authors. All rights reserved.
// 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 12 13
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

import 'checkbox.dart';
import 'colors.dart';
import 'debug.dart';
14
import 'divider.dart';
15
import 'dropdown.dart';
16 17 18 19 20 21 22
import 'icons.dart';
import 'ink_well.dart';
import 'material.dart';
import 'theme.dart';
import 'theme_data.dart';
import 'tooltip.dart';

23
/// Signature for [DataColumn.onSort] callback.
24
typedef void DataColumnSortCallback(int columnIndex, bool ascending);
25 26 27 28 29 30

/// 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
/// as the `columns` argument to the [new DataTable] constructor.
31
@immutable
32 33 34 35 36
class DataColumn {
  /// Creates the configuration for a column of a [DataTable].
  ///
  /// The [label] argument must not be null.
  const DataColumn({
37
    @required this.label,
38
    this.tooltip,
39
    this.numeric = false,
40
    this.onSort,
41
  }) : assert(label != null);
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

  /// 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.
  ///
  /// 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.
  final String tooltip;

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

65
  /// Called when the user asks to sort the table using this column.
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
  ///
  /// If null, the column will not be considered sortable.
  ///
  /// See [DataTable.sortColumnIndex] and [DataTable.sortAscending].
  final DataColumnSortCallback onSort;

  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
/// as the `rows` argument to the [new DataTable] constructor.
///
/// The data for this row of the table is provided in the [cells]
/// property of the [DataRow] object.
83
@immutable
84 85 86 87 88 89
class DataRow {
  /// Creates the configuration for a row of a [DataTable].
  ///
  /// The [cells] argument must not be null.
  const DataRow({
    this.key,
90
    this.selected = false,
91
    this.onSelectChanged,
92
    @required this.cells,
93
  }) : assert(cells != null);
94

95 96 97 98 99 100
  /// 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({
    int index,
101
    this.selected = false,
102
    this.onSelectChanged,
103
    @required this.cells,
104 105
  }) : assert(cells != null),
       key = new ValueKey<int>(index);
106

107 108 109 110 111 112 113 114
  /// 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.
  final LocalKey key;

115
  /// Called when the user selects or unselects a selectable row.
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
  ///
  /// 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.
  final ValueChanged<bool> onSelectChanged;

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

  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]
/// in the [DataTable], in the [new DataRow] constructor's `cells`
/// argument.
154
@immutable
155 156 157 158
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
159
  /// a [Text] or [DropdownButton] widget; this becomes the [child]
160 161 162 163 164
  /// 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.
165
  const DataCell(this.child, {
166 167
    this.placeholder = false,
    this.showEditIcon = false,
168
    this.onTap,
169
  }) : assert(child != null);
170

171
  /// A cell that has no content and has zero width and height.
172 173
  static final DataCell empty = new DataCell(new Container(width: 0.0, height: 0.0));

174 175
  /// The data for the row.
  ///
176
  /// Typically a [Text] widget or a [DropdownButton] widget.
177 178 179 180
  ///
  /// If the cell has no data, then a [Text] widget with placeholder
  /// text should be provided instead, and [placeholder] should be set
  /// to true.
181 182
  ///
  /// {@macro flutter.widgets.child}
183
  final Widget child;
184

185
  /// Whether the [child] is actually a placeholder.
186 187 188 189 190 191 192 193 194 195 196 197 198 199 200
  ///
  /// 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;

201
  /// Called if the cell is tapped.
202
  ///
203
  /// If non-null, tapping the cell will call this callback. If
204
  /// null, tapping the cell will attempt to select the row (if
205
  /// [DataRow.onSelectChanged] is provided).
206 207 208 209 210 211 212 213 214 215 216 217
  final VoidCallback onTap;

  bool get _debugInteractive => onTap != null;
}

/// A material design data table.
///
/// 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.
///
218 219 220 221 222 223 224
/// 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.
// TODO(ianh): Also suggest [ScrollingDataTable] once we have it.
///
225 226
/// See also:
///
Adam Barth's avatar
Adam Barth committed
227 228 229 230 231
///  * [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.
232
///  * <https://material.google.com/components/data-tables.html>
233 234 235 236 237 238
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
239
  /// length greater than zero and must not be null.
240
  ///
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259
  /// 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({
    Key key,
260
    @required this.columns,
261
    this.sortColumnIndex,
262
    this.sortAscending = true,
263
    this.onSelectAll,
264
    @required this.rows,
265 266 267 268 269 270 271 272
  }) : assert(columns != null),
       assert(columns.isNotEmpty),
       assert(sortColumnIndex == null || (sortColumnIndex >= 0 && sortColumnIndex < columns.length)),
       assert(sortAscending != null),
       assert(rows != null),
       assert(!rows.any((DataRow row) => row.cells.length != columns.length)),
       _onlyTextColumn = _initOnlyTextColumn(columns),
       super(key: key);
273 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 301

  /// 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.
  final int sortColumnIndex;

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

302 303 304 305 306 307 308 309 310 311 312
  /// 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.
  final ValueSetter<bool> onSelectAll;

313 314 315 316 317 318 319 320 321 322
  /// The data to show in each row (excluding the row that contains
  /// the column headings). Must be non-null, but may be empty.
  final List<DataRow> rows;

  // Set by the constructor to the index of the only Column that is
  // non-numeric, if there is exactly one, otherwise null.
  final int _onlyTextColumn;
  static int _initOnlyTextColumn(List<DataColumn> columns) {
    int result;
    for (int index = 0; index < columns.length; index += 1) {
323
      final DataColumn column = columns[index];
324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340
      if (!column.numeric) {
        if (result != null)
          return null;
        result = index;
      }
    }
    return result;
  }

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

  static final LocalKey _headingRowKey = new UniqueKey();

  void _handleSelectAll(bool checked) {
341 342 343 344 345 346 347
    if (onSelectAll != null) {
      onSelectAll(checked);
    } else {
      for (DataRow row in rows) {
        if ((row.onSelectChanged != null) && (row.selected != checked))
          row.onSelectChanged(checked);
      }
348 349 350
    }
  }

351 352 353 354 355 356
  static const double _headingRowHeight = 56.0;
  static const double _dataRowHeight = 48.0;
  static const double _tablePadding = 24.0;
  static const double _columnSpacing = 56.0;
  static const double _sortArrowPadding = 2.0;
  static const double _headingFontSize = 12.0;
357 358 359
  static const Duration _sortArrowAnimationDuration = const Duration(milliseconds: 150);
  static const Color _grey100Opacity = const Color(0x0A000000); // Grey 100 as opacity instead of solid color
  static const Color _grey300Opacity = const Color(0x1E000000); // Dark theme variant is just a guess.
360 361 362 363 364 365 366 367

  Widget _buildCheckbox({
    Color color,
    bool checked,
    VoidCallback onRowTap,
    ValueChanged<bool> onCheckboxChanged
  }) {
    Widget contents = new Padding(
368
      padding: const EdgeInsetsDirectional.only(start: _tablePadding, end: _tablePadding / 2.0),
369 370 371 372
      child: new Center(
        child: new Checkbox(
          activeColor: color,
          value: checked,
373 374 375
          onChanged: onCheckboxChanged,
        ),
      ),
376 377
    );
    if (onRowTap != null) {
378
      contents = new TableRowInkWell(
379
        onTap: onRowTap,
380
        child: contents,
381 382 383 384
      );
    }
    return new TableCell(
      verticalAlignment: TableCellVerticalAlignment.fill,
385
      child: contents,
386 387 388 389
    );
  }

  Widget _buildHeadingCell({
390
    BuildContext context,
391
    EdgeInsetsGeometry padding,
392 393 394 395 396
    Widget label,
    String tooltip,
    bool numeric,
    VoidCallback onSort,
    bool sorted,
397
    bool ascending,
398 399 400 401 402
  }) {
    if (onSort != null) {
      final Widget arrow = new _SortArrow(
        visible: sorted,
        down: sorted ? ascending : null,
403
        duration: _sortArrowAnimationDuration,
404
      );
405
      const Widget arrowPadding = const SizedBox(width: _sortArrowPadding);
406
      label = new Row(
407 408
        textDirection: numeric ? TextDirection.rtl : null,
        children: <Widget>[ label, arrowPadding, arrow ],
409 410 411 412
      );
    }
    label = new Container(
      padding: padding,
413
      height: _headingRowHeight,
414
      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
415 416
      child: new AnimatedDefaultTextStyle(
        style: new TextStyle(
417
          // TODO(ianh): font family should match Theme; see https://github.com/flutter/flutter/issues/3116
418
          fontWeight: FontWeight.w500,
419 420
          fontSize: _headingFontSize,
          height: math.min(1.0, _headingRowHeight / _headingFontSize),
421 422
          color: (Theme.of(context).brightness == Brightness.light)
            ? ((onSort != null && sorted) ? Colors.black87 : Colors.black54)
423
            : ((onSort != null && sorted) ? Colors.white : Colors.white70),
424
        ),
425
        softWrap: false,
426
        duration: _sortArrowAnimationDuration,
427 428
        child: label,
      ),
429 430 431 432
    );
    if (tooltip != null) {
      label = new Tooltip(
        message: tooltip,
433
        child: label,
434 435 436 437 438
      );
    }
    if (onSort != null) {
      label = new InkWell(
        onTap: onSort,
439
        child: label,
440 441 442 443 444 445
      );
    }
    return label;
  }

  Widget _buildDataCell({
Ian Hickson's avatar
Ian Hickson committed
446
    BuildContext context,
447
    EdgeInsetsGeometry padding,
448 449 450 451 452
    Widget label,
    bool numeric,
    bool placeholder,
    bool showEditIcon,
    VoidCallback onTap,
453
    VoidCallback onSelectChanged,
454
  }) {
455
    final bool isLightTheme = Theme.of(context).brightness == Brightness.light;
456
    if (showEditIcon) {
457
      const Widget icon = const Icon(Icons.edit, size: 18.0);
458
      label = new Expanded(child: label);
459 460 461 462
      label = new Row(
        textDirection: numeric ? TextDirection.rtl : null,
        children: <Widget>[ label, icon ],
      );
463 464 465
    }
    label = new Container(
      padding: padding,
466
      height: _dataRowHeight,
467
      alignment: numeric ? Alignment.centerRight : AlignmentDirectional.centerStart,
468 469 470 471 472 473
      child: new DefaultTextStyle(
        style: new TextStyle(
          // TODO(ianh): font family should be Roboto; see https://github.com/flutter/flutter/issues/3116
          fontSize: 13.0,
          color: isLightTheme
            ? (placeholder ? Colors.black38 : Colors.black87)
474
            : (placeholder ? Colors.white30 : Colors.white70),
475
        ),
476
        child: IconTheme.merge(
477
          data: new IconThemeData(
478
            color: isLightTheme ? Colors.black54 : Colors.white70,
479
          ),
480
          child: new DropdownButtonHideUnderline(child: label),
481 482 483 484 485 486
        )
      )
    );
    if (onTap != null) {
      label = new InkWell(
        onTap: onTap,
487
        child: label,
488 489
      );
    } else if (onSelectChanged != null) {
490
      label = new TableRowInkWell(
491
        onTap: onSelectChanged,
492
        child: label,
493 494 495 496 497 498 499 500 501 502 503
      );
    }
    return label;
  }

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

    final ThemeData theme = Theme.of(context);
    final BoxDecoration _kSelectedDecoration = new BoxDecoration(
504
      border: new Border(bottom: Divider.createBorderSide(context, width: 1.0)),
505
      // The backgroundColor has to be transparent so you can see the ink on the material
506
      color: (Theme.of(context).brightness == Brightness.light) ? _grey100Opacity : _grey300Opacity,
507 508
    );
    final BoxDecoration _kUnselectedDecoration = new BoxDecoration(
509
      border: new Border(bottom: Divider.createBorderSide(context, width: 1.0)),
510 511 512 513 514
    );

    final bool showCheckboxColumn = rows.any((DataRow row) => row.onSelectChanged != null);
    final bool allChecked = showCheckboxColumn && !rows.any((DataRow row) => row.onSelectChanged != null && !row.selected);

515 516
    final List<TableColumnWidth> tableColumns = new List<TableColumnWidth>(columns.length + (showCheckboxColumn ? 1 : 0));
    final List<TableRow> tableRows = new List<TableRow>.generate(
517 518 519 520 521 522 523 524
      rows.length + 1, // the +1 is for the header row
      (int index) {
        return new TableRow(
          key: index == 0 ? _headingRowKey : rows[index - 1].key,
          decoration: index > 0 && rows[index - 1].selected ? _kSelectedDecoration
                                                            : _kUnselectedDecoration,
          children: new List<Widget>(tableColumns.length)
        );
525
      },
526 527 528 529 530 531
    );

    int rowIndex;

    int displayColumnIndex = 0;
    if (showCheckboxColumn) {
532
      tableColumns[0] = const FixedColumnWidth(_tablePadding + Checkbox.width + _tablePadding / 2.0);
533 534 535
      tableRows[0].children[0] = _buildCheckbox(
        color: theme.accentColor,
        checked: allChecked,
536
        onCheckboxChanged: _handleSelectAll,
537 538 539 540 541 542 543
      );
      rowIndex = 1;
      for (DataRow row in rows) {
        tableRows[rowIndex].children[0] = _buildCheckbox(
          color: theme.accentColor,
          checked: row.selected,
          onRowTap: () => row.onSelectChanged(!row.selected),
544
          onCheckboxChanged: row.onSelectChanged,
545 546 547 548 549 550 551
        );
        rowIndex += 1;
      }
      displayColumnIndex += 1;
    }

    for (int dataColumnIndex = 0; dataColumnIndex < columns.length; dataColumnIndex += 1) {
552
      final DataColumn column = columns[dataColumnIndex];
553
      final EdgeInsetsDirectional padding = new EdgeInsetsDirectional.only(
554 555
        start: dataColumnIndex == 0 ? showCheckboxColumn ? _tablePadding / 2.0 : _tablePadding : _columnSpacing / 2.0,
        end: dataColumnIndex == columns.length - 1 ? _tablePadding : _columnSpacing / 2.0,
556 557 558 559 560 561 562
      );
      if (dataColumnIndex == _onlyTextColumn) {
        tableColumns[displayColumnIndex] = const IntrinsicColumnWidth(flex: 1.0);
      } else {
        tableColumns[displayColumnIndex] = const IntrinsicColumnWidth();
      }
      tableRows[0].children[displayColumnIndex] = _buildHeadingCell(
563
        context: context,
564 565 566 567 568 569
        padding: padding,
        label: column.label,
        tooltip: column.tooltip,
        numeric: column.numeric,
        onSort: () => column.onSort(dataColumnIndex, sortColumnIndex == dataColumnIndex ? !sortAscending : true),
        sorted: dataColumnIndex == sortColumnIndex,
570
        ascending: sortAscending,
571 572 573
      );
      rowIndex = 1;
      for (DataRow row in rows) {
574
        final DataCell cell = row.cells[dataColumnIndex];
575
        tableRows[rowIndex].children[displayColumnIndex] = _buildDataCell(
Ian Hickson's avatar
Ian Hickson committed
576
          context: context,
577
          padding: padding,
578
          label: cell.child,
579 580 581 582
          numeric: column.numeric,
          placeholder: cell.placeholder,
          showEditIcon: cell.showEditIcon,
          onTap: cell.onTap,
583
          onSelectChanged: () => row.onSelectChanged(!row.selected),
584 585 586 587 588 589 590 591
        );
        rowIndex += 1;
      }
      displayColumnIndex += 1;
    }

    return new Table(
      columnWidths: tableColumns.asMap(),
592
      children: tableRows,
593 594 595 596 597 598 599 600 601 602
    );
  }
}

/// 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.
///
603
/// The [TableRowInkWell] must be in the same coordinate space (modulo
604 605 606 607
/// 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
608
/// achieve: just put the [TableRowInkWell] as the direct child of the
609
/// [Table], and put the other contents of the cell inside it.)
610
class TableRowInkWell extends InkResponse {
611
  /// Creates an ink well for a table row.
612
  const TableRowInkWell({
613 614 615 616 617
    Key key,
    Widget child,
    GestureTapCallback onTap,
    GestureTapCallback onDoubleTap,
    GestureLongPressCallback onLongPress,
618
    ValueChanged<bool> onHighlightChanged,
619 620 621 622 623 624 625 626
  }) : super(
    key: key,
    child: child,
    onTap: onTap,
    onDoubleTap: onDoubleTap,
    onLongPress: onLongPress,
    onHighlightChanged: onHighlightChanged,
    containedInkWell: true,
627
    highlightShape: BoxShape.rectangle,
628 629 630 631 632 633 634
  );

  @override
  RectCallback getRectCallback(RenderBox referenceBox) {
    return () {
      RenderObject cell = referenceBox;
      AbstractNode table = cell.parent;
635
      final Matrix4 transform = new Matrix4.identity();
636
      while (table is RenderObject && table is! RenderTable) {
637
        final RenderTable parentBox = table;
638 639 640 641 642 643
        parentBox.applyPaintTransform(cell, transform);
        assert(table == cell.parent);
        cell = table;
        table = table.parent;
      }
      if (table is RenderTable) {
644
        final TableCellParentData cellParentData = cell.parentData;
645
        assert(cellParentData.y != null);
646
        final Rect rect = table.getRowBox(cellParentData.y);
647
        // The rect is in the table's coordinate space. We need to change it to the
648
        // TableRowInkWell's coordinate space.
649
        table.applyPaintTransform(cell, transform);
650
        final Offset offset = MatrixUtils.getAsTranslation(transform);
651 652 653 654 655 656 657 658 659 660 661 662 663 664 665
        if (offset != null)
          return rect.shift(-offset);
      }
      return Rect.zero;
    };
  }

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

class _SortArrow extends StatefulWidget {
666
  const _SortArrow({
667 668 669
    Key key,
    this.visible,
    this.down,
670
    this.duration,
671 672 673 674 675 676 677 678 679 680 681 682
  }) : super(key: key);

  final bool visible;

  final bool down;

  final Duration duration;

  @override
  _SortArrowState createState() => new _SortArrowState();
}

683
class _SortArrowState extends State<_SortArrow> with TickerProviderStateMixin {
684 685 686 687 688 689 690 691 692 693 694 695 696 697 698

  AnimationController _opacityController;
  Animation<double> _opacityAnimation;

  AnimationController _orientationController;
  Animation<double> _orientationAnimation;
  double _orientationOffset = 0.0;

  bool _down;

  @override
  void initState() {
    super.initState();
    _opacityAnimation = new CurvedAnimation(
      parent: _opacityController = new AnimationController(
699
        duration: widget.duration,
700
        vsync: this,
701
      ),
702
      curve: Curves.fastOutSlowIn
703 704
    )
    ..addListener(_rebuild);
705
    _opacityController.value = widget.visible ? 1.0 : 0.0;
706 707
    _orientationAnimation = new Tween<double>(
      begin: 0.0,
708
      end: math.pi,
709 710
    ).animate(new CurvedAnimation(
      parent: _orientationController = new AnimationController(
711
        duration: widget.duration,
712
        vsync: this,
713 714 715 716 717
      ),
      curve: Curves.easeIn
    ))
    ..addListener(_rebuild)
    ..addStatusListener(_resetOrientationAnimation);
718
    if (widget.visible)
719
      _orientationOffset = widget.down ? 0.0 : math.pi;
720 721 722 723 724 725 726 727 728 729
  }

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

  void _resetOrientationAnimation(AnimationStatus status) {
    if (status == AnimationStatus.completed) {
730 731
      assert(_orientationAnimation.value == math.pi);
      _orientationOffset += math.pi;
732 733 734 735 736
      _orientationController.value = 0.0; // TODO(ianh): This triggers a pointless rebuild.
    }
  }

  @override
737 738
  void didUpdateWidget(_SortArrow oldWidget) {
    super.didUpdateWidget(oldWidget);
739
    bool skipArrow = false;
740 741 742
    final bool newDown = widget.down != null ? widget.down : _down;
    if (oldWidget.visible != widget.visible) {
      if (widget.visible && (_opacityController.status == AnimationStatus.dismissed)) {
743 744
        _orientationController.stop();
        _orientationController.value = 0.0;
745
        _orientationOffset = newDown ? 0.0 : math.pi;
746 747
        skipArrow = true;
      }
748
      if (widget.visible) {
749 750
        _opacityController.forward();
      } else {
751
        _opacityController.reverse();
752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770
      }
    }
    if ((_down != newDown) && !skipArrow) {
      if (_orientationController.status == AnimationStatus.dismissed) {
        _orientationController.forward();
      } else {
        _orientationController.reverse();
      }
    }
    _down = newDown;
  }

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

771 772
  static const double _arrowIconBaselineOffset = -1.5;
  static const double _arrowIconSize = 16.0;
773 774 775 776 777 778 779

  @override
  Widget build(BuildContext context) {
    return new Opacity(
      opacity: _opacityAnimation.value,
      child: new Transform(
        transform: new Matrix4.rotationZ(_orientationOffset + _orientationAnimation.value)
780
                             ..setTranslationRaw(0.0, _arrowIconBaselineOffset, 0.0),
781
        alignment: Alignment.center,
782
        child: new Icon(
Ian Hickson's avatar
Ian Hickson committed
783
          Icons.arrow_downward,
784
          size: _arrowIconSize,
785 786 787
          color: (Theme.of(context).brightness == Brightness.light) ? Colors.black87 : Colors.white70,
        ),
      ),
788 789 790 791
    );
  }

}