Search code examples
flutterlinear-gradients

flutter LinearGradient transparent to white overlay

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

gradient

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?

Solution

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