RitickSaha / glassmorphism

Glassmorphic UI Package For Flutter || UI ||
https://pub.dev/packages/glassmorphism
Apache License 2.0
66 stars 26 forks source link

Adding drop shadow / elevation #10

Open MorosophDude opened 3 years ago

MorosophDude commented 3 years ago

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