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!
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!
Adding a shadow
Like you might’ve seen in the playground already, we’re making use of something called
BoxDecoration. What does it do? It’s describing how to paint (or decorate) a box! This means we can apply some extra styling to something like a
Container by giving it a shape, a border or let it cast a shadow! 😄
Tip: If you only care about the decoration, you can use
DecoratedBoxdirectly as a widget.
That immediately brings us to the answer on how we can cast a shadow.
BoxDecoration has a property called
boxShadow which takes a list of
BoxShadow objects. Let’s keep it at a single shadow for now. We’ll start out by removing our border and adding a single
Looking at the UI, this doesn’t seem to give us much yet though. Did we even remove our border? 🤔
Configuring our shadow
By default, the above is what we’ll end up with when adding a shadow. The shadow itself is not blurred and the size is just enough to make it visible.
BoxShadow has a couple of properties that let us configure it though, which we’ll use these 3 of:
- Blur radius
- Spread radius
First of all, have a look at
offset. Setting an offset to our shadow does exactly what it says, offsetting our shadow. For demonstration purposes, let’s pretend our light source is at the top left of our container, meaning we want to cast a shadow at the bottom right. We’ll set the offset to
Offset(3.0, 3.0) in that case: 3 points to the right and 3 points to the bottom relative to the center.
Like you may have noticed, the shadow isn’t blurred at all. That’s where
blurRadius comes in. This basically defines how much the shadow is blurred, so, for now, we’ll use a radius of
Last up is the
spreadRadius. The spread basically defines the size of our shadow, so setting this to
2.0 for example will cause the shadow to increase in size and show more instead of having the same size as the widget itself and hardly showing at all.
So now that we discussed the configuration of our shadow, let’s have a look at the result:
Not the prettiest of designs, but it works, great! How does it look code-wise you say?
So now that we know how to add shadows we already have the basics of adding a glow actually! Remember we talked about the properties of
BoxShadow? It actually has a fourth property: color 😄 I think you already get where I’m going with this, so let’s go ahead and do 2 things: remove our offset so our glow is centered and set the color to red:
And this is the result in our app:
Good stuff! So now you can start having fun with glows in your app!
Pro tip: you can also add a shadow or glow to text by using the
And that’s it, basic shadows and glows in Flutter! Awesome to see how easy it is to add stuff like this, out of the box in Flutter. Hope you liked the article, happy coding ya’ll! 🐦