how to add shadow or elevation to materialstateproperty?

51 views Asked by At

I have this button, I used material state property to give borderradius

                         ElevatedButton(
                          onPressed: () {
                          
                          },
                    
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.resolveWith<Color?>(
                                (Set<MaterialState> states) {
                                  if (states.contains(MaterialState.pressed)) {
                                    return Theme.of(context)
                                        .colorScheme
                                        .primary
                                        .withOpacity(0.5);
                                  }
                                  return Colors.grey[
                                      200]; // Use the component's default.
                                },
                              ),
                              shape: MaterialStateProperty.all<
                                      RoundedRectangleBorder>(
                                  RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(13.0),
                                      side: BorderSide(
                                          color: Colors.grey[200]!)))),
                          child: Text("Favourites",
                              style: robotoMedium.copyWith(
                                color: Colors.grey[600],
                              )),
                        ),

and this one I have shadow and elevation, but I don't know how to provide borderradius.

                          ElevatedButton(
                          onPressed: () {
                            
                          },
                    
                          style: ElevatedButton.styleFrom(
                              backgroundColor: Colors.grey[100],
                              shadowColor: Colors.grey,
                              elevation: 100),
                          child: Text("Favourites",
                              style: robotoMedium.copyWith(
                                color: Colors.grey[700],
                              )),
                          ),
1

There are 1 answers

0
Hakimi Ridzuan On

You may add another properties of the ElevatedButton.styleFrom() which is "shape" to your second button snippet. Below is an example:

ElevatedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(6),
        ) 
      ),

But your title and your explanation seems off. Not sure what you really need exactly.