How does one put a Flutter BoxDecoration gradient over a BoxDecoration image?

Question

How does one put a full page gradient overtop of an image?

What I'm hoping to achieve:

What I've tried:

I've tried a Container with two stacked BackdropFilters but that doesn't seem to work.

class HomePage extends StatelessWidget {
  // Color gradientStart = Colors.transparent;
  // Color gradientEnd = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [gradientStart, gradientEnd],
            begin: FractionalOffset(0, 0),
            end: FractionalOffset(0, 1),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp
          ),
          // child: BackdropFilter()
          // image: DecorationImage(
          //   image: ExactAssetImage('assets/images/screen-1.jpg'),
          //   fit: BoxFit.cover,
          // ),
        ),
        child: Column(
            children: [
              Expanded(
                child: Container(
                  child: Align(
                    alignment: FractionalOffset(0.5, 0.0),
                    child: Container(
                      margin: EdgeInsets.only(top: 110.0),
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey[600],
                            blurRadius:
                                20.0, // has the effect of softening the shadow
                            spreadRadius:
                                0, // has the effect of extending the shadow
                            // offset: Offset(
                            //   10.0, // horizontal, move right 10
                            //   10.0, // vertical, move down 10
                            // ),
                          )
                        ],
                      ),
                      child: Image.asset('assets/images/Medtrics_Icon.png',
                          width: 70),
                    ),
                  ),
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(bottom: 10.0),
                    child: Text(
                  'Explore New Job Opportunities',
                  style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                  textAlign: TextAlign.center,
                )),
                flex: 0,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(bottom: 28.0),
                  child: Text(
                    'We do all the best for your future endeavors by providing the connections you need during your job seeking process.',
                    style: TextStyle(fontSize: 16.0, color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                  padding: EdgeInsets.symmetric(vertical: 18.0),
                  constraints: BoxConstraints(
                    maxWidth: 330.0,
                  ),
                ),
                flex: 0,
              ),
              Expanded(
                child: ButtonTheme(
                  minWidth: 320.0,
                  height: 50.0,
                  child: RaisedButton(
                    onPressed: () {},
                    textColor: Colors.blueAccent,
                    color: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)
                    ),
                    child: Container(
                      child: Text(
                        'Sign Up',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
                flex: 0,
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: ButtonTheme(
                    minWidth: 320.0,
                    height: 50.0,
                    child: RaisedButton(
                      onPressed: () {},
                      textColor: Colors.white,
                      color: Colors.blueAccent,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)
                      ),
                      child: Container(
                        child: Text(
                          'Continue with Google',
                          style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                flex: 0,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(bottom: 40.0),
                  child: ButtonTheme(
                    minWidth: 200.0,
                    height: 50.0,
                    child: FlatButton(
                      onPressed: () {
                        Navigator.pushNamed(context, '/signup');
                      },
                      textColor: Colors.white,
                      child: Container(
                        child: Text(
                          'Log In',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                flex: 0,
              ),
            ],
          ),
      ),
    );
  }
}

What the code above generates:

iPhone
iPad

Image I'm trying to use for Background https://i.imgur.com/jWOE61B.jpg

Any help appreciated 🙂

Answer 1

Working

class HomePage extends StatelessWidget {
  Color gradientStart = Colors.transparent;
  Color gradientEnd = Colors.black;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Stack(
        children: <Widget>[
          ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [gradientStart, gradientEnd],
              ).createShader(Rect.fromLTRB(0, -140, rect.width, rect.height-20));
            },
            blendMode: BlendMode.darken,
            child: Container(
              decoration: BoxDecoration(
                // gradient: LinearGradient(
                //   colors: [gradientStart, gradientEnd],
                //   begin: FractionalOffset(0, 0),
                //   end: FractionalOffset(0, 1),
                //   stops: [0.0, 1.0],
                //   tileMode: TileMode.clamp
                // ),
                image: DecorationImage(
                  image: ExactAssetImage('assets/images/screen-1.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Column(
            children: [
              Expanded(
                child: Container(
                  child: Align(
                    alignment: FractionalOffset(0.5, 0.0),
                    child: Container(
                      margin: EdgeInsets.only(top: 110.0),
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey[600],
                            blurRadius:
                                20.0, // has the effect of softening the shadow
                            spreadRadius:
                                0, // has the effect of extending the shadow
                            // offset: Offset(
                            //   10.0, // horizontal, move right 10
                            //   10.0, // vertical, move down 10
                            // ),
                          )
                        ],
                      ),
                      child: Image.asset('assets/images/Medtrics_Icon.png',
                          width: 70),
                    ),
                  ),
                ),
                flex: 1,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(bottom: 10.0),
                    child: Text(
                  'Explore New Job Opportunities',
                  style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold,
                      color: Colors.white),
                  textAlign: TextAlign.center,
                )),
                flex: 0,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(bottom: 28.0),
                  child: Text(
                    'We do all the best for your future endeavors by providing the connections you need during your job seeking process.',
                    style: TextStyle(fontSize: 16.0, color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                  padding: EdgeInsets.symmetric(vertical: 18.0),
                  constraints: BoxConstraints(
                    maxWidth: 330.0,
                  ),
                ),
                flex: 0,
              ),
              Expanded(
                child: ButtonTheme(
                  minWidth: 320.0,
                  height: 50.0,
                  child: RaisedButton(
                    onPressed: () {},
                    textColor: Colors.blueAccent,
                    color: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0)
                    ),
                    child: Container(
                      child: Text(
                        'Sign Up',
                        style: TextStyle(
                            fontSize: 16, fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
                flex: 0,
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: ButtonTheme(
                    minWidth: 320.0,
                    height: 50.0,
                    child: RaisedButton(
                      onPressed: () {},
                      textColor: Colors.white,
                      color: Colors.blueAccent,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10.0)
                      ),
                      child: Container(
                        child: Text(
                          'Continue with Google',
                          style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                flex: 0,
              ),
              Expanded(
                child: Container(
                  margin: EdgeInsets.only(bottom: 20.0),
                  child: ButtonTheme(
                    minWidth: 200.0,
                    height: 50.0,
                    child: FlatButton(
                      onPressed: () {
                        Navigator.pushNamed(context, '/signup');
                      },
                      textColor: Colors.white,
                      child: Container(
                        child: Text(
                          'Log In',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ),
                ),
                flex: 0,
              ),
            ],
          ),
        ]
      ),
    );
  }
}

Result

iPhone X