animated_switcher.dart 15 KB
Newer Older
Ian Hickson's avatar
Ian Hickson committed
1
// Copyright 2014 The Flutter Authors. All rights reserved.
2 3 4
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/foundation.dart';
6 7 8 9 10 11

import 'basic.dart';
import 'framework.dart';
import 'ticker_provider.dart';
import 'transitions.dart';

12
// Internal representation of a child that, now or in the past, was set on the
13
// AnimatedSwitcher.child field, but is now in the process of
14 15
// transitioning. The internal representation includes fields that we don't want
// to expose to the public API (like the controller).
16 17
class _ChildEntry {
  _ChildEntry({
18 19 20 21
    required this.controller,
    required this.animation,
    required this.transition,
    required this.widgetChild,
22
  });
23

24 25 26 27
  // The animation controller for the child's transition.
  final AnimationController controller;

  // The (curved) animation being used to drive the transition.
28 29 30 31
  final Animation<double> animation;

  // The currently built transition for this child.
  Widget transition;
32

33
  // The widget's child at the time this entry was created or updated.
34
  // Used to rebuild the transition if necessary.
35
  Widget widgetChild;
36 37 38

  @override
  String toString() => 'Entry#${shortHash(this)}($widgetChild)';
39 40
}

41
/// Signature for builders used to generate custom transitions for
42
/// [AnimatedSwitcher].
43
///
44
/// The `child` should be transitioning in when the `animation` is running in
45 46
/// the forward direction.
///
47 48
/// The function should return a widget which wraps the given `child`. It may
/// also use the `animation` to inform its transition. It must not return null.
49
typedef AnimatedSwitcherTransitionBuilder = Widget Function(Widget child, Animation<double> animation);
50 51

/// Signature for builders used to generate custom layouts for
52
/// [AnimatedSwitcher].
53
///
54 55 56 57 58 59 60
/// The builder should return a widget which contains the given children, laid
/// out as desired. It must not return null. The builder should be able to
/// handle an empty list of `previousChildren`, or a null `currentChild`.
///
/// The `previousChildren` list is an unmodifiable list, sorted with the oldest
/// at the beginning and the newest at the end. It does not include the
/// `currentChild`.
61
typedef AnimatedSwitcherLayoutBuilder = Widget Function(Widget? currentChild, List<Widget> previousChildren);
62

