I have a container with a lighter background color (light green with opacity of 50%) and the container shadow color is dark black (opacity 100%). Because of darker shadow color my container color got disrupt.

Means my shadow color is much darker then the continer color...Please do help. Thanks in advance.

this is what I have done.

the output I want.

child: Container(
  height: 100.0,
  decoration: BoxDecoration(
    border: Border.all(
      width: 1.0,
      color: const Color.fromRGBO(3, 60, 9, 0.5),
    ),
    boxShadow: const [
      BoxShadow(
        spreadRadius: 0,
        blurRadius: 9,

        color: Colors.black,
      ),
    ],
    color: const Color.fromRGBO(167, 212, 172, 0.2),

    borderRadius: BorderRadius.circular(5),
  ),
  child: Center(
    child: ListTile(
      leading: Icon(
        Icons.person_pin,
        size: 60,
        color: pColor,
      ),
      title: Text(
        'My Profile',
        style: TextStyle(
          color: pColor,
          fontFamily: robotoBold,
          fontWeight: FontWeight.w700,
          fontSize: 20,
        ),
      ),
      subtitle: Text(
        'Tap to See your Profile',
        style: TextStyle(
          color: pColor,
          fontFamily: robotoReg,
          fontSize: 16,
          fontWeight: FontWeight.w400,
        ),
      ),
      trailing: const Icon(
        Icons.navigate_next_outlined,
        size: 40,
        color: Color.fromRGBO(153, 153, 153, 1),
      ),
    ),
  ),
),

CodePudding user response：

You should change the "blurStyle", like this I achieved the output you want I think:

boxShadow: const [
    BoxShadow(
        blurStyle: BlurStyle.outer,
        spreadRadius: 0,
        blurRadius: 15,
        color: Colors.black,
    ),
],

CodePudding user response：

you must use

  **blurStyle: BlurStyle.outer,**

in boxShadow to make the shadow out of the box because the default value it is inner shadow