Flutter — Shadows & glows

Thomas Middel
Feb 17 · 4 min read
Star Wars Episode I — The Phantom Menace

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!

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 DecoratedBox directly 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 BoxShadow:

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:

  • Offset
  • 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 5.0.

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?

Adding glow

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 shadow property in TextStyle!

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! 🐦

Flutter Community

Articles and Stories from the Flutter Community

Thomas Middel

Written by

Android & Flutter developer @ Pinch.nl

Flutter Community

Articles and Stories from the Flutter Community

More From Medium

More from Flutter Community

More from Flutter Community

More from Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade