Posted in Dart Flutter

Flutter – How to set Box Shadow on Container Widget

Flutter – How to set Box Shadow on Container Widget Posted on May 22, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

The beautiful UI of the app is the key to make a good impression with users. While making beautiful UI, the box-shadow property is very important during designing. See the example below and learn how to apply a box-shadow on the Container widget of Flutter.

box shadow on container widget

To apply box shadow, use the following code:

BoxShadow(
   color: Colors.grey.withOpacity(0.5), //color of shadow
   spreadRadius: 5, //spread radius
   blurRadius: 7, // blur radius
   offset: Offset(0, 2), // changes position of shadow
   //first paramerter of offset is left-right
   //second parameter is top to down
)

Full dart code:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class ContainerStyle extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar( 
         title: Text("Beautiful Container Shadow"),
         backgroundColor: Colors.redAccent,
       ),
       body:Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(20),
          height: 200,
          width:double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
             borderRadius: BorderRadius.circular(30), //border corner radius
             boxShadow:[ 
               BoxShadow(
                  color: Colors.grey.withOpacity(0.5), //color of shadow
                  spreadRadius: 5, //spread radius
                  blurRadius: 7, // blur radius
                  offset: Offset(0, 2), // changes position of shadow
                  //first paramerter of offset is left-right
                  //second parameter is top to down
               ),
               //you can set more BoxShadow() here
              ],
          ),
          child:Text("Box Shadow on Container", style: TextStyle(
            fontSize:20,
          ),),
       ),
    );
  }
}

In this way, you can apply box shadow on Container() widget in Flutter.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *