Flutter — Shadows & glows
Adding a shadow or glow to your UI can add a nice finishing touch to the design. Adding elevation is nice for a feeling of depth, but we don’t have too much control over it: the shadow is what it is based on how elevated the widget is and we’re not able to give the shadow a nice color. Let’s take a look at how we can create our own shadow or glow and give our UI that finishing touch!
Basic UI
So before we start to fiddle around with shadows and glows, let’s have a look at the UI that we’ll use as our playground. We’ll start off with a basic circle, centered on our screen. I added a border to the circle for now so we know the circle is there, but we’ll remove it once we start adding a shadow or glow:
So how does this look code-wise? Pretty simple! It’s a centered Container with a circle shape and a border:
Nice! Now that we set up our playground, let’s go ahead and have a look at shadows!
