Making a Flutter Container, Image or any Widget disabled/ greyed out | foregroundDecoration property


Many times we want to disable a container or say lock its access based on certain conditions, maybe the user does not fulfill the requirements to access this container. So how can we easily show this to the user via UI so that he understands that is is locked? The answer is, You don't need to play with individual colors to get such effect. This can be very easily done using a decoration property for container. It can be easily applied to any widget like Image, Icon, Row, Column etc. as shown in the diagram by wrapping that widget inside Container and then applying this technique. So Container  widget has a property called foregroundDecoration which we will use to get our desired effect as shown in the image. Let me tell you how to apply the foregroundDecoration. If you want to get grayed out/disabled effect to your Container copy the below foregroundDecoration property to your Container and then simply see the results.


	foregroundDecoration: BoxDecoration(
	    color: Colors.grey,
	    backgroundBlendMode: BlendMode.saturation,
	    borderRadius: BorderRadius.circular(_width / 25),
	child : MyWidget(),

MyWidget() can be any widget like a row of widgets or column of widgets or a DecorationImage or any other thing you may desire and this disabled effect will be applied to the whole Container altogether. 

Thank you for your patience reading. If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Whatsapp or Facebook. 

😇Happy Learning!!