Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

652
Visualizações
¿Cómo agregar solo una sombra en un lado específico de un Contenedor?

Estoy tratando de agregar una sombra solo al lado derecho de mi widget contenedor usando el parámetro boxShadow en el widget BoxDecoration.

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

Este código funciona pero agrega una sombra a cada lado posible del contenedor. Quisiera que sea solo del lado derecho.

over 4 years ago · Santiago Trujillo
5 Respostas
Responde à pergunta

0

Puede establecer la propiedad de offset de BoxShadow . Se define como Offset(double dx, double dy) . Así por ejemplo:

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

Esto proyectará una sombra solo a 3 unidades a la derecha ( dx ).

over 4 years ago · Santiago Trujillo Relatório

0

Tenga en cuenta que MyShadowSize = spreadRadius + x/y Offset. Ejemplo:

  • Si spreadRadius: 1, offset: Offset(0, 0) => 4 lados es MyShadowSize tiene 1 + 0 = 1.
  • Si desea solo la sombra inferior = 1, puede agregar: spreadRadius: 0, offset: Offset(0, 1), Explique: Current y offset = 1, => MyShadowSize bottom = 1, MyShadowSize top = -1 (porque y move abajo) => La parte superior de MyShadowSize no se muestra.
over 4 years ago · Santiago Trujillo Relatório

0

La propiedad boxShadow de BoxDecoration toma una lista de BoxShadow , por lo que puede pasar BoxShadow sólido al resto de los lados y esquinas con color de fondo. Fíjate que queda una pequeña sombra en las esquinas, pero ¡hey!... La vida no es perfecta ;)

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

Captura de pantalla

ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo Relatório

0

Esta es una forma:

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

***: cualquiera que sea el lado al que le des margen, ese lado mostrará la sombra. Dar margen a varios lados también funciona.

Manifestación

over 4 years ago · Santiago Trujillo Relatório

0

Para evitar esos bordes feos de las otras respuestas aquí, puedes hacerlo así.

ingrese la descripción de la imagen aquí

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

Puede obtener resultados bastante salvajes con esto, por ejemplo, si modifica el código anterior y coloca filas + niños expandidos con diferentes sombras allí.

ingrese la descripción de la imagen aquí

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda