Hide Box Shadow On One Side

By | 28/08/2022

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
BoxShadow
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
BoxShadow
class

The Flutter
BoxShadow
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
BoxShadow
class must be implemented inside a
BoxDecoration
widget.

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.
BoxShadow
takes several properties, including:

  • color: adds color to the shadow; the default is black
  • spreadRadius; establishes how big of a bridge the
    BoxShadow
    widget should inflate the box
  • blurRadius: adds blur to the shadow
  • blurStyle: defines way to utilise on the blur; the default is
    BlurStyle.normal
  • starting time: creates
    ten
    and
    y
    offsets

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
BoxShadow
to the app below. The app consists of a centered
Container
widget with an
Icon
widget.

Default Box Without Shadow
Default box without any shadow.

The
BoxDecoration
widget has a
boxShadow
property which expects a list of
BoxShadow.

... 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: [],       ),     ),   ), )
      

Adding color

First permit’due south add a
BoxShadow
to our listing:

        BoxDecoration(   color: Colors.grey.shade300, // this is the container's colour   boxShadow: [     BoxShadow(), // no shadow color set, defaults to black   ] )
      
Default Box Shadow Color
Box with default box shadow color.

The
BoxShadow
is added below the
Container. To illustrate this, we’ll give our
Container
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   ] )
      
Transparent Box Default Shadow Color
Transparent box with default shadow colour.

To add a color to the shadow, we’ll brand use of the
color
property. We’ll add a grey shadow to our app.

color: Colors.gray.shade600
      

Adding a spread radius

The default
spreadRadius
is zero. Positive values increment the size of the shadow while negative values decrease the size.

Nosotros’ll requite our
Container
a
spreadRadius
of one, as shown below:

boxShadow: [   BoxShadow(     colour: Colors.grey.shade600,     spreadRadius: 1,   ) ]
      
Box Spread With Radius of One
Box with a spread radius of one.

Adding a blur radius

The default
blurRadius
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
Container
a
blurRadius
of fifteen.

boxShadow: [   BoxShadow(     color: Colors.grey.shade600,     spreadRadius: 1,     blurRadius: 15   ) ]
      
Box Blur Radius of 15
Box with blur radius of xv.

Adding a mistiness style

To change the mode of the blur, we update the
blurStyle
property. The property takes in a
BlurStyle
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
Box Normal Blur Style
Box with normal blur mode.
  • BlurStyle.solid: paints a solid mistiness on the inside and a hazy blur on the exterior:

    Box Solid Blur Style
    Box with solid blur fashion.
  • BlurStyle.outer: paints a hazy blur on the exterior and nothing on the inside:

    Box Outer Blur Style
    Box with outer mistiness style.
  • BlurStyle.inner: paints a hazy blur on the inside and goose egg on the outside:

    Box Inner Blur Style
    Box with inner mistiness way.

In this tutorial, we’ll utilize the default mistiness style,
BlurStyle.normal.

Adding an offset

To add an first, we use the
Offset
class which takes in
x
and
y
values:
Offset(dx, dy). It accepts both negative and positive values. The default kickoff is
Beginning.zero.

To offset the shadow horizontally, the
dx
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
dy
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
dx
and
dy
offset values are set to zero, the shadow is centered behind the box.

Offset Illustration
Offset illustration.

We’ll give our container a
dx
kickoff of zero and a
dy
commencement of 15. This will move our shadow downwardly.

boxShadow: [   BoxShadow(     color: Colors.grey.shade600,     spreadRadius: 1,     blurRadius: fifteen,     offset: const Offset(0, 15)   ) ]
      
Box Vertical Offset of 15
Box with a vertical offset of 15.

To scale a shadow, we can use the
scale
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
BoxShadow
properties, nosotros can heighten the styling of our Flutter app elements.

Applying
BoxShadow
to 1 side of a container

The
BoxDecoration’s
boxShadow
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
Container
using the following steps:

Step ane: Hide the top shadow

To hide the top shadow, we need to set our
dy
beginning value to a positive number greater than our blur radius. This moves the shadow down, hiding it behind the
Container.

boxShadow: [   BoxShadow(     color: Colors.grey.shade600,     spreadRadius: 1,     blurRadius: 5,     offset: const Beginning(0, 5),   ) ]
      
Box Top Shadow Hidden
Box with peak shadow subconscious.

Pace 2: Hibernate the left shadow

If we add a new
BoxShadow
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
Container.

In addition, we’ll need to ready the
dx
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),   ) ]
      
Box Top Left Shadow Hidden
Box with top and left shadow hidden.

Step 3: Hide the right shadow

If we add together a new
BoxShadow
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
Container.

We’ll need to ready the
dx
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),   ) ]
      
Box Bottom Shadow Only
Box with bottom shadow only.

With these three steps, we have managed to visually bear witness the shadow on the bottom of our
Container.

Applying
BoxShadow
for an inner shadow issue

We can apply inner shadows to a
Container
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   ) , ],
      

Stride ii:
Add a linear gradient

Nosotros’ll use the
BoxDecoration‘due south
slope
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,     ],   ), )
      
Rectangular Box Inner Shadow
Rectangular box with inner shadow effect.

The shadow takes the shape of the
Container
when its shape is changed.

Circular Box Inner Shadow
Circular box with inner shadow upshot.

Determination

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 Dashboard Free Trial Banner

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.

In add-on to logging Redux actions and land, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-folio and mobile apps.

Try it for complimentary.

Source: https://blog.logrocket.com/enhance-mobile-apps-with-flutter-boxshadow/