flutter LinearGradient transparent to white overlay

Question

I am trying to make a container that fades from transparent to white. I'll put it over stuff so it looks like the content behind is fading away into the whiteness of the background.

When I tried to do this using LinearGradient I get this weird grey.

Widget body() => Stack(
  children: [
    MyFormWidget(),
    Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.transparent, Colors.white])))]);

What's going on here?

I tried a ShaderMask but that only applies to children and I don't want to include the contents of the page as children because I only want this applied to one part of the screen.

How do I make a simple transparent-> white Fad container on top of the stack?

Answer 1

replaced Colors.transparent with Colors.white.withOpacity(0.0)

Answer 2

I had the same problem, you should use a gradient of different shades of white to make the effect of a fade.

Try this :

Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [
                  0.2,
                  0.5,
                  0.7,
                  0.6,
                ],
                colors: [
                  Colors.transparent,
                  Colors.white10,
                  Colors.white54,
                  Color.fromARGB(190, 255, 255, 255),
                ],
              ),
            ),
          )

You can change values in