CODEWITHSUNDEEP
flutterflutter-layout
Roc Boronat
Roc Boronat

Reputation: 12161

Remove the drop shadow from a RaisedButton in Flutter

Is there a way to completely remove the drop shadow under the RaisedButton? I've set elevation: 0 to that very RaisedButton but the drop shadow still appears when tapping it.

Upvotes: 15

Views: 22815

Answers (4)

SammyPro
SammyPro

Reputation: 51

You can find the answer here: https://api.flutter.dev/flutter/material/ButtonStyle-class.html

You have to use:

.copyWith(elevation:ButtonStyleButton.allOrNull(0.0))


//Example

ElevatedButton(
        child: Text("Your Text"),
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: Color.fromRGBO(255, 255, 255, 1),
          foregroundColor: Colors.black54,
          shadowColor: Colors.transparent,
          elevation: 0.0,
        ).copyWith(elevation:ButtonStyleButton.allOrNull(0.0))

Upvotes: 5

Niteesh
Niteesh

Reputation: 3140

Since raised button is deprecated.

ElevatedButton(
                style: ElevatedButton.styleFrom(
                  elevation: 0.0,
                  shadowColor: Colors.transparent,
               
                ),),

This should be the solution. It will remove the elevation and the shadows.

Upvotes: 27

jestrabikr
jestrabikr

Reputation: 480

Since the RaisedButton is deprecated and ElevatedButton should be used insted, the solution for this problem is also simple.

elevation: MaterialStateProperty.all<double>(0)

Upvotes: 5

Roc Boronat
Roc Boronat

Reputation: 12161

RaisedButton has four different elevation parameters. Just set them all to 0.

elevation: 0,
hoverElevation: 0,
focusElevation: 0,
highlightElevation: 0,

Upvotes: 18

Related Questions