mergeable_material.dart 21.5 KB
Newer Older
1 2 3 4
// Copyright 2015 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.

5 6
import 'dart:ui' show lerpDouble;

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

10
import 'divider.dart';
11 12 13
import 'material.dart';
import 'shadows.dart';
import 'theme.dart';
14 15 16 17

/// The base type for [MaterialSlice] and [MaterialGap].
///
/// All [MergeableMaterialItem] objects need a [LocalKey].
18
@immutable
19
abstract class MergeableMaterialItem {
20 21 22 23
  /// Abstract const constructor. This constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  ///
  /// The argument is the [key], which must not be null.
24
  const MergeableMaterialItem(this.key) : assert(key != null);
25 26 27 28 29 30

  /// The key for this item of the list.
  ///
  /// The key is used to match parts of the mergeable material from frame to
  /// frame so that state is maintained appropriately even as slices are added
  /// or removed.
31 32 33 34 35 36 37 38 39 40
  final LocalKey key;
}

/// A class that can be used as a child to [MergeableMaterial]. It is a slice
/// of [Material] that animates merging with other slices.
///
/// All [MaterialSlice] objects need a [LocalKey].
class MaterialSlice extends MergeableMaterialItem {
  /// Creates a slice of [Material] that's mergeable within a
  /// [MergeableMaterial].
41
  const MaterialSlice({
42
    @required LocalKey key,
43
    @required this.child,
44 45
  }) : assert(key != null),
       super(key);
46 47

  /// The contents of this slice.
48 49
  ///
  /// {@macro flutter.widgets.child}
50 51 52 53 54 55 56 57 58 59 60 61 62
  final Widget child;

  @override
  String toString() {
    return 'MergeableSlice(key: $key, child: $child)';
  }
}

/// A class that represents a gap within [MergeableMaterial].
///
/// All [MaterialGap] objects need a [LocalKey].
class MaterialGap extends MergeableMaterialItem {
  /// Creates a Material gap with a given size.
63
  const MaterialGap({
64
    @required LocalKey key,
65
    this.size = 16.0,
66 67
  }) : assert(key != null),
       super(key);
68

69
  /// The main axis extent of this gap. For example, if the [MergeableMaterial]
70 71 72 73 74 75 76 77 78 79 80 81
  /// is vertical, then this is the height of the gap.
  final double size;

  @override
  String toString() {
    return 'MaterialGap(key: $key, child: $size)';
  }
}

/// Displays a list of [MergeableMaterialItem] children. The list contains
/// [MaterialSlice] items whose boundaries are either "merged" with adjacent
/// items or separated by a [MaterialGap]. The [children] are distributed along
82
/// the given [mainAxis] in the same way as the children of a [ListBody]. When
83 84 85 86 87 88 89 90 91 92 93 94
/// the list of children changes, gaps are automatically animated open or closed
/// as needed.
///
/// To enable this widget to correlate its list of children with the previous
/// one, each child must specify a key.
///
/// When a new gap is added to the list of children the adjacent items are
/// animated apart. Similarly when a gap is removed the adjacent items are
/// brought back together.
///
/// When a new slice is added or removed, the app is responsible for animating
/// the transition of the slices, while the gaps will be animated automatically.
95 96 97 98 99
///
/// See also:
///
///  * [Card], a piece of material that does not support splitting and merging
///    but otherwise looks the same.
100 101
class MergeableMaterial extends StatefulWidget {
  /// Creates a mergeable Material list of items.
102
  const MergeableMaterial({
103
    Key key,
104 105 106
    this.mainAxis = Axis.vertical,
    this.elevation = 2,
    this.hasDividers = false,
107
    this.children = const <MergeableMaterialItem>[],
108 109 110 111 112 113 114 115
  }) : super(key: key);

  /// The children of the [MergeableMaterial].
  final List<MergeableMaterialItem> children;

  /// The main layout axis.
  final Axis mainAxis;

116 117 118 119 120
  /// The z-coordinate at which to place all the [Material] slices.
  ///
  /// The following elevations have defined shadows: 1, 2, 3, 4, 6, 8, 9, 12, 16, 24
  ///
  /// Defaults to 2, the appropriate elevation for cards.
121 122
  final int elevation;

123 124 125
  /// Whether connected pieces of [MaterialSlice] have dividers between them.
  final bool hasDividers;

126
  @override
127 128
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
129 130
    properties.add(EnumProperty<Axis>('mainAxis', mainAxis));
    properties.add(DoubleProperty('elevation', elevation.toDouble()));
131 132 133
  }

  @override
134
  _MergeableMaterialState createState() => _MergeableMaterialState();
135 136 137 138 139 140 141 142
}

class _AnimationTuple {
  _AnimationTuple({
    this.controller,
    this.startAnimation,
    this.endAnimation,
    this.gapAnimation,
143
    this.gapStart = 0.0,
144 145 146 147 148 149 150 151 152
  });

  final AnimationController controller;
  final CurvedAnimation startAnimation;
  final CurvedAnimation endAnimation;
  final CurvedAnimation gapAnimation;
  double gapStart;
}

153
class _MergeableMaterialState extends State<MergeableMaterial> with TickerProviderStateMixin {
154 155
  List<MergeableMaterialItem> _children;
  final Map<LocalKey, _AnimationTuple> _animationTuples =
156
      <LocalKey, _AnimationTuple>{};
157 158 159 160

  @override
  void initState() {
    super.initState();
161
    _children = List<MergeableMaterialItem>.from(widget.children);
162 163 164 165 166 167 168 169 170 171 172

    for (int i = 0; i < _children.length; i += 1) {
      if (_children[i] is MaterialGap) {
        _initGap(_children[i]);
        _animationTuples[_children[i].key].controller.value = 1.0; // Gaps are initially full-sized.
      }
    }
    assert(_debugGapsAreValid(_children));
  }

  void _initGap(MaterialGap gap) {
173
    final AnimationController controller = AnimationController(
174 175
      duration: kThemeAnimationDuration,
      vsync: this,
176 177
    );

178
    final CurvedAnimation startAnimation = CurvedAnimation(
179
      parent: controller,
180
      curve: Curves.fastOutSlowIn,
181
    );
182
    final CurvedAnimation endAnimation = CurvedAnimation(
183
      parent: controller,
184
      curve: Curves.fastOutSlowIn,
185
    );
186
    final CurvedAnimation gapAnimation = CurvedAnimation(
187
      parent: controller,
188
      curve: Curves.fastOutSlowIn,
189 190
    );

191
    controller.addListener(_handleTick);
192

193
    _animationTuples[gap.key] = _AnimationTuple(
194 195 196
      controller: controller,
      startAnimation: startAnimation,
      endAnimation: endAnimation,
197
      gapAnimation: gapAnimation,
198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216
    );
  }

  @override
  void dispose() {
    for (MergeableMaterialItem child in _children) {
      if (child is MaterialGap)
        _animationTuples[child.key].controller.dispose();
    }
    super.dispose();
  }

  void _handleTick() {
    setState(() {
      // The animation's state is our build state, and it changed already.
    });
  }

  bool _debugHasConsecutiveGaps(List<MergeableMaterialItem> children) {
217 218 219
    for (int i = 0; i < widget.children.length - 1; i += 1) {
      if (widget.children[i] is MaterialGap &&
          widget.children[i + 1] is MaterialGap)
220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246
        return true;
    }
    return false;
  }

  bool _debugGapsAreValid(List<MergeableMaterialItem> children) {
    // Check for consecutive gaps.
    if (_debugHasConsecutiveGaps(children))
      return false;

    // First and last children must not be gaps.
    if (children.isNotEmpty) {
      if (children.first is MaterialGap || children.last is MaterialGap)
        return false;
    }

    return true;
  }

  void _insertChild(int index, MergeableMaterialItem child) {
    _children.insert(index, child);

    if (child is MaterialGap)
      _initGap(child);
  }

