Here's a question, how do you make a Container widget have a shadow on the inside. I tried using BoxShadow but this is not the widget I am looking for. What I want is a shadow inside the Container and I want this Container to have an image. This image would appear blackish. Please help me find this. Thank you.

CodePudding user response：

I guess you need a ColorFilter over your Image:

                 Container(
                  decoration: BoxDecoration(
                    image: new DecorationImage(
                      fit: BoxFit.cover,
                      colorFilter: ColorFilter.mode(
                          Colors.black.withOpacity(0.2), BlendMode.dstATop),
                      image: new NetworkImage(
                        'https://wallpaperaccess.com/full/777518.jpg',
                      ),
                    ),

You can try fiddling with the opacity and BlendMode to get the desired result...

CodePudding user response：

Container(
      height: 120,
      width: 120,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.white10, // select your color
              spreadRadius: 3,
              blurRadius: 5,
              offset: const Offset(2, 2),
            ),
            BoxShadow(
              color: Colors.grey.withOpacity(0.2),// select your color
              spreadRadius: 3,
              blurRadius: 5,
              offset: const Offset(-1, -1),
            ),
          ],
        ),
    )