smooth_resize.dart 3.09 KB
Newer Older
1 2 3 4 5 6 7 8
// 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';

Hixie's avatar
Hixie committed
9
final List<Map<int, Color>> _kColors = <Map<int, Color>>[
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
  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,
29
    this.animation,
30 31 32 33 34 35
    this.x,
    this.opacity,
    this.scale
  });

  final Widget child;
36 37 38 39
  final Animation<double> animation;
  final Animatable<double> x;
  final Animatable<double> opacity;
  final Animatable<double> scale;
40 41

  Widget build(BuildContext context) {
42 43
    return new AnimatedBuilder(
      animation: animation,
44
      builder: (BuildContext context, Widget child) {
45
        double currentScale = scale.evaluate(animation);
46
        Matrix4 transform = new Matrix4.identity()
47 48
          ..translate(x.evaluate(animation))
          ..scale(currentScale, currentScale);
49
        return new Opacity(
50
          opacity: opacity.evaluate(animation),
51 52 53 54 55
          child: new Transform(
            transform: transform,
            child: child
          )
        );
56 57
      },
      child: child
58 59 60 61 62 63 64 65
    );
  }
}

class SmoothBlockState extends State<SmoothBlock> {

  double _height = 100.0;

66
  Widget _handleEnter(Animation<double> animation, Widget child) {
67
    return new CardTransition(
68 69 70 71
      x: new Tween<double>(begin: -200.0, end: 0.0),
      opacity: new Tween<double>(begin: 0.0, end: 1.0),
      scale: new Tween<double>(begin: 0.8, end: 1.0),
      animation: new CurvedAnimation(parent: animation, curve: Curves.ease),
72 73 74 75
      child: child
    );
  }

76
  Widget _handleExit(Animation<double> animation, Widget child) {
77
    return new CardTransition(
78 79 80 81
      x: new Tween<double>(begin: 0.0, end: 200.0),
      opacity: new Tween<double>(begin: 1.0, end: 0.0),
      scale: new Tween<double>(begin: 1.0, end: 0.8),
      animation: new CurvedAnimation(parent: animation, curve: Curves.ease),
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
      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) {
109
    return new Block(children: _kColors.map((Map<int, Color> color) => new SmoothBlock(color: color)).toList());
110 111 112 113 114 115
  }
}

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