Flutter 我怎样才能像这样设置外部模糊？

所以我想用flutter实现这种过渡色

有一个容器包含变为透明的蓝色文本平铺（）。以下是我到目前为止所做的。我正在尝试使用stack和LinearGradient

  return Stack(
      children: [
        InkWell(
          onTap: () {},
          child: AspectRatio(
            aspectRatio: 16 / 9,
            child: pageData.thumbnail == ""
                ? ThumnailError()
                : CachedNetworkImage(
                    imageUrl: "https://via.placeholder.com/200x100",
                    placeholder: (context, url) => MyLoader(),
                    errorWidget: (context, url, error) => ThumnailError(),
                    imageBuilder: (context, imageProvider) => Container(
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: imageProvider,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.all(10.h),
          decoration: BoxDecoration(
            color: Colors.white,
            gradient: LinearGradient(
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                colors: [
                  AppColors.primary,
                  Colors.transparent,
                ],
                stops: [
                  0.2,
                  0.33
                ]),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            color: AppColors.primary,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextLarge(
                  label: "Title",
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
                Row(
                  children: [
                    TextMedium(
                      label: "Category",
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 10.w,
                    ),
                    TextMedium(
                      label: pageData.duration ?? "",
                      color: Colors.white,
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  

结果如下

---

那么，我如何才能实现我上面提到的第一个图像呢？提前感谢并对我的英语表示歉意

您可以尝试

ShaderMask

以获得所需的结果

Stack(
        children: [
          ClipRRect(
            child: ShaderMask(
                shaderCallback: (Rect bounds) {
                  return LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.transparent,
                        Colors.black
                      ]
                  ).createShader(bounds);
                },
                blendMode: BlendMode.darken,
                child: Container(
                    width: 300,
                    height: 250,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/someimage.jpg'),
                        fit: BoxFit.cover,
                      ),
                    )
                ))
          )
        ]
    );