Flutter - Is there any way to apply a gradient color to an image in a BoxDecoration?-CodePudding

So I've been trying to apply a gradient to my image, which happens to be in a decoration/BoxDecoration, and I can't get to find a way to make it work, here's my code for reference.

class SubjectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Width ${MediaQuery.of(context).size.width}"),
      ),
      body: Column(
        children: [
          Expanded(
              flex: 3,
              child: Stack(
                children: [
                  Container(
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: Colors.deepPurpleAccent,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(20),
                            bottomRight: Radius.circular(20)),
                        image: DecorationImage(
                            image: AssetImage('images/vocabulary.jpg'),
                            fit: BoxFit.cover),
                        gradient: LinearGradient(
                            colors: [Colors.black, Colors.transparent],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter)),
                  ),
                  Column(
                    children: [
                      Expanded(flex: 3, child: Container()),
                      Expanded(
                          flex: 2,
                          child: Center(
                            child: Container(
                              child: Text(
                                'SubjectName',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 24),
                              ),
                            ),
                          )),
                    ],
                  )
                ],
              )),
          Expanded(flex: 2, child: Container())
        ],
      ),
    );
  }
}

Notice in the decoration: BoxDecoration I'm trying to apply a gradient (I want it to be a transparent gradient from bottomCenter to topCenter). If anyone have some solution(s) it would be very helpful

CodePudding user response：

ColorFiltered widget should come in handy in this case :)

https://api.flutter.dev/flutter/widgets/ColorFiltered-class.html

CodePudding user response：

thankyou for the replies and suggestions, I really appreciate it. But a solution popped in and it actually worked, here's how I did it:

class SubjectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Width ${MediaQuery.of(context).size.width}"),
      ),
      body: Column(
        children: [
          Expanded(
            flex: 3,
            child: ClipRRect(
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(30),
                    bottomLeft: Radius.circular(30)),
                child: Stack(children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.deepPurpleAccent,
                      image: DecorationImage(
                          image: AssetImage('images/vocabulary.jpg'),
                          fit: BoxFit.cover),
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [
                          Colors.deepPurpleAccent,
                          Colors.transparent
                        ],
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter)),
                  )
                ])),
          ),
          Expanded(flex: 2, child: Container())
        ],
      ),
    );
  }
}