How To Easily Set Flutter Box Shadow Only Top

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))

This is the default Flutter box shadow offset which you can see in the above image.

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)

You can see that the Flutter box shadow only top is successfully implemented. Passing it a positive value will show the shadow at bottom but we want the shadow on top so we have passed it a negative value.

Hope this clear all your queries regarding the implementation of Flutter box shadow only top. Do let me know if you still have questions related to Flutter box shadow only top. I would be really glad to answer all.

Below section has the complete Flutter source code of the above implemented Flutter box shadow only top.

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.