How can i set the outer blur like this?

Question

So i want to achieve this transition color with flutter

There is a container that contain Text tile with blue color () that changing to transparent. Here is what i do so far. I'm trying to use stack and 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,
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  

and here is the result

So how can i achieve the first image that i put above ? thanks in advance and sorry for my english

Answer 1

You can try ShaderMask to achieve the desired result.

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,
                      ),
                    )
                ))
          )
        ]
    );

ShaderMask Widget