0
651
Views¿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.
5 answers
Answer question0
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 ).
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.
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
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.
0
Para evitar esos bordes feos de las otras respuestas aquí, puedes hacerlo así.
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í.
