简体   繁体   中英

Shadow inside Container widget - Flutter

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.

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...

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM