Customizing Shadows

The wind plugin provides a powerful way to manage shadows in your Flutter application through the WindTheme class. By using pre-defined shadow sizes, customizing them, or specifying arbitrary values, you can achieve consistent and visually appealing designs.

Default Shadow Sizes 🎨

The WindTheme class includes a set of default shadow sizes mapped to descriptive keys. These sizes can be applied directly in your application for consistent shadow effects.

Key Value (px) Description
none 0 No shadow
sm 1 Small shadow
default 2 Default shadow size
md 4 Medium shadow
lg 8 Large shadow
xl 12 Extra large shadow
2xl 16 Very large shadow
3xl 24 Extra extra large shadow
inner 1 Inner shadow effect

For example:

  • Using shadow-sm applies a shadow with an elevation of 1px.
  • Using shadow-lg applies a shadow with an elevation of 8px.

Arbitrary Shadow Values 🎯

The wind plugin supports arbitrary values for shadows, allowing you to specify custom shadow sizes dynamically. This is done using the shadow-[value] syntax, where value is the desired shadow size in px.

Examples:

  • shadow-[8] applies a shadow with an elevation of 8px.
  • shadow-[20] applies a shadow with an elevation of 20px.

This feature is ideal for creating custom designs where the default sizes are not sufficient.

Managing Shadows Dynamically

The WindTheme class provides methods to check, retrieve, customize, and remove shadow sizes dynamically.

Checking if a Shadow Size Exists

To verify if a specific shadow size is defined:

bool exists = WindTheme.hasShadowSize('lg');
print(exists); // Output: true

Retrieving a Shadow Size

To fetch the value of a shadow size:

double size = WindTheme.getShadowSize('xl');
print(size); // Output: 12

Adding or Updating a Shadow Size

You can define a new shadow size or update an existing one:

// Add a custom shadow size
WindTheme.setShadowSize('custom', 10);

// Update an existing shadow size
WindTheme.setShadowSize('lg', 6);

Removing a Shadow Size

To remove a shadow size if it’s no longer needed:

WindTheme.removeShadowSize('sm'); // Removes the 'sm' size