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', ), )
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:
decoration: BoxDecoration( boxShadow: [ BoxShadow( offset: Offset(8, 0), spreadRadius: 0, blurRadius: 5, color: Colors.grey) ], color: Colors.white, )
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:
decoration: BoxDecoration( boxShadow: [ BoxShadow( offset: Offset(-8, 0), spreadRadius: 0, blurRadius: 5, color: Colors.grey) ], color: Colors.white, )
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:
decoration: BoxDecoration( boxShadow: [ BoxShadow( offset: Offset(0, -5), spreadRadius: 0, blurRadius: 5, color: Colors.grey) ], color: Colors.white, )
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:
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:
boxShadow: [ BoxShadow( offset: Offset(-5, -5), spreadRadius: 0, blurRadius: 5, color: Colors.grey) ]
Example 6: Top Right Offset
boxShadow: [ BoxShadow( offset: Offset(5, -5), spreadRadius: 0, blurRadius: 5, color: Colors.grey) ]
Example 7: Bottom Right Offset
boxShadow: [ BoxShadow( offset: Offset(5, 5), spreadRadius: 0, blurRadius: 5, color: Colors.grey) ]
Example 8: Bottom Left Offset
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
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.
