Home > Mobile >  How to create shadow with 0 radius and only at bottom side of ElevatedButton in Flutter for material
How to create shadow with 0 radius and only at bottom side of ElevatedButton in Flutter for material

Time:02-02

How can I create shadow in ElevatedButton with 0 radius and only at bottom side? SwiftUI has shadow modifier which allows you to edit shadow color, radius and positions. Is there something similar modifier/function/approach in Flutter please? For better understanding see example image below.

Example

And here is my code:

ElevatedButton(
   onPressed: loginAsGuest,
   style: ElevatedButton.styleFrom(foregroundColor: Colors.black),
   child: const Text(
      "GET STARTED",
   )
);

Thanks!

I tried google something that could help to solve my problem but I didn't find anything.

CodePudding user response:

I use this method to create shadow for ElevatedButton button

       Container(
              decoration: const BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Colors.black38,
                      offset: Offset(0, 4),
                      blurRadius: 4,
                      spreadRadius: 0),
                ],
              ),
              child: ElevatedButton(
                child: Text("Button"),
                onPressed: () {},
              ),
            )

You can adjust the values of offset, blurRadius, spreadRadius and color to achieve the desired shadow.

  • Related