Flutter

Question

所以我有一个旋转容器

这是工作代码：

@override
void initState() {
   _controller = AnimationController(
   vsync: this,
   duration: Duration(seconds: 32),
 )..repeat();
  super.initState();
 }

....

  @override
 Widget build(BuildContext context) {
  double screenHeight = MediaQuery.of(context).size.height;
  double screenWidth = MediaQuery.of(context).size.width;
   return Container(
    child: Column(
     children: <Widget>[
      SizedBox(
        height: screenHeight,
        child: Stack(
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [

              ],
            ),
            Divider(),
            Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Center(
                  child: AnimatedBuilder(
                    animation: _controller,
                    builder: (_, child) {
                      return Transform(
                        alignment: FractionalOffset.center,
                        transform: Matrix4.identity()
                          ..setEntry(3, 2, 0.002)
                          ..rotateY(0.5 * -math.pi)
                          ..rotateZ(-0.1 * math.pi)
                          ..rotateY((_controller.value - 0.6) * -math.pi)
                          ..rotateX(0.5 * math.pi),
                        child: child,
                      );
                    },

                    child: Container(

                      //color: Colors.yellow.withOpacity(0.5),
                      height: 300,
                      width: 200,

                      decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(40),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.yellow.withOpacity(0.5),
                           spreadRadius: 40,

         //UNCOMMENTING THIS LINE CAUSES STRANGE BEHAVIOUR
                            //blurRadius: 50,
                            //offset: const Offset(0, 0),
                          ),
                        ],
                      ),
                    ),
                    //),
                  ),
                ),
                SizedBox(
                  height: 170,
                )
              ],
            ),
          ],
        ),
      ),
    ],
  ),
 );
}

但是，当我取消注释 blurRadius 代码行时，它的行为很奇怪。看看容器在垂直于屏幕时是如何变形的。

我希望它始终模糊。这有点奇怪。

Answer 1

我不知道背后的原因，但删除行 ..setEntry(3, 2, 0.002) 将解决问题。但是，我认为由于相对论，动画中存在轻微的尺寸问题。通过上面的行，动画似乎随着动画完成因子的增加而降低了模糊效果，并在到达动画起点时重置为提供的值。

Answer 2

对于 Flutter 来说，阴影的绘制成本非常高，所以像这样为它们设置动画是很糟糕的，因为 Flutter 必须不断地重新绘制阴影。由于阴影也是导致你转换问题的原因，你应该尝试在GIMP/Adobe中制作你想要的阴影或在flutter中截图，然后将其添加到你的项目中。

您的项目目录中应该有一个 assets 或 images 文件夹，即 YOUR_FLUTTER_PROJECT/images。把阴影图像放在那里。

然后，在 pubspec.yaml 文件中，应该有一个用于您的资产的字段。在那里添加影子文件的路径，例如：

assets:
  - images/a_dot_burr.jpeg
  - images/a_dot_ham.jpeg
  - images/YOUR_SHADOW_FILE

运行 flutter pub get

在您的代码中，将您的 Container 替换为：

Image.asset('images/YOUR_SHADOW_FILE', height: 300, width: 200),

我还没有测试过，但我认为它应该仍然有效。

Flutter - blurRadius 奇怪的行为

Flutter - blurRadius strange behaviour

animation

containers

blur