flutter - 水平翻转动画 ImageWidget Flutter

标签 flutter flutter-layout flutter-animation

我想为 CircularAvatar 小部件做水平翻转动画..就像下面的动画 enter image description here 像这样我想翻转圆形Avartar

我已经尝试过

AnimationController _controller;

    AnimatedBuilder(
          animation: _controller,
          builder: (context, child){
            return Transform(
              transform: Matrix4.rotationY((1 - _controller.value ) * pi / 2),
            child: CircleAvatar(
            radius: PROFILE_PIC_RADIUS,
            backgroundImage: AssetImage(url),
           // backgroundColor: Colors.transparent,
            ),
            );
          }
        ),

_controller.forward();
_controller.reverse();

但它不像下面的动画那样工作,我想要像水平方向翻转硬币这样的动画。请给出任何解决方案

最佳答案

您可以使用库 flip_card .

将此添加到 pubspec.yaml :

dependencies:
  flip_card: ^0.4.4

然后运行

flutter packages get

使用:

import 'package:flip_card/flip_card.dart';

FlipCard(
  direction: FlipDirection.HORIZONTAL, // default
  front: Container(
        child: Text('Front'),
    ),
    back: Container(
        child: Text('Back'),
    ),
);

关于flutter - 水平翻转动画 ImageWidget Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59681784/

相关文章:

firebase - 当我想获取我的图片下载链接 Flutter 时遇到问题(请求没有应用检查 token 。)

flutter - 如何在 Flutter 中为 CircleAvatar 赋予多种边框颜色?

Flutter AnimatedList - 将 CurvedAnimation 添加到 SlideTransition

flutter - Flutter:如何自动滚动到SingleChildScrollView的末尾

json - '_InternalLinkedHashMap<String, dynamic >' is not a subtype of type ' Iterable<dynamic>' in type cast

firebase - 如何在 flutter 中按日期将数据从 firestore 排序到 map

flutter - SuffixIcon 不适用于 AutoCompleteTextField

dart - 如何裁剪小部件,或切出特定大小的小部件的方形部分?

flutter - 无法 'forward ' flutter 动画

android-studio - android studio 中的 flutter 说找不到要转到的声明......我正在使用它的最新版本 v1.7.8+hotfix.4