In this Flutter post, we will be explaining and implementing Flutter container shadow by the use of an easy Flutter example.
A detailed step by step implementation will be discussed for better understanding. After reading this post, you will implement and customize Flutter container shadow in your own Flutter apps with ease.
What is Flutter Container Shadow?
As the name suggests, Flutter container shadow is the shadow that is used to make the container looks elevated. The shadow is used to make the container look more beautiful. Let’s now practically understand everything about Flutter container shadow using Flutter example.
Default Flutter Container Shadow
To see what the default Flutter container shadow is, we have used a Flutter container widget with some height and width. We have given that Flutter container a background color and also a child Flutter text widget. See the below code:
Container( width: 240, height: 50, alignment: Alignment.center, color: Colors.blue, child: Text( 'Flutter Container default shadow', style: TextStyle(color: Colors.white, fontSize: 15), ), )
Implementing Flutter Container Shadow(All Steps)
Now to give shadow to the Flutter container widget, we have to first use the decoration constructor of the container class and pass box decoration to that constructor.
Now by using the box Shadow constructor of the box decoration, we can easily give our container a shadow. This box shadow constructor takes a list of box shadow. Multiple box shadow can be used to give multiple colors and other properties to the same container.
For demonstration, we will use one box shadow and customize its properties to see what changes it will do to the Flutter container shadow. See the below code:
decoration: BoxDecoration( boxShadow: [ BoxShadow(spreadRadius: 1, blurRadius: 1, color: Colors.black) ], )
Box Shadow Constructors
- Color
- Blur Radius
- Spread Radius
- Offset
Color
Color constructor is used to give color to the box shadow. This constructor takes a color, so for demonstration, we have passed it a green color. See below code:
BoxShadow(spreadRadius: 4, blurRadius: 10, color: Colors.green)
Spread Radius with Examples
Less Spread Radius
BoxShadow(spreadRadius: 1, blurRadius: 1, color: Colors.black)
More Spread Radius
BoxShadow(spreadRadius: 5, blurRadius: 1, color: Colors.black)
Blur Radius with Examples
Blur radius constructor is used to increase or decrease the extent of the blur area of the Flutter container shadow. We will see what change we will see by increasing or decreasing the blur radius value. It also takes a double(decimal) value but we can pass integer. See below:
Less Blur Radius
BoxShadow(spreadRadius: 1, blurRadius: 3, color: Colors.black)
More Blur Radius
BoxShadow(spreadRadius: 1, blurRadius: 10, color: Colors.black)
Offset(Multiple Examples)
Offset constructor is used to change the position of the box shadow. This constructor takes offset and this offset takes two parameters. First one is for the horizontal direction and second one for vertical direction. Both of them takes a double(decimal value) but passing it an integer value will work just fine. We will use some examples to show you how the offset looks with different values and what changes it will do to the Flutter container shadow.
Example 1
offset: Offset(0, 0)
Example 2
offset: Offset(7, 0)
Example 3
offset: Offset(0, 7)
Example 4
offset: Offset(-5, 0)
Example 5
offset: Offset(0, -6)
Example 6
offset: Offset(6, 6)
Example 7
offset: Offset(-6, -6)
Now you have a complete and better idea of how to use and properly customize the Flutter container shadow. Don’t hold your words back if you have any questions related to Flutter container shadow. I would love to answer all.
Below is the complete source code of the customized Flutter container shadow.
Custom Flutter Container Shadow 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: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
spreadRadius: 2,
blurRadius: 6,
color: Colors.black54,
offset: Offset(4, 6)),
],
color: Colors.blue,
),
width: 240,
height: 50,
alignment: Alignment.center,
child: Text(
'Flutter Container Custom Shadow',
style: TextStyle(color: Colors.white, fontSize: 15),
),
),
],
),
)));
}
}Conclusion
To conclude this Flutter post, hope you now know what Flutter container shadow is and how to use and customize Flutter container shadow in your Flutter apps easily. Don’t hesitate to share your valuable feedback. Thank you for reading this post.
