CODEWITHSUNDEEP
flutterflutter-layoutflutter-widgetdropshadowflutter-container
Ahmed Noman
Ahmed Noman

Reputation: 37

How to add only Border shadow of a cointainer in flutter?

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.

enter image description here

this is what I have done.

enter image description here

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

Upvotes: 1

Views: 610

Answers (2)

Amr Bakr
Amr Bakr

Reputation: 11

you must use

  **blurStyle: BlurStyle.outer,**

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

Upvotes: 1

VincentDR
VincentDR

Reputation: 709

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

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

Upvotes: 3

Related Questions