Crossfading Widgets with Resize

import 'dart:async';
import 'dart:ui' show lerpDouble;

import 'package:flutter/scheduler.dart';
import 'package:flutter/widgets.dart';
import 'package:lib.widgets/model.dart';

Future<Null> main() async {
  // Usually you get these from a StatefulWidget with the right mixin.  Since
  // we're in main and I don't like StatefulWidgets we'll create our own.
  _TickerProvider tickerProvider = new _TickerProvider();

  // Fade out animation.
  AnimationController fadeOut = new AnimationController(
    vsync: tickerProvider,
    duration: const Duration(milliseconds: 500),
  );

  // Resize animation.
  AnimationController resize = new AnimationController(
    vsync: tickerProvider,
    duration: const Duration(milliseconds: 500),
  );

  // Fade in animation.
  AnimationController fadeIn = new AnimationController(
    vsync: tickerProvider,
    duration: const Duration(milliseconds: 500),
  );

  // When fade out is done, start resizing.
  fadeOut.addStatusListener((AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      resize.forward();
    }
  });

  // When resizing is done, start fading in .
  resize.addStatusListener((AnimationStatus status) {
    if (status == AnimationStatus.completed) {
      fadeIn.forward();
    }
  });

  // Stores sizes of A and B.
  _SizeModel sizeModel = new _SizeModel();

  final double padding = 8.0;

  runApp(
    new ScopedModel<_SizeModel>(
      model: sizeModel,
      child: new Directionality(
        textDirection: TextDirection.ltr, // Needed for Stack to work.
        child: new GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            // On tap, reset everything to the beginning and start fading out.
            fadeOut.value = 0.0;
            resize.value = 0.0;
            fadeIn.value = 0.0;
            fadeOut.forward();
          },
          child: new AnimatedBuilder(
            animation: new Listenable.merge(<Listenable>[
              fadeOut,
              resize,
              fadeIn,
            ]),
            builder: (BuildContext context, Widget child) =>
                new Stack(children: <Widget>[
                  // Background.
                  new Center(
                    child: new ScopedModelDescendant<_SizeModel>(
                      builder: (
                        BuildContext context,
                        Widget child,
                        _SizeModel sizeModel,
                      ) =>
                          new Container(
                            width: lerpDouble(
                                  sizeModel.aSize.width,
                                  sizeModel.bSize.width,
                                  resize.value,
                                ) +
                                2.0 * padding,
                            height: lerpDouble(
                                  sizeModel.aSize.height,
                                  sizeModel.bSize.height,
                                  resize.value,
                                ) +
                                2.0 * padding,
                            color: const Color(0xFFF0F0F0),
                          ),
                    ),
                  ),

                  // First child.
                  new Offstage(
                    offstage: fadeOut.status == AnimationStatus.completed,
                    child: new Center(
                      child: new Opacity(
                        opacity: 1.0 - fadeOut.value,
                        child: new _WidgetA(
                          onSizeChanged: (Size size) => sizeModel.aSize = size,
                        ),
                      ),
                    ),
                  ),

                  // Second child.
                  new Offstage(
                    offstage: fadeIn.status == AnimationStatus.dismissed,
                    child: new Center(
                      child: new Opacity(
                        opacity: fadeIn.value,
                        child: new _WidgetB(
                          onSizeChanged: (Size size) => sizeModel.bSize = size,
                        ),
                      ),
                    ),
                  ),
                ]),
          ),
        ),
      ),
    ),
  );
}

class _SizeModel extends Model {
  Size _aSize = Size.zero;
  Size _bSize = Size.zero;

  set aSize(Size size) {
    if (size != _aSize) {
      _aSize = size;
      notifyListeners();
    }
  }

  set bSize(Size size) {
    if (size != _bSize) {
      _bSize = size;
      notifyListeners();
    }
  }

  Size get aSize => _aSize;
  Size get bSize => _bSize;
}

class _TickerProvider extends TickerProvider {
  @override
  Ticker createTicker(TickerCallback onTick) {
    return new Ticker(onTick);
  }
}

// Content of first widget goes in here.
class _WidgetA extends StatelessWidget {
  final ValueChanged<Size> onSizeChanged;

  const _WidgetA({this.onSizeChanged});

  @override
  Widget build(BuildContext context) => new Container(
        width: 200.0,
        height: 300.0,
        child: new LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          onSizeChanged?.call(constraints.biggest);
          return new Container(
            color: const Color(0xFF00FF00),
          );
        }),
      );
}

// Content of second widget goes in here.
class _WidgetB extends StatelessWidget {
  final ValueChanged<Size> onSizeChanged;

  const _WidgetB({this.onSizeChanged});

  @override
  Widget build(BuildContext context) => new Container(
        width: 200.0,
        height: 400.0,
        child: new LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          onSizeChanged?.call(constraints.biggest);
          return new Container(
            color: const Color(0xFF0000FF),
          );
        }),
      );
}