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.
Container( 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!!
I am a Member Technical at D.E. Shaw India Pvt. Ltd. CodingWithArt is a blog where you find tricks and solutions to challenging coding and development problems. I aim to build a universal tech platform for every enthusiast out there.