Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

645
Views
How to only add a shadow on one specific side of a Container?

I am trying to add a shadow to only the right side of of my container widget using the boxShadow parameter in the BoxDecoration widget.

new Container(
  decoration: BoxDecoration(
    color: Colors.grey.withOpacity(0.5),
    boxShadow: [
      BoxShadow(
        blurRadius: 5.0
      ),
    ],
  ),
),

This code works but adds a shadow to every possible side of the container. I would like to have it only be on the right side.

over 4 years ago · Santiago Trujillo
5 answers
Answer question

0

You can set the offset property of BoxShadow. It is defined as Offset(double dx, double dy). So, for example:

boxShadow: [
  BoxShadow(
    blurRadius: 5.0,
    offset: Offset(3.0, 0),
  ),
],

This will cast a shadow only at 3 units to the right (dx).

over 4 years ago · Santiago Trujillo Report

0

Note that MyShadowSize = spreadRadius + x/y Offset. Example:

  • If spreadRadius: 1, offset: Offset(0, 0) => 4 sides is MyShadowSize has 1 + 0 = 1.
  • If you want only bottom shadow = 1, you can add: spreadRadius: 0, offset: Offset(0, 1), Explain: Current y offset = 1, => MyShadowSize bottom = 1, MyShadowSize top = -1 (because y move down) => MyShadowSize top not show.
over 4 years ago · Santiago Trujillo Report

0

boxShadow property of BoxDecoration takes a list of BoxShadow, so you can pass solid BoxShadow to the rest of the sides and corners with background color. Note that a small shadow remains at the corners, but hey!... Life is not perfect ;)

return Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(title: Text('Shadow Test')),
  body: Center(
    child: Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.blueAccent,
        boxShadow: [
          BoxShadow(blurRadius: 8.0),
          BoxShadow(color: Colors.white, offset: Offset(0, -16)),
          BoxShadow(color: Colors.white, offset: Offset(0, 16)),
          BoxShadow(color: Colors.white, offset: Offset(-16, -16)),
          BoxShadow(color: Colors.white, offset: Offset(-16, 16)),
        ],
      ),
    ),
  ),
);

Screenshot

enter image description here

over 4 years ago · Santiago Trujillo Report

0

This is one way:

Container(
  width: 230,
  height: 200,
  clipBehavior: Clip.antiAlias,
  decoration: BoxDecoration(),
  child: Container(
    margin: EdgeInsets.only(right: 30), // ***
    decoration: BoxDecoration(
      color: Colors.blue,
      boxShadow: [
        BoxShadow(
          color: Colors.red,
          blurRadius: 20,
          spreadRadius: 8,
        )
      ],
    ),
  ),
)

*** : whichever side you give margin to, that side will show the shadow. Giving margin to multiple sides also works.

Demo

over 4 years ago · Santiago Trujillo Report

0

To avoid those ugly edges from the other answers here, you can do it this.

enter image description here

 final oneSideShadow = Padding(
  padding: const EdgeInsets.only(left: 30, right: 30, top: 30),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: borderRadius,
      boxShadow: [
        BoxShadow(
          color: Colors.red.withOpacity(0.95),
          blurRadius: 26,
          offset: const Offset(0, 2), // changes position of shadow
        ),
      ],
    ),
  ),
);

return Container(
  width: 200,
  height: 200,
  child: Stack(
    children: [
      oneSideShadow,
      Container(
        decoration: const BoxDecoration(
          color: Colors.yellow,
        ),
      ),
    ],
  ),
);

You can get pretty wild results with this, e.g. if you modify the code above, and put row+expanded childs with different shadows there.

enter image description here

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!