How To Easily Customize Flutter Box Shadow Offset

flutter box shadow offset

In this Flutter post, we will be learning how to change Flutter box shadow offset. We will discuss what Flutter box shadow offset and we will be using a simple and easy Flutter example to implement and customize the shadow offset in Flutter container box.

What is Flutter Box Shadow Offset?

Flutter box shadow offset is used to position the shadow of the Flutter container widget. For that we will give our Flutter container box a shadow. Let’s first see what the default Flutter box shadow offset is, then we will see how to change the offset of the Flutter box shadow.

Default Flutter Box Shadow Offset

For that, we first have to define a simple Flutter container widget and give it a box shadow with some blur radius and spread radius. For now, we will use the default box shadow color. See the below code:

Container(
          decoration: BoxDecoration(
            boxShadow: [BoxShadow(spreadRadius: 2, blurRadius: 5)],
            color: Colors.white,
          ),
          width: 280,
          height: 60,
          alignment: Alignment.center,
          child: Text(
            'Flutter Container default Offset',
          ),
        )
flutter box default offset
You can see in the above image that the default Flutter box shadow offset of container is centered. Let’s now see how to change the offset of box shadow.

Change Flutter Box Shadow Offset(8 Examples)

We will be looking at multiple ways to change the offset of box shadow so you can have a clear and in depth idea of its customization.

We have to use the offset constructor of the box shadow. This constructor takes an offset widget. This offset widget takes two parameters of double(decimal) value but passing it integer also works fine. The first parameter is used for the horizontal direction and second one for the vertical direction.

Let’s now see multiple examples of the Flutter box shadow offset customization.

Example 1: Right Offset

If you want your Flutter container to have a shadow on right then see the below code for that:

flutter box offset only right

  decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  offset: Offset(8, 0),
                  spreadRadius: 0,
                  blurRadius: 5,
                  color: Colors.grey)
            ],
            color: Colors.white,
          )
You can see that we have given 8 value to the horizontal parameter and 0 to the vertical parameter to minimize the vertical offset of the Flutter box shadow.
Example 2: Left Offset

I hope you have already guessed on what to do if you want your Flutter container to have a shadow on left. If not, then don’t worry, just see the below code:

flutter box offset only left

  decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  offset: Offset(-8, 0),
                  spreadRadius: 0,
                  blurRadius: 5,
                  color: Colors.grey)
            ],
            color: Colors.white,
          )
You can see that we have given a negative 8 value to the horizontal parameter. Positive value will give the offset in right direction and that means negative value will show the offset in left direction.
Example 3: Top Offset

Now to give a top offset to our Flutter container box shadow. We have to give a negative value to the vertical direction parameter of the box shadow widget. See the below code:

flutter box offset only top

  decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  offset: Offset(0, -5),
                  spreadRadius: 0,
                  blurRadius: 5,
                  color: Colors.grey)
            ],
            color: Colors.white,
          )
You can see that we have given a negative 5 value to the vertical parameter. Positive value will give the offset in bottom direction which means negative value will show the offset in top direction.
Example 4: Bottom Offset

Now you already know how to give bottom offset box shadow. Simply just pass a positive value to the vertical parameter. See the below code:

flutter box offset only bottom

  decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  offset: Offset(0, 5),
                  spreadRadius: 0,
                  blurRadius: 5,
                  color: Colors.grey)
            ],
            color: Colors.white,
          )
Example 5: Top Left Offset

Hope you already have figured out how to give top left Flutter box shadow offset. In case you don’t, see the below code:

flutter container box offset top left

 boxShadow: [
              BoxShadow(
                  offset: Offset(-5, -5),
                  spreadRadius: 0,
                  blurRadius: 5,
                  color: Colors.grey)
            ]
You can see that we have passed negative value to both vertical horizontal parameter to get the top left offset. Let’s now see how to get the bottom right offset and many more.
Example 6: Top Right Offset
flutter container box offset top right
 boxShadow: [
            BoxShadow(
                offset: Offset(5, -5),
                spreadRadius: 0,
                blurRadius: 5,
                color: Colors.grey)
            ]
Example 7: Bottom Right Offset
flutter container box offset bottom right
 boxShadow: [
            BoxShadow(
                offset: Offset(5, 5),
                spreadRadius: 0,
                blurRadius: 5,
                color: Colors.grey)
            ]
Example 8: Bottom Left Offset
flutter container box offset bottom left
 boxShadow: [
            BoxShadow(
                offset: Offset(-5, 5),
                spreadRadius: 0,
                blurRadius: 5,
                color: Colors.grey)
            ]

You can give different values to the vertical and horizontal parameters depending on what type of Flutter box shadow offset you want.

I have covered many examples on how to use and customize Flutter box shadow offset so you can easily implement any type of offset in your Flutter apps.

Don’t hesitate to ask in the comment section if you still face any difficulties related to the customization of Flutter box shadow offset. I would love to answer all your questions.

Below section has the complete Flutter source code of the customized Flutter box shadow offset.

Customized Flutter Box Shadow Offset Source Code

flutter box shadow offset

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  offset: Offset(5, 5),
                  spreadRadius: 1,
                  blurRadius: 8,
                  color: Colors.black54)
            ],
            color: Colors.pink,
          ),
          width: 280,
          height: 60,
          alignment: Alignment.center,
          child: Text(
            'Flutter Box Shadow Custom Offset',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ));
  }
}

Conclusion

To conclude, I have practically discussed Flutter box shadow offset in detail with examples. Hope you now will easily use and customize Flutter box shadow offset in your Flutter apps. Be sure to share your thoughts and feedback. Thank you for reading this article.

Leave a Comment

Your email address will not be published.