How to add linear gradient to a rounded container in flutter?

user_13917970 0
Viewed 473

How to add linear gradient to a rounded container in flutter. Here is my code. This does apply a gradient, but it appears like a rectangle container on the top of the rounded container.

Container(
height:300,
 width: double.infinity,
            padding: EdgeInsets.all(10.0),
            margin: EdgeInsets.only(top: 8.0, bottom: 0, left: 8.0, right: 8.0),
            decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage("assets/images/img.png"),
                ),
                borderRadius: BorderRadius.circular(15.0),
                color: Colors.black),
child:Container(
decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.black.withOpacity(0.5),
                    Colors.black.withOpacity(0.7),
                  ],
                ),
child:MoreWidgets(),
),
),
flutter-layout dart flutter
1 Answers

If you want to gradient covers all of image you should remove padding from container and then add borderRadius to second Container like code below:

Container(
        height: 300,
        width: double.infinity,
        margin: EdgeInsets.only(top: 8.0, bottom: 0, left: 8.0, right: 8.0),
        decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage("assets/images/img.png"),
            ),
            borderRadius: BorderRadius.circular(15.0),
            color: Colors.black),
        child: Container(
          child: MoreWidgets(),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            gradient: LinearGradient(
              colors: [
                Colors.black.withOpacity(0.5),
                Colors.black.withOpacity(0.7),
              ],
            ),
          ),
        ),
      ),
user_142306640
Related