examples/widgets/smooth_resize.dart

// 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.

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

final List<Map<int, Color>> _kColors = <Map<int, Color>>[
  Colors.amber,
  Colors.yellow,
  Colors.blue,
  Colors.purple,
  Colors.indigo,
  Colors.deepOrange,
];

class SmoothBlock extends StatefulComponent {
  SmoothBlock({ this.color });

  final Map<int, Color> color;

  SmoothBlockState createState() => new SmoothBlockState();
}

class CardTransition extends StatelessComponent {
  CardTransition({
    this.child,
    this.performance,
    this.x,
    this.opacity,
    this.scale
  });

  final Widget child;
  final Performance performance;
  final AnimatedValue<double> x;
  final AnimatedValue<double> opacity;
  final AnimatedValue<double> scale;

  Widget build(BuildContext context) {

    return new BuilderTransition(
      performance: performance,
      variables: <AnimatedValue<double>>[x, opacity, scale],
      builder: (BuildContext context) {
        Matrix4 transform = new Matrix4.identity()
          ..translate(x.value)
          ..scale(scale.value, scale.value);
        return new Opacity(
          opacity: opacity.value,
          child: new Transform(
            transform: transform,
            child: child
          )
        );
      }
    );
  }
}

class SmoothBlockState extends State<SmoothBlock> {

  double _height = 100.0;

  Widget _handleEnter(PerformanceView performance, Widget child) {
    return new CardTransition(
      x: new AnimatedValue<double>(-200.0, end: 0.0, curve: Curves.ease),
      opacity: new AnimatedValue<double>(0.0, end: 1.0, curve: Curves.ease),
      scale: new AnimatedValue<double>(0.8, end: 1.0, curve: Curves.ease),
      performance: performance,
      child: child
    );
  }

  Widget _handleExit(PerformanceView performance, Widget child) {
    return new CardTransition(
      x: new AnimatedValue<double>(0.0, end: 200.0, curve: Curves.ease),
      opacity: new AnimatedValue<double>(1.0, end: 0.0, curve: Curves.ease),
      scale: new AnimatedValue<double>(1.0, end: 0.8, curve: Curves.ease),
      performance: performance,
      child: child
    );
  }

  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
        setState(() {
          _height = _height == 100.0 ? 200.0 : 100.0;
        });
      },
      child: new EnterExitTransition(
        duration: const Duration(milliseconds: 1500),
        onEnter: _handleEnter,
        onExit: _handleExit,
        child: new Container(
          key: new ValueKey(_height),
          height: _height,
          decoration: new BoxDecoration(backgroundColor: config.color[_height.floor() * 4])
        )
      )
    );
  }
}

class SmoothResizeDemo extends StatelessComponent {
  Widget build(BuildContext context) {
    return new Block(_kColors.map((Map<int, Color> color) => new SmoothBlock(color: color)).toList());
  }
}

void main() {
  runApp(new SmoothResizeDemo());
}