Ian Hickson's avatar
Ian Hickson committed
63 64
/// A widget that by default does a cross-fade between a new widget and the
/// widget previously set on the [AnimatedSwitcher] as a child.
65
///
66 67
/// {@youtube 560 315 https://www.youtube.com/watch?v=2W7POjFb88g}
///
68 69 70 71
/// If they are swapped fast enough (i.e. before [duration] elapses), more than
/// one previous child can exist and be transitioning out while the newest one
/// is transitioning in.
///
72 73
/// If the "new" child is the same widget type and key as the "old" child, but
/// with different parameters, then [AnimatedSwitcher] will *not* do a
74
/// transition between them, since as far as the framework is concerned, they
75 76 77 78 79 80 81 82 83 84 85
/// are the same widget and the existing widget can be updated with the new
/// parameters. To force the transition to occur, set a [Key] on each child
/// widget that you wish to be considered unique (typically a [ValueKey] on the
/// widget data that distinguishes this child from the others).
///
/// The same key can be used for a new child as was used for an already-outgoing
/// child; the two will not be considered related. (For example, if a progress
/// indicator with key A is first shown, then an image with key B, then another
/// progress indicator with key A again, all in rapid succession, then the old
/// progress indicator and the image will be fading out while a new progress
/// indicator is fading in.)
86
///
87 88
/// The type of transition can be changed from a cross-fade to a custom
/// transition by setting the [transitionBuilder].
89
///
90
/// {@tool dartpad}
91 92
/// This sample shows a counter that animates the scale of a text widget
/// whenever the value changes.
93
///
94
/// ** See code in examples/api/lib/widgets/animated_switcher/animated_switcher.0.dart **
95
/// {@end-tool}
96 97 98 99 100
///
/// See also:
///
///  * [AnimatedCrossFade], which only fades between two children, but also
///    interpolates their sizes, and is reversible.
Ian Hickson's avatar
Ian Hickson committed
101 102 103
///  * [AnimatedOpacity], which can be used to switch between nothingness and
///    a given child by fading the child in and out.
///  * [FadeTransition], which [AnimatedSwitcher] uses to perform the transition.
104 105
class AnimatedSwitcher extends StatefulWidget {
  /// Creates an [AnimatedSwitcher].
106 107 108
  ///
  /// The [duration], [transitionBuilder], [layoutBuilder], [switchInCurve], and
  /// [switchOutCurve] parameters must not be null.
109
  const AnimatedSwitcher({
110
    super.key,
111
    this.child,
112
    required this.duration,
113
    this.reverseDuration,
114 115 116 117
    this.switchInCurve = Curves.linear,
    this.switchOutCurve = Curves.linear,
    this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder,
    this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder,
118
  });
119

120 121 122 123 124 125
  /// The current child widget to display. If there was a previous child, then
  /// that child will be faded out using the [switchOutCurve], while the new
  /// child is faded in with the [switchInCurve], over the [duration].
  ///
  /// If there was no previous child, then this child will fade in using the
  /// [switchInCurve] over the [duration].
126
  ///
127 128 129 130
  /// The child is considered to be "new" if it has a different type or [Key]
  /// (see [Widget.canUpdate]).
  ///
  /// To change the kind of transition used, see [transitionBuilder].
131
  final Widget? child;
132

133
  /// The duration of the transition from the old [child] value to the new one.
134 135
  ///
  /// This duration is applied to the given [child] when that property is set to
136 137 138
  /// a new child. The same duration is used when fading out, unless
  /// [reverseDuration] is set. Changing [duration] will not affect the
  /// durations of transitions already in progress.
139 140
  final Duration duration;

141 142 143 144 145 146 147
  /// The duration of the transition from the new [child] value to the old one.
  ///
  /// This duration is applied to the given [child] when that property is set to
  /// a new child. Changing [reverseDuration] will not affect the durations of
  /// transitions already in progress.
  ///
  /// If not set, then the value of [duration] is used by default.
148
  final Duration? reverseDuration;
149

150 151 152 153 154 155 156 157 158 159
  /// The animation curve to use when transitioning in a new [child].
  ///
  /// This curve is applied to the given [child] when that property is set to a
  /// new child. Changing [switchInCurve] will not affect the curve of a
  /// transition already in progress.
  ///
  /// The [switchOutCurve] is used when fading out, except that if [child] is
  /// changed while the current child is in the middle of fading in,
  /// [switchInCurve] will be run in reverse from that point instead of jumping
  /// to the corresponding point on [switchOutCurve].
160 161
  final Curve switchInCurve;

162 163 164 165 166 167 168 169 170 171
  /// The animation curve to use when transitioning a previous [child] out.
  ///
  /// This curve is applied to the [child] when the child is faded in (or when
  /// the widget is created, for the first child). Changing [switchOutCurve]
  /// will not affect the curves of already-visible widgets, it only affects the
  /// curves of future children.
  ///
  /// If [child] is changed while the current child is in the middle of fading
  /// in, [switchInCurve] will be run in reverse from that point instead of
  /// jumping to the corresponding point on [switchOutCurve].
172 173
  final Curve switchOutCurve;

174
  /// A function that wraps a new [child] with an animation that transitions
175
  /// the [child] in when the animation runs in the forward direction and out
176 177 178 179 180
  /// when the animation runs in the reverse direction. This is only called
  /// when a new [child] is set (not for each build), or when a new
  /// [transitionBuilder] is set. If a new [transitionBuilder] is set, then
  /// the transition is rebuilt for the current child and all previous children
  /// using the new [transitionBuilder]. The function must not return null.
181
  ///
182
  /// The default is [AnimatedSwitcher.defaultTransitionBuilder].
183
  ///
184 185 186 187
  /// The animation provided to the builder has the [duration] and
  /// [switchInCurve] or [switchOutCurve] applied as provided when the
  /// corresponding [child] was first provided.
  ///
188 189
  /// See also:
  ///
190
  ///  * [AnimatedSwitcherTransitionBuilder] for more information about
191
  ///    how a transition builder should function.
192
  final AnimatedSwitcherTransitionBuilder transitionBuilder;
193 194 195

