Add shadow to Container in Flutter

There are several way to add shadow to a Container.

BoxDecoration with BoxShadow

Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: Colors.blueGrey,
                  blurRadius: 4,
                  offset: Offset(4, 8), // Shadow position
                ),
              ],
            ),
          )

PhysicalModel

PhysicalModel(
            color: Colors.blue,
            elevation: 8,
            shadowColor: Colors.blueGrey,
            borderRadius: BorderRadius.circular(16),
            child: Container(width: 200, height: 200),
          )

Material with shadowColor as a child of Container

Container(
            width: 200,
            height: 200,
            child: Material(
              borderRadius: BorderRadius.circular(16),
              elevation: 8,
              shadowColor: Colors.blueGrey,
              color: Colors.blue,
              child: Text('Container'),
            ),
          )

Leave a Comment

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