How to Add Shadow to Widget In Flutter?

· 2 min read
Add Shadow to Widget In Flutter
Add Shadow to Widget In Flutter

In a Mobile Application Design, you might have been through some screens contain a card or images with a shadow in them. So in this article, we will be through How to Add Shadow to Widget In Flutter.

How to Add Shadow to Widget In Flutter?

 

A Container Widget can take a BoxDecoration which takes a boxShadow. Consider a code snippet as below:

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

So we will get output like below:

"<yoastmark

Thanks for reading, Next up we will learn box shadow flutter example, add elevation to container flutter, flutter box shadow only bottom, flutter shadow transparent, flutter inner shadow, flutter button shadow, flutter shadow one side, flutter shadow opacity, etc.

Conclusion:

So in this article, we have been through How to Add Shadow to Widget In Flutter.

Still, need support for Flutter? We are always there to serve you better.

Keep Fluttering !!! Keep Learning !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply