How can I add shadow to the widget in flutter?

Adding shadows to widgets in Flutter is typically achieved using the BoxDecoration class, which serves as a property of the Container widget. With BoxDecoration, you can easily apply background colors, borders, rounded corners, and shadows to containers.

In the following example, we demonstrate how to add a shadow to a Container:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5), // Shadow color
                  spreadRadius: 5, // Spread radius
                  blurRadius: 7, // Blur radius
                  offset: Offset(0, 3), // Horizontal and vertical offset
                ),
              ],
            ),
            child: Center(child: Text('Hello, Shadow!')), 
          ),
        ),
      ),
    );
  }
}

In this example, we create a Container and add a shadow by setting the decoration property. BoxShadow is a class that describes a single shadow, and it has several parameters:

• color: Controls the shadow color, typically set using the Colors class, and can be adjusted for transparency with the withOpacity() method.
• spreadRadius: Defines the size of the shadow's spread; larger values result in a wider shadow area.
• blurRadius: Controls the blur intensity of the shadow; larger values make the shadow more blurred.
• offset: Sets the shadow's offset; Offset(0, 3) indicates a downward shift of 3 pixels.

By adjusting these parameters, you can create various shadow effects to suit different UI design requirements.