How to Change Shadow Color of Elevated Button in Flutter

Nowadays, many Flutter developers prefer ElevatedButton as their button. In this Flutter tutorial, let’s check how to change shadow color of Elevated Button.

The styling of the Elevated Button is done with the help of ButtonStyle class. The shadowColor property of the ButtonStyle class can be used to change the shadow color.

ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                  shadowColor: MaterialStateProperty.all<Color>(Colors.green)),
              child: Text(' Elevated Button'))

As you see, you have to make use of the MaterialStateProperty class to mention the color. You can adjust the shadow with the elevation property of the ButtonStyle class.

Following is the complete example of ElevatedButton with custom shadow color in Flutter.

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ElevatedButton Shadow Color Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Padding(
          padding: EdgeInsets.all(30),
          child: ElevatedButton(
              onPressed: () {},
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
                  shadowColor: MaterialStateProperty.all<Color>(Colors.green)),
              child: Text(' Elevated Button'))),
    ));
  }
}

Following is the output when the button is pressed.

That’s it. I hope this Flutter tutorial will be helpful for you.

Leave a Comment

Your email address will not be published. Required fields are marked *