在 Flutter 中复制 Letterboxd 的图像缩放、英雄动画和背景模糊效果

Question

我正在开发一个 Flutter 项目，我正在尝试复制本机应用 Letterboxd 的功能。在此应用程序中，当您单击图像时，它会以英雄动画放大。放大的图像显示为一个对话框，背景中带有上一页的模糊预览。此外，您可以放大放大的图像，然后该图像会超出定义的边界。

我附上了一张 gif 来更好地说明我的目标。

我尝试过实现这一点，但一直在努力，特别是在创建上一页的模糊背景效果方面。

我将非常感谢有关如何实现此功能的任何指导或建议。

预先感谢您的帮助。

Answer 1

你可以通过BackdropFilter实现模糊效果，你可以查看这个官方doc。这是基本示例，您可以根据需要进行更改。

示例：

GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (context) => BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 15),
                  child: Dialog(
                    child: Hero(
                      tag: 'image',
                      child: InteractiveViewer( // this widget is used for zoom the image
                        child: Image.asset(
                          'assets/images/rooom.jpeg', // your image
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                ),
              );
            },
            child: Hero(
              tag: 'image',
              child: Image.asset('assets/images/rooom.jpeg'), // your image
            ),
          ),