Perception

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Perception is Everything',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: FractionallySizedBox(
        heightFactor: 0.8,
        child: Container(
          constraints: BoxConstraints(maxWidth: 500),
          child: Column(
            children: <Widget>[
              FractionallySizedBox(
                widthFactor: 0.5,
                child: Text('Which of the following animations is faster? '
                    '(This is a trick question. '
                    'Read the code for the answer.)'),
              ),
              SizedBox(height: 50),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    MyPerception('A', Curves.linear),
                    SizedBox(width: 50),
                    MyPerception('B', Curves.easeOutCubic),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class MyPerception extends StatefulWidget {
  final String label;

  final Curve curve;

  MyPerception(this.label, this.curve, {Key key}) : super(key: key);

  @override
  _MyPerceptionState createState() => _MyPerceptionState();
}

class _MyPerceptionState extends State<MyPerception> {
  Alignment _current = Alignment.bottomCenter;
  Alignment _next = Alignment.bottomCenter;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        FlatButton(
          onPressed: () => setState(() {
            _current = _next;
            _next = _current == Alignment.bottomCenter
                ? Alignment.topCenter
                : Alignment.bottomCenter;
          }),
          color: Colors.black12,
          child: Text('Tap'),
        ),
        SizedBox(height: 50),
        Expanded(
          child: TweenAnimationBuilder(
            tween: AlignmentTween(
              begin: _current,
              end: _next,
            ),
            // Oh snap! The duration is exactly the same for both animations.
            duration: const Duration(milliseconds: 300),
            // It's all about the curve.
            // Linear motion generally feels more sluggish than a well chosen
            // curve (like easeOutCubic in the case of B).
            curve: widget.curve,
            builder: (context, alignment, child) {
              return Align(
                alignment: alignment,
                child: child,
              );
            },
            child: Container(
              width: 50,
              height: 50,
              color: Colors.black,
              child: Center(
                child:
                    Text(widget.label, style: TextStyle(color: Colors.white)),
              ),
            ),
          ),
        ),
      ],
    );
  }
}