  void _removeChild(int index) {
247
    final MergeableMaterialItem child = _children.removeAt(index);
248 249 250 251 252

    if (child is MaterialGap)
      _animationTuples[child.key] = null;
  }

253
  bool _isClosingGap(int index) {
254 255 256 257 258 259 260 261
    if (index < _children.length - 1 && _children[index] is MaterialGap) {
      return _animationTuples[_children[index].key].controller.status ==
          AnimationStatus.reverse;
    }

    return false;
  }

262 263 264 265 266 267 268 269 270 271 272 273 274 275 276
  void _removeEmptyGaps() {
    int j = 0;

    while (j < _children.length) {
      if (
        _children[j] is MaterialGap &&
        _animationTuples[_children[j].key].controller.status == AnimationStatus.dismissed
      ) {
        _removeChild(j);
      } else {
        j += 1;
      }
    }
  }

277
  @override
278 279
  void didUpdateWidget(MergeableMaterial oldWidget) {
    super.didUpdateWidget(oldWidget);
280

281
    final Set<LocalKey> oldKeys = oldWidget.children.map<LocalKey>(
282 283
      (MergeableMaterialItem child) => child.key
    ).toSet();
284
    final Set<LocalKey> newKeys = widget.children.map<LocalKey>(
285 286 287 288 289
      (MergeableMaterialItem child) => child.key
    ).toSet();
    final Set<LocalKey> newOnly = newKeys.difference(oldKeys);
    final Set<LocalKey> oldOnly = oldKeys.difference(newKeys);

290
    final List<MergeableMaterialItem> newChildren = widget.children;
291 292 293 294 295
    int i = 0;
    int j = 0;

    assert(_debugGapsAreValid(newChildren));

296
    _removeEmptyGaps();
297 298 299 300 301 302 303 304 305 306 307 308

    while (i < newChildren.length && j < _children.length) {
      if (newOnly.contains(newChildren[i].key) ||
          oldOnly.contains(_children[j].key)) {
        final int startNew = i;
        final int startOld = j;

        // Skip new keys.
        while (newOnly.contains(newChildren[i].key))
          i += 1;

        // Skip old keys.
309
        while (oldOnly.contains(_children[j].key) || _isClosingGap(j))
310 311 312 313 314 315 316 317 318 319 320 321 322 323
          j += 1;

        final int newLength = i - startNew;
        final int oldLength = j - startOld;

        if (newLength > 0) {
          if (oldLength > 1 ||
              oldLength == 1 && _children[startOld] is MaterialSlice) {
            if (newLength == 1 && newChildren[startNew] is MaterialGap) {
              // Shrink all gaps into the size of the new one.
              double gapSizeSum = 0.0;

              while (startOld < j) {
                if (_children[startOld] is MaterialGap) {
324
                  final MaterialGap gap = _children[startOld];
325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364
                  gapSizeSum += gap.size;
                }

                _removeChild(startOld);
                j -= 1;
              }

              _insertChild(startOld, newChildren[startNew]);
              _animationTuples[newChildren[startNew].key]
                ..gapStart = gapSizeSum
                ..controller.forward();

              j += 1;
            } else {
              // No animation if replaced items are more than one.
              for (int k = 0; k < oldLength; k += 1)
                _removeChild(startOld);
              for (int k = 0; k < newLength; k += 1)
                _insertChild(startOld + k, newChildren[startNew + k]);

              j += newLength - oldLength;
            }
          } else if (oldLength == 1) {
            if (newLength == 1 && newChildren[startNew] is MaterialGap &&
                _children[startOld].key == newChildren[startNew].key) {
              /// Special case: gap added back.
              _animationTuples[newChildren[startNew].key].controller.forward();
            } else {
              final double gapSize = _getGapSize(startOld);

              _removeChild(startOld);

              for (int k = 0; k < newLength; k += 1)
                _insertChild(startOld + k, newChildren[startNew + k]);

              j += newLength - 1;
              double gapSizeSum = 0.0;

              for (int k = startNew; k < i; k += 1) {
                if (newChildren[k] is MaterialGap) {
365
                  final MaterialGap gap = newChildren[k];
366 367 368 369 370 371 372 373
                  gapSizeSum += gap.size;
                }
              }

              // All gaps get proportional sizes of the original gap and they will
              // animate to their actual size.
              for (int k = startNew; k < i; k += 1) {
                if (newChildren[k] is MaterialGap) {
374
                  final MaterialGap gap = newChildren[k];
375 376 377 378 379 380 381 382 383 384 385 386 387 388 389

                  _animationTuples[gap.key].gapStart = gapSize * gap.size /
                      gapSizeSum;
                  _animationTuples[gap.key].controller
                    ..value = 0.0
                    ..forward();
                }
              }
            }
          } else {
            // Grow gaps.
            for (int k = 0; k < newLength; k += 1) {
              _insertChild(startOld + k, newChildren[startNew + k]);

              if (newChildren[startNew + k] is MaterialGap) {
390
                final MaterialGap gap = newChildren[startNew + k];
391 392 393 394 395 396 397 398 399 400 401 402 403 404
                _animationTuples[gap.key].controller.forward();
              }
            }

            j += newLength;
          }
        } else {
          // If more than a gap disappeared, just remove slices and shrink gaps.
          if (oldLength > 1 ||
              oldLength == 1 && _children[startOld] is MaterialSlice) {
            double gapSizeSum = 0.0;

            while (startOld < j) {
              if (_children[startOld] is MaterialGap) {
405
                final MaterialGap gap = _children[startOld];
406 407 408 409 410 411 412 413
                gapSizeSum += gap.size;
              }

              _removeChild(startOld);
              j -= 1;
            }

            if (gapSizeSum != 0.0) {
414 415
              final MaterialGap gap = MaterialGap(
                key: UniqueKey(),
416
                size: gapSizeSum,
417 418 419 420 421 422 423 424 425 426 427
              );
              _insertChild(startOld, gap);
              _animationTuples[gap.key].gapStart = 0.0;
              _animationTuples[gap.key].controller
                ..value = 1.0
                ..reverse();

              j += 1;
            }
          } else if (oldLength == 1) {
            // Shrink gap.
428
            final MaterialGap gap = _children[startOld];
429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460
            _animationTuples[gap.key].gapStart = 0.0;
            _animationTuples[gap.key].controller.reverse();
          }
        }
      } else {
        // Check whether the items are the same type. If they are, it means that
        // their places have been swaped.
        if ((_children[j] is MaterialGap) == (newChildren[i] is MaterialGap)) {
          _children[j] = newChildren[i];

          i += 1;
          j += 1;
        } else {
          // This is a closing gap which we need to skip.
          assert(_children[j] is MaterialGap);
          j += 1;
        }
      }
    }

    // Handle remaining items.
    while (j < _children.length)
      _removeChild(j);
    while (i < newChildren.length) {
      _insertChild(j, newChildren[i]);

      i += 1;
      j += 1;
    }
  }

  BorderRadius _borderRadius(int index, bool start, bool end) {
461 462 463
    assert(kMaterialEdges[MaterialType.card].topLeft == kMaterialEdges[MaterialType.card].topRight);
    assert(kMaterialEdges[MaterialType.card].topLeft == kMaterialEdges[MaterialType.card].bottomLeft);
    assert(kMaterialEdges[MaterialType.card].topLeft == kMaterialEdges[MaterialType.card].bottomRight);
464 465 466 467 468 469 470 471 472
    final Radius cardRadius = kMaterialEdges[MaterialType.card].topLeft;

    Radius startRadius = Radius.zero;
    Radius endRadius = Radius.zero;

    if (index > 0 && _children[index - 1] is MaterialGap) {
      startRadius = Radius.lerp(
        Radius.zero,
        cardRadius,
473
        _animationTuples[_children[index - 1].key].startAnimation.value,
474 475 476 477 478 479
      );
    }
    if (index < _children.length - 2 && _children[index + 1] is MaterialGap) {
      endRadius = Radius.lerp(
        Radius.zero,
        cardRadius,
480
        _animationTuples[_children[index + 1].key].endAnimation.value,
481 482 483
      );
    }

484
    if (widget.mainAxis == Axis.vertical) {
485
      return BorderRadius.vertical(
486
        top: start ? cardRadius : startRadius,
487
        bottom: end ? cardRadius : endRadius,
488 489
      );
    } else {
490
      return BorderRadius.horizontal(
491
        left: start ? cardRadius : startRadius,
492
        right: end ? cardRadius : endRadius,
493 494 495 496 497
      );
    }
  }

  double _getGapSize(int index) {
498
    final MaterialGap gap = _children[index];
499 500 501 502

    return lerpDouble(
      _animationTuples[gap.key].gapStart,
      gap.size,
503
      _animationTuples[gap.key].gapAnimation.value,
504 505 506
    );
  }

507 508 509 510 511 512
  bool _willNeedDivider(int index) {
    if (index < 0)
      return false;
    if (index >= _children.length)
      return false;
    return _children[index] is MaterialSlice || _isClosingGap(index);
513 514
  }

515 516
  @override
  Widget build(BuildContext context) {
517 518
    _removeEmptyGaps();

519 520 521 522 523 524 525 526
    final List<Widget> widgets = <Widget>[];
    List<Widget> slices = <Widget>[];
    int i;

    for (i = 0; i < _children.length; i += 1) {
      if (_children[i] is MaterialGap) {
        assert(slices.isNotEmpty);
        widgets.add(
527 528
          Container(
            decoration: BoxDecoration(
529
              color: Theme.of(context).cardColor,
530
              borderRadius: _borderRadius(i - 1, widgets.isEmpty, false),
531
              shape: BoxShape.rectangle,
532
            ),
533
            child: ListBody(
534
              mainAxis: widget.mainAxis,
535 536
              children: slices,
            ),
537 538 539 540 541
          )
        );
        slices = <Widget>[];

        widgets.add(
542
          SizedBox(
543
            width: widget.mainAxis == Axis.horizontal ? _getGapSize(i) : null,
544
            height: widget.mainAxis == Axis.vertical ? _getGapSize(i) : null,
545 546 547
          )
        );
      } else {
548
        final MaterialSlice slice = _children[i];
549 550
        Widget child = slice.child;

551
        if (widget.hasDividers) {
552 553 554 555
          final bool hasTopDivider = _willNeedDivider(i - 1);
          final bool hasBottomDivider = _willNeedDivider(i + 1);

          Border border;
556 557 558
          final BorderSide divider = Divider.createBorderSide(
            context,
            width: 0.5, // TODO(ianh): This probably looks terrible when the dpr isn't a power of two.
559 560 561
          );

          if (i == 0) {
562
            border = Border(
563 564 565
              bottom: hasBottomDivider ? divider : BorderSide.none
            );
          } else if (i == _children.length - 1) {
566
            border = Border(
567 568 569
              top: hasTopDivider ? divider : BorderSide.none
            );
          } else {
570
            border = Border(
571
              top: hasTopDivider ? divider : BorderSide.none,
572
              bottom: hasBottomDivider ? divider : BorderSide.none,
573 574 575 576 577
            );
          }

          assert(border != null);

578 579 580
          child = AnimatedContainer(
            key: _MergeableMaterialSliceKey(_children[i].key),
            decoration: BoxDecoration(border: border),
581 582
            duration: kThemeAnimationDuration,
            curve: Curves.fastOutSlowIn,
583
            child: child,
584 585
          );
        }
586 587

        slices.add(
588
          Material(
589
            type: MaterialType.transparency,
590
            child: child,
591 592 593 594 595 596 597
          )
        );
      }
    }

    if (slices.isNotEmpty) {
      widgets.add(
598 599
        Container(
          decoration: BoxDecoration(
600
            color: Theme.of(context).cardColor,
601
            borderRadius: _borderRadius(i - 1, widgets.isEmpty, true),
602
            shape: BoxShape.rectangle,
603
          ),
604
          child: ListBody(
605
            mainAxis: widget.mainAxis,
606 607
            children: slices,
          ),
608 609 610 611 612
        )
      );
      slices = <Widget>[];
    }

613
    return _MergeableMaterialListBody(
614 615
      mainAxis: widget.mainAxis,
      boxShadows: kElevationToShadow[widget.elevation],
616
      items: _children,
617
      children: widgets,
618 619 620 621
    );
  }
}

622
// The parent hierarchy can change and lead to the slice being
623
// rebuilt. Using a global key solves the issue.
624
class _MergeableMaterialSliceKey extends GlobalKey {
625
  const _MergeableMaterialSliceKey(this.value) : super.constructor();
626 627 628 629 630 631 632 633 634 635 636 637 638

  final LocalKey value;

  @override
  bool operator ==(dynamic other) {
    if (other is! _MergeableMaterialSliceKey)
      return false;
    final _MergeableMaterialSliceKey typedOther = other;
    return value == typedOther.value;
  }

  @override
  int get hashCode => value.hashCode;
639 640 641 642 643

  @override
  String toString() {
    return '_MergeableMaterialSliceKey($value)';
  }
644 645
}

646 647
class _MergeableMaterialListBody extends ListBody {
  _MergeableMaterialListBody({
648
    List<Widget> children,
649
    Axis mainAxis = Axis.vertical,
650
    this.items,
651
    this.boxShadows,
652 653
  }) : super(children: children, mainAxis: mainAxis);

654 655
  final List<MergeableMaterialItem> items;
  final List<BoxShadow> boxShadows;
656

657 658 659 660
  AxisDirection _getDirection(BuildContext context) {
    return getAxisDirectionFromAxisReverseAndDirectionality(context, mainAxis, false);
  }

661
  @override
662
  RenderListBody createRenderObject(BuildContext context) {
663
    return _RenderMergeableMaterialListBody(
664 665
      axisDirection: _getDirection(context),
      boxShadows: boxShadows,
666 667 668 669
    );
  }

  @override
670 671 672
  void updateRenderObject(BuildContext context, RenderListBody renderObject) {
    final _RenderMergeableMaterialListBody materialRenderListBody = renderObject;
    materialRenderListBody
673
      ..axisDirection = _getDirection(context)
674 675 676 677
      ..boxShadows = boxShadows;
  }
}

678 679
class _RenderMergeableMaterialListBody extends RenderListBody {
  _RenderMergeableMaterialListBody({
680
    List<RenderBox> children,
681
    AxisDirection axisDirection = AxisDirection.down,
682
    this.boxShadows,
683
  }) : super(children: children, axisDirection: axisDirection);
684 685 686 687 688

  List<BoxShadow> boxShadows;

  void _paintShadows(Canvas canvas, Rect rect) {
    for (BoxShadow boxShadow in boxShadows) {
689
      final Paint paint = boxShadow.toPaint();
690 691 692 693 694 695 696 697 698 699 700 701 702 703 704
      // TODO(dragostis): Right now, we are only interpolating the border radii
      // of the visible Material slices, not the shadows; they are not getting
      // interpolated and always have the same rounded radii. Once shadow
      // performance is better, shadows should be redrawn every single time the
      // slices' radii get interpolated and use those radii not the defaults.
      canvas.drawRRect(kMaterialEdges[MaterialType.card].toRRect(rect), paint);
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    RenderBox child = firstChild;
    int i = 0;

    while (child != null) {
705
      final ListBodyParentData childParentData = child.parentData;
706 707 708 709 710 711 712 713 714 715 716
      final Rect rect = (childParentData.offset + offset) & child.size;
      if (i % 2 == 0)
        _paintShadows(context.canvas, rect);
      child = childParentData.nextSibling;

      i += 1;
    }

    defaultPaint(context, offset);
  }
}