In this Flutter post, we will be implementing Flutter box shadow only top and explaining everything practically step by step by using a proper Flutter example code. I hope after reading this post, it will be very easy for you to implement Flutter box shadow only top in your own Flutter apps.
So what are we both waiting for? Let’s both of us jump right into implementing it.
What is Flutter Box Shadow Only Top?
Flutter box shadow only top means the shadow that comes from the Flutter container box should be shown at only top direction.
Let’s understand it using an easy Flutter example. Let’s first see what the default Flutter box shadow offset looks like, it is the position of the Flutter box shadow, then we will customize it to Flutter box shadow only top.
Default Flutter Box Shadow Offset
To see what the default offset of Flutter box shadow actually looks like, just follow these steps:
- First we have to define a Flutter container widget with some height, width, a container background color and a child text widget.
- We will also use the box decoration property by using its decoration constructor.
- We’ll use the box shadow constructor of box decoration. This constructor takes a list of box shadow widgets.
- We will pass one box shadow widget and we will customize its blur radius, spread radius and color constructor.
If these steps confuse you then see the below code in which these steps are practically implemented:
Container( height: 100, width: 240, decoration: BoxDecoration( boxShadow: [ BoxShadow(blurRadius: 5, spreadRadius: 1, color: Colors.grey) ], color: Colors.white, ), alignment: Alignment.center, child: Text('Flutter Container Default Shadow Offset', textAlign: TextAlign.center))

Implementing Flutter Box Shadow Only Top
Now to implement the Flutter box shadow to only show in top, we have to use the offset constructor of the box shadow widget. This constructor takes an offset which have two parameters. First parameter is used to give offset to the horizontal(left or right) direction and the second one is used to give offset to the vertical(top or bottom) direction.
So, we will be using the second parameter and pass it a negative integer value, it actually takes a double(decimal) value but integer also works fine(automatically converted). See the below code:
BoxShadow( offset: Offset(0, -10), blurRadius: 3, spreadRadius: 1, color: Colors.grey)

Flutter Box Shadow Only Top Implementation 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( height: 100, width: 240, decoration: BoxDecoration( boxShadow: [ BoxShadow( offset: Offset(0, -10), blurRadius: 3, spreadRadius: 1, color: Colors.grey) ], color: Colors.white, ), alignment: Alignment.center, child: Text('Flutter Container shadow Only Top', textAlign: TextAlign.center))), )); } }
Conclusion
To conclude, hope you now will implement Flutter box shadow only top with easy in your Flutter apps. Your feedback would be well appreciated. Thank you for reading.