  /// A function that wraps all of the children that are transitioning out, and
  /// the [child] that's transitioning in, with a widget that lays all of them
196 197
  /// out. This is called every time this widget is built. The function must not
  /// return null.
198
  ///
199
  /// The default is [AnimatedSwitcher.defaultLayoutBuilder].
200 201 202
  ///
  /// See also:
  ///
203
  ///  * [AnimatedSwitcherLayoutBuilder] for more information about
204
  ///    how a layout builder should function.
205
  final AnimatedSwitcherLayoutBuilder layoutBuilder;
206 207

  @override
208
  State<AnimatedSwitcher> createState() => _AnimatedSwitcherState();
209

210
  /// The transition builder used as the default value of [transitionBuilder].
211 212 213 214 215
  ///
  /// The new child is given a [FadeTransition] which increases opacity as
  /// the animation goes from 0.0 to 1.0, and decreases when the animation is
  /// reversed.
  ///
216
  /// This is an [AnimatedSwitcherTransitionBuilder] function.
217
  static Widget defaultTransitionBuilder(Widget child, Animation<double> animation) {
218
    return FadeTransition(
219
      key: ValueKey<Key?>(child.key),
220 221 222 223 224
      opacity: animation,
      child: child,
    );
  }

225
  /// The layout builder used as the default value of [layoutBuilder].
226 227 228 229 230
  ///
  /// The new child is placed in a [Stack] that sizes itself to match the
  /// largest of the child or a previous child. The children are centered on
  /// each other.
  ///
231
  /// This is an [AnimatedSwitcherLayoutBuilder] function.
232
  static Widget defaultLayoutBuilder(Widget? currentChild, List<Widget> previousChildren) {
233
    return Stack(
234
      alignment: Alignment.center,
235 236 237 238
      children: <Widget>[
        ...previousChildren,
        if (currentChild != null) currentChild,
      ],
239 240
    );
  }
241 242 243 244 245 246 247

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(IntProperty('duration', duration.inMilliseconds, unit: 'ms'));
    properties.add(IntProperty('reverseDuration', reverseDuration?.inMilliseconds, unit: 'ms', defaultValue: null));
  }
248 249
}

250
class _AnimatedSwitcherState extends State<AnimatedSwitcher> with TickerProviderStateMixin {
251
  _ChildEntry? _currentEntry;
252
  final Set<_ChildEntry> _outgoingEntries = <_ChildEntry>{};
253
  List<Widget>? _outgoingWidgets = const <Widget>[];
254
  int _childNumber = 0;
255 256 257 258

  @override
  void initState() {
    super.initState();
259 260 261 262 263 264 265 266 267 268 269
    _addEntryForNewChild(animate: false);
  }

  @override
  void didUpdateWidget(AnimatedSwitcher oldWidget) {
    super.didUpdateWidget(oldWidget);

    // If the transition builder changed, then update all of the previous
    // transitions.
    if (widget.transitionBuilder != oldWidget.transitionBuilder) {
      _outgoingEntries.forEach(_updateTransitionForEntry);
270
      if (_currentEntry != null) {
271
        _updateTransitionForEntry(_currentEntry!);
272
      }
273 274 275 276 277 278
      _markChildWidgetCacheAsDirty();
    }

    final bool hasNewChild = widget.child != null;
    final bool hasOldChild = _currentEntry != null;
    if (hasNewChild != hasOldChild ||
279
        hasNewChild && !Widget.canUpdate(widget.child!, _currentEntry!.widgetChild)) {
280 281 282 283 284
      // Child has changed, fade current entry out and add new entry.
      _childNumber += 1;
      _addEntryForNewChild(animate: true);
    } else if (_currentEntry != null) {
      assert(hasOldChild && hasNewChild);
285
      assert(Widget.canUpdate(widget.child!, _currentEntry!.widgetChild));
286 287 288 289
      // Child has been updated. Make sure we update the child widget and
      // transition in _currentEntry even though we're not going to start a new
      // animation, but keep the key from the previous transition so that we
      // update the transition instead of replacing it.
290 291
      _currentEntry!.widgetChild = widget.child!;
      _updateTransitionForEntry(_currentEntry!); // uses entry.widgetChild
292 293 294 295
      _markChildWidgetCacheAsDirty();
    }
  }

296
  void _addEntryForNewChild({ required bool animate }) {
297 298 299 300
    assert(animate || _currentEntry == null);
    if (_currentEntry != null) {
      assert(animate);
      assert(!_outgoingEntries.contains(_currentEntry));
301 302
      _outgoingEntries.add(_currentEntry!);
      _currentEntry!.controller.reverse();
303 304 305
      _markChildWidgetCacheAsDirty();
      _currentEntry = null;
    }
306
    if (widget.child == null) {
307
      return;
308
    }
309 310
    final AnimationController controller = AnimationController(
      duration: widget.duration,
311
      reverseDuration: widget.reverseDuration,
312 313 314 315 316 317 318 319
      vsync: this,
    );
    final Animation<double> animation = CurvedAnimation(
      parent: controller,
      curve: widget.switchInCurve,
      reverseCurve: widget.switchOutCurve,
    );
    _currentEntry = _newEntry(
320
      child: widget.child!,
321 322 323 324 325 326 327 328 329 330
      controller: controller,
      animation: animation,
      builder: widget.transitionBuilder,
    );
    if (animate) {
      controller.forward();
    } else {
      assert(_outgoingEntries.isEmpty);
      controller.value = 1.0;
    }
331 332
  }

333
  _ChildEntry _newEntry({
334 335 336 337
    required Widget child,
    required AnimatedSwitcherTransitionBuilder builder,
    required AnimationController controller,
    required Animation<double> animation,
338
  }) {
339 340
    final _ChildEntry entry = _ChildEntry(
      widgetChild: child,
341
      transition: KeyedSubtree.wrap(builder(child, animation), _childNumber),
342 343 344 345 346 347
      animation: animation,
      controller: controller,
    );
    animation.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.dismissed) {
        setState(() {
348 349 350 351
          assert(mounted);
          assert(_outgoingEntries.contains(entry));
          _outgoingEntries.remove(entry);
          _markChildWidgetCacheAsDirty();
352 353 354 355 356 357 358
        });
        controller.dispose();
      }
    });
    return entry;
  }

359
  void _markChildWidgetCacheAsDirty() {
360
    _outgoingWidgets = null;
361 362
  }

363 364 365 366
  void _updateTransitionForEntry(_ChildEntry entry) {
    entry.transition = KeyedSubtree(
      key: entry.transition.key,
      child: widget.transitionBuilder(entry.widgetChild, entry.animation),
367
    );
368 369 370 371 372
  }

  void _rebuildOutgoingWidgetsIfNeeded() {
    _outgoingWidgets ??= List<Widget>.unmodifiable(
      _outgoingEntries.map<Widget>((_ChildEntry entry) => entry.transition),
373
    );
374 375
    assert(_outgoingEntries.length == _outgoingWidgets!.length);
    assert(_outgoingEntries.isEmpty || _outgoingEntries.last.transition == _outgoingWidgets!.last);
376 377 378 379
  }

  @override
  void dispose() {
380
    if (_currentEntry != null) {
381
      _currentEntry!.controller.dispose();
382 383
    }
    for (final _ChildEntry entry in _outgoingEntries) {
384
      entry.controller.dispose();
385
    }
386 387 388
    super.dispose();
  }

389 390
  @override
  Widget build(BuildContext context) {
391
    _rebuildOutgoingWidgetsIfNeeded();
392
    return widget.layoutBuilder(_currentEntry?.transition, _outgoingWidgets!.where((Widget outgoing) => outgoing.key != _currentEntry?.transition.key).toSet().toList());
393 394
  }
}