Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

648
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda