如何在颤动中创建具有线性渐变的模糊 [英] How to create a blur with a linear gradient in Flutter

问题描述

我正在尝试在Ffltter中创建一个小部件，它的行为将类似于BackdropFilter小部件，并模糊它后面的任何东西。尽管与BackdropFilter不同，此模糊不应均匀分布，而应以线性方式逐渐增加模糊。

有没有人有什么想法。谢谢

推荐答案

现在似乎可以使用新的ImageFiltered小工具。

我通过thisGitHub评论找到了一个代码示例：

Stack(
   alignment: Alignment.bottomCenter,
   fit: StackFit.expand,
   children: <Widget>[
    Image.network(
             image,
             fit: BoxFit.cover,
             alignment: Alignment.bottomCenter),
      ImageFiltered(
               imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
               child: ShaderMask(
                 shaderCallback: (rect) {
                   return LinearGradient(
                       begin: Alignment.topCenter,
                       end: Alignment.bottomCenter,
                       colors: [Colors.black, Colors.black.withOpacity(0)],
                       stops: [0.4, 0.75]).createShader(rect);
                 },
                 blendMode: BlendMode.dstOut,
                 child: Image.network(
                     image,
                     fit: BoxFit.cover,
                     alignment: Alignment.bottomCenter),
               )
     ),
   ])

这篇关于如何在颤动中创建具有线性渐变的模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！