Skip to content

Adding drop shadow / elevation #10

Description

@MorosophDude

Is your feature request related to a problem? Please describe.
It would be cool if I could add drop shadow / elevation to GlassmorphicContainer. The designs I made (and got approved from client) has no border and uses drop shadow to separate itself from other elements of the page.

Describe the solution you'd like
I would like an optional parameter for 'elevation', 'shadowColor' just like in Card/Material widget, or 'boxShadow' like in BoxDecoration widget.

Describe alternatives you've considered
Currently what I am doing to get this effect is, wrapping GlassmorphicContainer with a Container and provide decoration as follows

          decoration: BoxDecoration(
            color: Colors.transparent,
            borderRadius: BorderRadius.circular(20),
            boxShadow: const [
              BoxShadow(
                color: AppColors.shadow_black, //Use color of your choice
                offset: Offset(
                  5.0,
                  5.0,
                ),
                blurRadius: 10.0,
                spreadRadius: 2.0,
              ),
            ],
          ),

A better way might be to wrap GlassmorphicContainer with PhysicalModel(with color: Colors.transparent, of course) [Thanks to Flutter Widget of the Week] as it is a more raw/basic Widget but the problem for me was I couldn't control offset for shadow using this method.

Here is one of the pages from my design (what I was trying to achieve)

Dashboard Page - 1

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or requestgood first issueGood for newcomers

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions