Container BoxShadow Example in Flutter

In this example, we are going to show you how to add a box shadow to Container() widget in Flutter. Shadows are the important components on designing the app User interface. See the example below:

Container(
  height: 150, 
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        spreadRadius: 10,
        blurRadius: 5,
        offset: Offset(0, 0), // changes x,y position of shadow
      ),
    ],
  ),
)

To add shadow to Container() widget, first you have to pass BoxDecoration() widget to decoration attribute of Container. After that you can add box shadow on boxShadow attribute of BoxDecoration(),

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          body: Container(
            padding: EdgeInsets.only(top:80, left:20, right:20),
            child: Wrap(
                alignment: WrapAlignment.start,
                children: [
                  
                   Container(
                     height: 150, 
                     decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.2),
                            spreadRadius: 10,
                            blurRadius: 5,
                            offset: Offset(0, 0), // changes x,y position of shadow
                          ),
                        ],
                      ),
                   )
                   
            ],)
          )
       );
  }
}

In this way, you can add box shadow to Container() widget of Flutter. 

No any Comments on this Article


Please Wait...