animated_cross_fade.dart 13.9 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4 5 6 7 8 9
// 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
// Examples can assume:
14
// bool _first = false;
15

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 snippet}
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
/// A widget that cross-fades between two given children and animates itself
/// between their sizes.
///
69 70
/// {@youtube 560 315 https://www.youtube.com/watch?v=PGK2UUAyE54}
///
71 72
/// The animation is controlled through the [crossFadeState] parameter.
/// [firstCurve] and [secondCurve] represent the opacity curves of the two
73 74
/// 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
75 76
/// animate between the size of the fading-out child and the size of the
/// fading-in child.
77 78 79 80 81
///
/// 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.
82
///
83 84 85 86
/// The animation is automatically triggered when an existing
/// [AnimatedCrossFade] is rebuilt with a different value for the
/// [crossFadeState] property.
///
87
/// {@tool snippet}
88 89
///
/// This code fades between two representations of the Flutter logo. It depends
90
/// on a boolean field `_first`; when `_first` is true, the first logo is shown,
91 92 93
/// 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.
94 95
///
/// ```dart
96
/// AnimatedCrossFade(
97 98 99
///   duration: const Duration(seconds: 3),
///   firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
///   secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
100
///   crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
101 102
/// )
/// ```
103
/// {@end-tool}
104 105 106
///
/// See also:
///
Ian Hickson's avatar
Ian Hickson committed
107 108 109
///  * [AnimatedOpacity], which fades between nothing and a single child.
///  * [AnimatedSwitcher], which switches out a child for a new one with a
///    customizable transition, supporting multiple cross-fades at once.
110 111
///  * [AnimatedSize], the lower-level widget which [AnimatedCrossFade] uses to
///    automatically change size.
112
class AnimatedCrossFade extends StatefulWidget {
113
  /// Creates a cross-fade animation widget.
114 115 116 117
  ///
  /// 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.
118 119
  ///
  /// All the arguments other than [key] must be non-null.
120
  const AnimatedCrossFade({
121 122 123
    Key? key,
    required this.firstChild,
    required this.secondChild,
124 125 126 127
    this.firstCurve = Curves.linear,
    this.secondCurve = Curves.linear,
    this.sizeCurve = Curves.linear,
    this.alignment = Alignment.topCenter,
128 129
    required this.crossFadeState,
    required this.duration,
130
    this.reverseDuration,
131
    this.layoutBuilder = defaultLayoutBuilder,
132 133 134
  }) : assert(firstChild != null),
       assert(secondChild != null),
       assert(firstCurve != null),
135 136
       assert(secondCurve != null),
       assert(sizeCurve != null),
137 138 139 140
       assert(alignment != null),
       assert(crossFadeState != null),
       assert(duration != null),
       assert(layoutBuilder != null),
141
       super(key: key);
142

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

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

155
  /// The child that will be shown when the animation has completed.
156 157 158 159 160
  final CrossFadeState crossFadeState;

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

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

166
  /// The fade curve of the first child.
167 168
  ///
  /// Defaults to [Curves.linear].
169 170 171
  final Curve firstCurve;

  /// The fade curve of the second child.
172 173
  ///
  /// Defaults to [Curves.linear].
174 175 176
  final Curve secondCurve;

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

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

193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217
  /// 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) {
218
    return Stack(
219
      clipBehavior: Clip.none,
220
      children: <Widget>[
221
        Positioned(
222 223 224 225 226 227
          key: bottomChildKey,
          left: 0.0,
          top: 0.0,
          right: 0.0,
          child: bottomChild,
        ),
228
        Positioned(
229 230
          key: topChildKey,
          child: topChild,
231
        ),
232 233 234 235
      ],
    );
  }

236
  @override
237
  _AnimatedCrossFadeState createState() => _AnimatedCrossFadeState();
238 239

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

249
class _AnimatedCrossFadeState extends State<AnimatedCrossFade> with TickerProviderStateMixin {
250 251 252
  AnimationController? _controller;
  late Animation<double> _firstAnimation;
  late Animation<double> _secondAnimation;
253

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

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

  @override
  void dispose() {
283
    _controller!.dispose();
284 285 286 287
    super.dispose();
  }

  @override
288 289 290
  void didUpdateWidget(AnimatedCrossFade oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration)
291
      _controller!.duration = widget.duration;
292
    if (widget.reverseDuration != oldWidget.reverseDuration)
293
      _controller!.reverseDuration = widget.reverseDuration;
294 295 296 297 298 299
    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) {
300
        case CrossFadeState.showFirst:
301
          _controller!.reverse();
302 303
          break;
        case CrossFadeState.showSecond:
304
          _controller!.forward();
305 306 307 308 309
          break;
      }
    }
  }

310
  /// Whether we're in the middle of cross-fading this frame.
311
  bool get _isTransitioning => _controller!.status == AnimationStatus.forward || _controller!.status == AnimationStatus.reverse;
312

313 314
  @override
  Widget build(BuildContext context) {
315 316
    const Key kFirstChildKey = ValueKey<CrossFadeState>(CrossFadeState.showFirst);
    const Key kSecondChildKey = ValueKey<CrossFadeState>(CrossFadeState.showSecond);
317 318
    final bool transitioningForwards = _controller!.status == AnimationStatus.completed ||
                                       _controller!.status == AnimationStatus.forward;
319
    final Key topKey;
320
    Widget topChild;
321 322
    final Animation<double> topAnimation;
    final Key bottomKey;
323
    Widget bottomChild;
324
    final Animation<double> bottomAnimation;
325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340
    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;
    }

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

  @override
376
  void debugFillProperties(DiagnosticPropertiesBuilder description) {
377
    super.debugFillProperties(description);
378 379 380
    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));
381
  }
382
}