Flutter: Creating a Flippable Box with TweenAnimationBuilder

栏目: IT技术 · 发布时间: 5年前

内容简介:One of the great things about Flutter, is how you can use composition to combine multiple built-in Widgets, creating unique UI’s very quickly and easily.Today, we’re going to create aIt will end up looking something like this:

One of the great things about Flutter, is how you can use composition to combine multiple built-in Widgets, creating unique UI’s very quickly and easily.

Today, we’re going to create a FlippableBox , which is a double-sided card, that holds two pieces of content and automatically re-sizes to match its content, whenever it’s flipped over.

It will end up looking something like this:

Flutter: Creating a Flippable Box with TweenAnimationBuilder

Step 1: Get Flipped

In order to get the card flip effect, we need to rotate the Box on its vertical axis (rotationY).

This is easy using the Transform() widget. We’ll create a simple wrapper widget for this specific purpose:

class _Rotation3d extends StatelessWidget {
  //Degrees to rads constant
  static const double degrees2Radians = pi / 180;

  final Widget child;
  final double rotationY;

  const _Rotation3d({Key key, @required this.child, this.rotationY = 0}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Transform(
        alignment: FractionalOffset.center,
        transform: Matrix4.identity()
          ..setEntry(3, 2, 0.001) //These are magic numbers, just use them :)
          ..rotateY(rotationY * degrees2Radians),
        child: child);
  }
}

Now we can easily rotate anything, by just wrapping it in RotationY() :

RotationY(
    rotationY: 45, //Rotate by 45 degrees on Y axis
    child: Card(child: SizedBox(width: 250, height: 250)));

Which gives us a box, rotated by 45 degrees:

Flutter: Creating a Flippable Box with TweenAnimationBuilder

Step 2: Action!

Now that we have rotation working, we need to animate it.

This is very easy in Flutter, we can just wrap our RotationY() in a TweenAnimationBuilder() which is one of the most versatile Widgets in all of Flutter.

The way TweenAnimationBuilder() works, is you can define a Tween of a certain type (double, offset, shape, etc.), and any time you change the end value, the value within the builder will animate from its current value to the end .

Here we’ll animate a simple double value, from 0 to 180, like so:

Widget build(BuildContext context) {
  return TweenAnimationBuilder(
    duration: Duration(milliseconds: 700),
    curve: Curves.easeOut,
    tween: Tween<double>(begin: 0, end: isFlipped ? 180 : 0),
    builder: (context, value, child) {
      return RotationY(
        rotationY: value,
        child: Card(),
      );
    },
  );
}

Now, when isFlipped = true , the rotationY value will transition to 180 degrees, and when false , it will transition back to 0 degrees.

That gets us something like this:

Flutter: Creating a Flippable Box with TweenAnimationBuilder

For a full list of the things you can animate with TweenAnimationBuilder, check out the implementers section of the Tween docs .

Step 3: Add content

Now that we have an animating, flipping box, we need to actually supply it with some content.

Here we can see our final widget begin to take shape. We’ll accept two child widgets, front and back , and we’ll switch which one is shown, based on our rotation. From 0-89 degrees we’ll show the front , from 90 – 180, we’ll show the back :

class FlippableBox extends StatelessWidget {
  final Widget front;
  final Widget back;
  final bool isFlipped;

  const FlippableBox({Key key, this.isFlipped = false, this.front, this.back}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TweenAnimationBuilder(
      duration: Duration(milliseconds: 700),
      curve: Curves.easeOut,
      tween: Tween(begin: 0.0, end: isFlipped ? 180.0 : 0.0),
      builder: (context, value, child) {
        var content = value >= 90? back : front;
        return RotationY(
          rotationY: value,
          child: content,
        );
      },
    );
  }
}

That gets us something like this:

Flutter: Creating a Flippable Box with TweenAnimationBuilder

The motion is nice, but the problem is obvious: our back content is flipped horizontally

This is easily solved, by just adding another RotationY widget, this one will not animate, it will just flip the content 180 degrees when we’re showing the back.

return RotationY(
  rotationY: value,
  child: RotationY(
      rotationY: value >= 90? 180 : 0,
      child: content),
);

With that slight tweak, we’re in business!

Flutter: Creating a Flippable Box with TweenAnimationBuilder

Step 4: Let’s get flexible

What we have is great if our front and back Widgets are always the same size, but what if they aren’t?

We could just allow the Widget to resize instantly, which looks … ok?

Flutter: Creating a Flippable Box with TweenAnimationBuilder

But we can do better than that! Wouldn’t it be nice if the card could animate to the size of its content? Again, this is pretty easy to do, just using some built-in Flutter Widgets and some light composition.

To make this happen we’ll use a built-in Flutter Widget called AnimatedContainer . This is probably the biggest and most gnarly of all the Implicitly Animated Widgets , but it’s also one of the most powerful. With it, you can animate virtually all properties of Container. That includes size, which is exactly what we need!

To keep things clean, we’ll create our own widget, that just wraps AnimatedContainer , and adds a bit of code to grow or shrink according to the size of its child.

class AnimatedBackground extends StatelessWidget {

  final Container child;
  const AnimatedBackground({Key key, this.child}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
        width: child.constraints.maxWidth,
        height: child.constraints.maxHeight,
        duration: Duration(milliseconds: 700),
        curve: Curves.easeOut,
        child: child);
  }
}

You can see that we require the child is a Container , and it must have valid constraints set on it. This is necessary because AnimatedContainer needs to know the target width and height that it’s animating to.

With that widget created, it’s simple to add it to our FlippableBox :

class FlippableBox extends StatelessWidget {
  final Container front;
  final Container back;

  final bool isFlipped;

  const FlippableBox({Key key, this.isFlipped = false, this.front, this.back, this.bgDecoration}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return TweenAnimationBuilder(
      duration: Duration(milliseconds: 700),
      curve: Curves.easeOut,
      tween: Tween(begin: 0.0, end: isFlipped ? 180.0 : 0.0),
      builder: (context, value, child) {
        var content = value >= 90? back : front;
        return RotationY(
          rotationY: value,
          child: RotationY(
              rotationY: value > 90? 180 : 0,
              child: AnimatedBackground(child: content)),
        );
      },
    );
  }
}

With that addition, we now have smooth, animated transitions as the card flips over:

Flutter: Creating a Flippable Box with TweenAnimationBuilder

To finish up, here is the actual usage example above:

GestureDetector(
    onTap: () => setState(() => _isFlipped = !_isFlipped),
    child: FlippableBox(
      front: _buildCard("Front!", 250, 200),
      back: _buildCard("Back...", 350, 350),
      isFlipped: _isFlipped,
    ),
  ),
...
Widget _buildCard(String label, double width, double height) {
    return Container(
      width: width,
      height: height,
      child: Center(
        child: Text(label, style: TextStyle(fontSize: 32)),
      ),
    );
  }

There’s more we could add here, like animated background colors, adjustable timing, or different eases, but that’s probably enough for one post!

To view the full source code, or to include in your project as a package, check out the plugin on pubdev: https://pub.dev/packages/flippable_box

We hope you enjoyed learning about some new Flutter features, and please check back often to our blog for new Flutter-related content.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R语言编程艺术

R语言编程艺术

(美)Norman Matloff / 陈堰平、邱怡轩、潘岚锋 等 / 机械工业出版社 / 2013-5 / 69.00

【编辑推荐】 这本书涵盖了R语言编程的诸多方面,尤其在面向对象编程、程序调试、提升程序运行速度以及并行计算等方面,填补了同类图书的空白。关于程序调试的章节更是作者多年经验的总结。不管是初学者还是有一定编程经验的读者,阅读这本书都会有所收获。 ——统计之都 【内容简介】 R语言是世界上最流行的用于数据处理和统计分析的脚本语言。考古学家用它来跟踪古代文明的传播,医药公司用它来探......一起来看看 《R语言编程艺术》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试