Google’southward Cloth Design guidelines have become the signature expect for many modern websites and apps. Cloth Design supports experiences that mimic existent-globe objects, and then light and shadows are important aspects of any app development process that follows these guidelines.
An object can reflect calorie-free or, if it obscures the lite source, it tin cast a shadow. Shadows can indicate depth, the direction of movement, and surface edges.
Adding shadows to elements in an app can help with user identification of the elements, communicate interactivity, and aid elements stand out and exist easier to locate.
In this tutorial, we’ll demonstrate how to utilize shadows to Flutter apps using the
class. We’ll too look at a couple of special use cases: applying a shadow to merely one side of a box and applying an inner shadow.
Applying the Flutter
class is used to create and style a shadow cast past a box. The box could be a frame effectually an prototype or message, or it could exist a button or modal. The
class must be implemented inside a
The shadow implies its top relative to other surfaces and the direction of light hitting the surface. The shadow besides takes on the shape of the box.
takes several properties, including:
color: adds color to the shadow; the default is black
spreadRadius; establishes how big of a bridge the
widget should inflate the box
blurRadius: adds blur to the shadow
blurStyle: defines way to utilise on the blur; the default is
starting time: creates
Now, let’due south take a wait at how to implement these properties to bandage shadows to an element in a demo app.
For this tutorial, we’ll add a
to the app below. The app consists of a centered
widget with an
widget has a
property which expects a list of
... Scaffold( backgroundColor: Colors.grey.shade300, body: Center( child: Container( height: 100, width: 150, child: const Icon(Icons.downhill_skiing), ornament: BoxDecoration( color: Colors.grey.shade300, boxShadow: , ), ), ), )
First permit’due south add a
to our listing:
BoxDecoration( color: Colors.grey.shade300, // this is the container's colour boxShadow: [ BoxShadow(), // no shadow color set, defaults to black ] )
is added below the
Container. To illustrate this, we’ll give our
a transparent color. In this instance, the shadow is painted in the default color (black) in the shape of our box as shown:
BoxDecoration( color: Colors.transparent, boxShadow: [ BoxShadow(), // no shadow color set, defaults to black ] )
To add a color to the shadow, we’ll brand use of the
property. We’ll add a grey shadow to our app.
Adding a spread radius
is zero. Positive values increment the size of the shadow while negative values decrease the size.
Nosotros’ll requite our
of one, as shown below:
boxShadow: [ BoxShadow( colour: Colors.grey.shade600, spreadRadius: 1, ) ]
Adding a blur radius
is goose egg which creates a sharp shadow. Information technology simply takes positive values. The college the radius value, the more blurred the shadow volition be, and the further out the shadow will spread.
We’ll give our
boxShadow: [ BoxShadow( color: Colors.grey.shade600, spreadRadius: 1, blurRadius: 15 ) ]
Adding a mistiness style
To change the mode of the blur, we update the
property. The property takes in a
enum which paints shadows based on the selected value.
The available styles include:
BlurStyle.normal: paints a blur that appears hazy on both the inside and the exterior; this is the default
BlurStyle.solid: paints a solid mistiness on the inside and a hazy blur on the exterior:
BlurStyle.outer: paints a hazy blur on the exterior and nothing on the inside:
BlurStyle.inner: paints a hazy blur on the inside and goose egg on the outside:
In this tutorial, we’ll utilize the default mistiness style,
Adding an offset
To add an first, we use the
class which takes in
Offset(dx, dy). It accepts both negative and positive values. The default kickoff is
To offset the shadow horizontally, the
value is changed. A positive offset moves the shadow to the right of the box, while a negative outset moves the shadow to the left of the box.
To commencement the shadow vertically, the
value is inverse. A negative first moves the shadow in a higher place the box, while a positive outset moves the shadow below the box.
If both the
offset values are set to zero, the shadow is centered behind the box.
We’ll give our container a
kickoff of zero and a
commencement of 15. This will move our shadow downwardly.
boxShadow: [ BoxShadow( color: Colors.grey.shade600, spreadRadius: 1, blurRadius: fifteen, offset: const Offset(0, 15) ) ]
To scale a shadow, we can use the
method. This method returns a new box shadow with its starting time, blurRadius, and spreadRadius scaled past the given cistron.
boxShadow: [ BoxShadow( colour: Colors.greyness.shade600, spreadRadius: ane, blurRadius: 15, commencement: const Offset(0, fifteen), ).scale(4) ]
Now that nosotros understand how to use the various
properties, nosotros can heighten the styling of our Flutter app elements.
to 1 side of a container
belongings takes a list of shadows. This list tin can be used to shift shadows to the desired sides of a box.
To employ a shadow to simply 1 side of a box, we need to shift or hide the shadows on all the remaining sides. This can exist accomplished by calculation a list of shadows with varying offsets.
Nosotros can add a box shadow to the bottom of our
using the following steps:
Step ane: Hide the top shadow
To hide the top shadow, we need to set our
beginning value to a positive number greater than our blur radius. This moves the shadow down, hiding it behind the
boxShadow: [ BoxShadow( color: Colors.grey.shade600, spreadRadius: 1, blurRadius: 5, offset: const Beginning(0, 5), ) ]
Pace 2: Hibernate the left shadow
If we add a new
to our list, we tin can apply its get-go to hide the left shadow. This new shadow will demand to take the same colour every bit our
In addition, we’ll need to ready the
value to a negative value greater than or equal to the blur radius of the first shadow. This moves the new shadow to the left, hiding the initial left shadow.
boxShadow: [ BoxShadow( color: Colors.grey.shade600, spreadRadius: 1, blurRadius: 5, kickoff: const Get-go(0, five), ), BoxShadow( colour: Colors.gray.shade300, offset: const Offset(-5,0), ) ]
Step 3: Hide the right shadow
If we add together a new
to our list, we can apply its offset to hibernate the right shadow. Only like the process from Step 2, this new shadow needs to have the same colour as our
We’ll need to ready the
value to a positive value greater than or equal to the blur radius of the starting time shadow. This moves the new shadow to the right, hiding the initial correct shadow.
boxShadow: [ BoxShadow( color: Colors.greyness.shade600, spreadRadius: one, blurRadius: v, offset: const Offset(0, 5), ), BoxShadow( colour: Colors.greyness.shade300, offset: const Offset(-5,0), ), BoxShadow( colour: Colors.grey.shade300, offset: const Start(5,0), ) ]
With these three steps, we have managed to visually bear witness the shadow on the bottom of our
for an inner shadow issue
We can apply inner shadows to a
past tweaking the shadows and adding a linear slope.
This is a two-step process.
Pace i: Add together two shadows of different colors
For this case, we’ll add two shadows, one white and one grayness, and first them opposite to each other:
boxShadow: [ BoxShadow( colour: Colors.grey.shade600, spreadRadius: 1, blurRadius: 15, offset: const Beginning(5, 5), ), const BoxShadow( colour: Colors.white, offset: Starting time(-5,-5), blurRadius: xv, spreadRadius: 1 ) , ],
Add a linear gradient
Nosotros’ll use the
belongings to create a linear slope:
BoxDecoration( ... boxShadow: [ BoxShadow( color: Colors.grey.shade600, spreadRadius: 1, blurRadius: 15, offset: const Kickoff(5, 5), ), const BoxShadow( color: Colors.white, offset: Kickoff(-5,-v), blurRadius: 15, spreadRadius: one ) , ], gradient: LinearGradient( brainstorm: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Colors.gray.shade200, Colors.grey.shade300, Colors.grey.shade400, Colors.grey.shade500, ], ), )
The shadow takes the shape of the
when its shape is changed.
In this tutorial, we covered how to apply box shadows to a container in a Palpitate app. We showed how to adjust the color, spread radius, blur radius, blur way and offset of the shadow. We besides demonstrated how to add shadows to only 1 side of a container and how to create an inner shadow result.
All the code in this article is bachelor on GitHub. I promise y’all enjoyed this tutorial!
LogRocket: Full visibility into your web and mobile apps
LogRocket is a frontend awarding monitoring solution that lets you replay issues every bit if they happened in your own browser. Instead of guessing why errors happen, or request users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with whatsoever app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
Try it for complimentary.