animated_cross_fade.dart 13.7 KB
Newer Older
1 2 3 4 5 6 7 8 9
// 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 'package:flutter/rendering.dart';

import 'animated_size.dart';
import 'basic.dart';
import 'framework.dart';
10
import 'ticker_provider.dart';
11 12
import 'transitions.dart';

13 14 15
// Examples can assume:
// bool _first;

16
/// Specifies which of two children to show. See [AnimatedCrossFade].
17 18 19
///
/// The child that is shown will fade in, while the other will fade out.
enum CrossFadeState {
20 21
  /// Show the first child ([AnimatedCrossFade.firstChild]) and hide the second
  /// ([AnimatedCrossFade.secondChild]]).
22
  showFirst,
23

24 25 26
  /// Show the second child ([AnimatedCrossFade.secondChild]) and hide the first
  /// ([AnimatedCrossFade.firstChild]).
  showSecond,
27 28
}

29 30 31 32 33 34 35 36 37 38 39 40
/// Signature for the [AnimatedCrossFade.layoutBuilder] callback.
///
/// The `topChild` is the child fading in, which is normally drawn on top. The
/// `bottomChild` is the child fading out, normally drawn on the bottom.
///
/// For good performance, the returned widget tree should contain both the
/// `topChild` and the `bottomChild`; the depth of the tree, and the types of
/// the widgets in the tree, from the returned widget to each of the children
/// should be the same; and where there is a widget with multiple children, the
/// top child and the bottom child should be keyed using the provided
/// `topChildKey` and `bottomChildKey` keys respectively.
///
41
/// {@tool sample}
42 43 44
///
/// ```dart
/// Widget defaultLayoutBuilder(Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
45
///   return Stack(
46 47
///     fit: StackFit.loose,
///     children: <Widget>[
48
///       Positioned(
49 50 51 52 53 54
///         key: bottomChildKey,
///         left: 0.0,
///         top: 0.0,
///         right: 0.0,
///         child: bottomChild,
///       ),
55
///       Positioned(
56 57 58 59 60 61 62
///         key: topChildKey,
///         child: topChild,
///       )
///     ],
///   );
/// }
/// ```
63
/// {@end-tool}
64
typedef AnimatedCrossFadeBuilder = Widget Function(Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey);
65

66 67 68 69 70
/// A widget that cross-fades between two given children and animates itself
/// between their sizes.
///
/// The animation is controlled through the [crossFadeState] parameter.
/// [firstCurve] and [secondCurve] represent the opacity curves of the two
71 72
/// children. The [firstCurve] is inverted, i.e. it fades out when providing a
/// growing curve like [Curves.linear]. The [sizeCurve] is the curve used to
73 74
/// animate between the size of the fading-out child and the size of the
/// fading-in child.
75 76 77 78 79
///
/// This widget is intended to be used to fade a pair of widgets with the same
/// width. In the case where the two children have different heights, the
/// animation crops overflowing children during the animation by aligning their
/// top edge, which means that the bottom will be clipped.
80
///
81 82 83 84
/// The animation is automatically triggered when an existing
/// [AnimatedCrossFade] is rebuilt with a different value for the
/// [crossFadeState] property.
///
85
/// {@tool sample}
86 87
///
/// This code fades between two representations of the Flutter logo. It depends
88
/// on a boolean field `_first`; when `_first` is true, the first logo is shown,
89 90 91
/// otherwise the second logo is shown. When the field changes state, the
/// [AnimatedCrossFade] widget cross-fades between the two forms of the logo
/// over three seconds.
92 93
///
/// ```dart
94
/// AnimatedCrossFade(
95 96 97
///   duration: const Duration(seconds: 3),
///   firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
///   secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
98
///   crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
99 100
/// )
/// ```
101
/// {@end-tool}
102 103 104 105 106
///
/// See also:
///
///  * [AnimatedSize], the lower-level widget which [AnimatedCrossFade] uses to
///    automatically change size.
107
///  * [AnimatedSwitcher], which switches out a child for a new one with a
108
///    customizable transition.
109
class AnimatedCrossFade extends StatefulWidget {
110
  /// Creates a cross-fade animation widget.
111 112 113 114
  ///
  /// The [duration] of the animation is the same for all components (fade in,
  /// fade out, and size), and you can pass [Interval]s instead of [Curve]s in
  /// order to have finer control, e.g., creating an overlap between the fades.
115 116
  ///
  /// All the arguments other than [key] must be non-null.
117
  const AnimatedCrossFade({
118
    Key key,
119 120
    @required this.firstChild,
    @required this.secondChild,
121 122 123 124
    this.firstCurve = Curves.linear,
    this.secondCurve = Curves.linear,
    this.sizeCurve = Curves.linear,
    this.alignment = Alignment.topCenter,
125
    @required this.crossFadeState,
126
    @required this.duration,
127
    this.reverseDuration,
128
    this.layoutBuilder = defaultLayoutBuilder,
129 130 131
  }) : assert(firstChild != null),
       assert(secondChild != null),
       assert(firstCurve != null),
132 133
       assert(secondCurve != null),
       assert(sizeCurve != null),
134 135 136 137
       assert(alignment != null),
       assert(crossFadeState != null),
       assert(duration != null),
       assert(layoutBuilder != null),
138
       super(key: key);
139

Ian Hickson's avatar
Ian Hickson committed
140 141 142
  /// The child that is visible when [crossFadeState] is
  /// [CrossFadeState.showFirst]. It fades out when transitioning
  /// [crossFadeState] from [CrossFadeState.showFirst] to
143
  /// [CrossFadeState.showSecond] and vice versa.
144 145
  final Widget firstChild;

Ian Hickson's avatar
Ian Hickson committed
146 147 148
  /// The child that is visible when [crossFadeState] is
  /// [CrossFadeState.showSecond]. It fades in when transitioning
  /// [crossFadeState] from [CrossFadeState.showFirst] to
149
  /// [CrossFadeState.showSecond] and vice versa.
150 151
  final Widget secondChild;

152
  /// The child that will be shown when the animation has completed.
153 154 155 156 157
  final CrossFadeState crossFadeState;

  /// The duration of the whole orchestrated animation.
  final Duration duration;

158 159 160 161 162
  /// The duration of the whole orchestrated animation when running in reverse.
  ///
  /// If not supplied, this defaults to [duration].
  final Duration reverseDuration;

163
  /// The fade curve of the first child.
164 165
  ///
  /// Defaults to [Curves.linear].
166 167 168
  final Curve firstCurve;

  /// The fade curve of the second child.
169 170
  ///
  /// Defaults to [Curves.linear].
171 172 173
  final Curve secondCurve;

  /// The curve of the animation between the two children's sizes.
174 175
  ///
  /// Defaults to [Curves.linear].
176 177
  final Curve sizeCurve;

178 179
  /// How the children should be aligned while the size is animating.
  ///
180
  /// Defaults to [Alignment.topCenter].
181 182 183 184 185 186 187
  ///
  /// See also:
  ///
  ///  * [Alignment], a class with convenient constants typically used to
  ///    specify an [AlignmentGeometry].
  ///  * [AlignmentDirectional], like [Alignment] for specifying alignments
  ///    relative to text direction.
188
  final AlignmentGeometry alignment;
189

190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
  /// A builder that positions the [firstChild] and [secondChild] widgets.
  ///
  /// The widget returned by this method is wrapped in an [AnimatedSize].
  ///
  /// By default, this uses [AnimatedCrossFade.defaultLayoutBuilder], which uses
  /// a [Stack] and aligns the `bottomChild` to the top of the stack while
  /// providing the `topChild` as the non-positioned child to fill the provided
  /// constraints. This works well when the [AnimatedCrossFade] is in a position
  /// to change size and when the children are not flexible. However, if the
  /// children are less fussy about their sizes (for example a
  /// [CircularProgressIndicator] inside a [Center]), or if the
  /// [AnimatedCrossFade] is being forced to a particular size, then it can
  /// result in the widgets jumping about when the cross-fade state is changed.
  final AnimatedCrossFadeBuilder layoutBuilder;

  /// The default layout algorithm used by [AnimatedCrossFade].
  ///
  /// The top child is placed in a stack that sizes itself to match the top
  /// child. The bottom child is positioned at the top of the same stack, sized
  /// to fit its width but without forcing the height. The stack is then
  /// clipped.
  ///
  /// This is the default value for [layoutBuilder]. It implements
  /// [AnimatedCrossFadeBuilder].
  static Widget defaultLayoutBuilder(Widget topChild, Key topChildKey, Widget bottomChild, Key bottomChildKey) {
215
    return Stack(
216 217
      overflow: Overflow.visible,
      children: <Widget>[
218
        Positioned(
219 220 221 222 223 224
          key: bottomChildKey,
          left: 0.0,
          top: 0.0,
          right: 0.0,
          child: bottomChild,
        ),
225
        Positioned(
226 227
          key: topChildKey,
          child: topChild,
228
        ),
229 230 231 232
      ],
    );
  }

233
  @override
234
  _AnimatedCrossFadeState createState() => _AnimatedCrossFadeState();
235 236

  @override
237 238
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
239 240
    properties.add(EnumProperty<CrossFadeState>('crossFadeState', crossFadeState));
    properties.add(DiagnosticsProperty<AlignmentGeometry>('alignment', alignment, defaultValue: Alignment.topCenter));
241 242
    properties.add(IntProperty('duration', duration.inMilliseconds, unit: 'ms'));
    properties.add(IntProperty('reverseDuration', reverseDuration?.inMilliseconds, unit: 'ms', defaultValue: null));
243
  }
244 245
}

246
class _AnimatedCrossFadeState extends State<AnimatedCrossFade> with TickerProviderStateMixin {
247 248 249 250
  AnimationController _controller;
  Animation<double> _firstAnimation;
  Animation<double> _secondAnimation;

251 252 253
  @override
  void initState() {
    super.initState();
254 255 256 257 258
    _controller = AnimationController(
      duration: widget.duration,
      reverseDuration: widget.reverseDuration,
      vsync: this,
    );
259
    if (widget.crossFadeState == CrossFadeState.showSecond)
260
      _controller.value = 1.0;
261 262
    _firstAnimation = _initAnimation(widget.firstCurve, true);
    _secondAnimation = _initAnimation(widget.secondCurve, false);
263
    _controller.addStatusListener((AnimationStatus status) {
264 265 266 267 268
      setState(() {
        // Trigger a rebuild because it depends on _isTransitioning, which
        // changes its value together with animation status.
      });
    });
269
  }
270

271 272 273 274 275
  Animation<double> _initAnimation(Curve curve, bool inverted) {
    Animation<double> result = _controller.drive(CurveTween(curve: curve));
    if (inverted)
      result = result.drive(Tween<double>(begin: 1.0, end: 0.0));
    return result;
276 277 278 279 280 281 282 283 284
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
285 286 287 288
  void didUpdateWidget(AnimatedCrossFade oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration)
      _controller.duration = widget.duration;
289 290
    if (widget.reverseDuration != oldWidget.reverseDuration)
      _controller.reverseDuration = widget.reverseDuration;
291 292 293 294 295 296
    if (widget.firstCurve != oldWidget.firstCurve)
      _firstAnimation = _initAnimation(widget.firstCurve, true);
    if (widget.secondCurve != oldWidget.secondCurve)
      _secondAnimation = _initAnimation(widget.secondCurve, false);
    if (widget.crossFadeState != oldWidget.crossFadeState) {
      switch (widget.crossFadeState) {
297 298 299 300 301 302 303 304 305 306
        case CrossFadeState.showFirst:
          _controller.reverse();
          break;
        case CrossFadeState.showSecond:
          _controller.forward();
          break;
      }
    }
  }

307 308
  /// Whether we're in the middle of cross-fading this frame.
  bool get _isTransitioning => _controller.status == AnimationStatus.forward || _controller.status == AnimationStatus.reverse;
309

310 311
  @override
  Widget build(BuildContext context) {
312 313
    const Key kFirstChildKey = ValueKey<CrossFadeState>(CrossFadeState.showFirst);
    const Key kSecondChildKey = ValueKey<CrossFadeState>(CrossFadeState.showSecond);
314 315
    final bool transitioningForwards = _controller.status == AnimationStatus.completed ||
                                       _controller.status == AnimationStatus.forward;
316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337
    Key topKey;
    Widget topChild;
    Animation<double> topAnimation;
    Key bottomKey;
    Widget bottomChild;
    Animation<double> bottomAnimation;
    if (transitioningForwards) {
      topKey = kSecondChildKey;
      topChild = widget.secondChild;
      topAnimation = _secondAnimation;
      bottomKey = kFirstChildKey;
      bottomChild = widget.firstChild;
      bottomAnimation = _firstAnimation;
    } else {
      topKey = kFirstChildKey;
      topChild = widget.firstChild;
      topAnimation = _firstAnimation;
      bottomKey = kSecondChildKey;
      bottomChild = widget.secondChild;
      bottomAnimation = _secondAnimation;
    }

338
    bottomChild = TickerMode(
339 340
      key: bottomKey,
      enabled: _isTransitioning,
341
      child: ExcludeSemantics(
342
        excluding: true, // Always exclude the semantics of the widget that's fading out.
343
        child: FadeTransition(
344 345
          opacity: bottomAnimation,
          child: bottomChild,
346
        ),
347
      ),
348
    );
349
    topChild = TickerMode(
350 351
      key: topKey,
      enabled: true, // Top widget always has its animations enabled.
352
      child: ExcludeSemantics(
353
        excluding: false, // Always publish semantics for the widget that's fading in.
354
        child: FadeTransition(
355 356
          opacity: topAnimation,
          child: topChild,
357
        ),
358
      ),
359
    );
360 361
    return ClipRect(
      child: AnimatedSize(
362
        alignment: widget.alignment,
363
        duration: widget.duration,
364
        reverseDuration: widget.reverseDuration,
365
        curve: widget.sizeCurve,
366
        vsync: this,
367
        child: widget.layoutBuilder(topChild, topKey, bottomChild, bottomKey),
368
      ),
369 370
    );
  }
371 372

  @override
373
  void debugFillProperties(DiagnosticPropertiesBuilder description) {
374
    super.debugFillProperties(description);
375 376 377
    description.add(EnumProperty<CrossFadeState>('crossFadeState', widget.crossFadeState));
    description.add(DiagnosticsProperty<AnimationController>('controller', _controller, showName: false));
    description.add(DiagnosticsProperty<AlignmentGeometry>('alignment', widget.alignment, defaultValue: Alignment.topCenter));
378
  }
379
}